/* ══════════════════════════════════════════════════════════════════════
   THE OS FRAME + THE INSTRUMENT COMPONENTS

   Loaded after surfaces.css, so where both name an element this wins without
   any !important.

   THE VISUAL ARGUMENT, in one paragraph.

   This is a scientific instrument that happens to run in a browser, so it is
   built the way an instrument is: a fixed chassis that never moves, a readout
   that changes, and no ornament anywhere. There are no gradients used as
   decoration, no glow, no glass, no neon, and no colour that does not carry a
   meaning defined in tokens.css. Type does the hierarchy; a hairline does the
   separation; and the only things that move are things whose underlying value
   moved.

   MOTION RULE, and it is not negotiable.

   Every animation in this sheet encodes something. The dial breathes at the
   rate the system is receiving; a spoke's length is a confidence; the fan's
   opening angle is a yield spread; the marker's position is today. If an
   animation cannot name the quantity it is expressing, it does not ship. And
   under prefers-reduced-motion every one of them resolves instantly to its
   final state — never to a static approximation of it.
   ══════════════════════════════════════════════════════════════════════ */

/* ── chassis ───────────────────────────────────────────────────── */

body.an-os {
	margin: 0;
	background: var(--an-bg);
	color: var(--an-text);
	font-family: var(--an-font-ui);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.sx-os { display: block; }

.sx-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--an-text); color: var(--an-bg);
	padding: 10px 18px; font-weight: 600; border-radius: 0 0 var(--an-radius-sm) 0;
}
.sx-skip:focus { left: 0; top: 0; }

.sx-frame {
	margin-left: var(--sx-rail);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.sx-canvas {
	flex: 1 0 auto;
	padding: 0 var(--sx-gut) var(--an-space-9);
}

.sx-main { display: block; }

/* Module pages open their own <main class="an-hy|an-p|an-t|an-c|an-pr">
   inside #an-main. They bring their own layout and their own max-widths, so
   the canvas gives them room and gets out of the way rather than imposing a
   grid they were never written for. */
.sx-canvas > main { max-width: var(--sx-max); margin-inline: auto; }

/* ── the rail ──────────────────────────────────────────────────── */

.sx-rail {
	position: fixed; inset: 0 auto 0 0; z-index: 60;
	width: var(--sx-rail);
	display: flex; flex-direction: column;
	background: var(--an-surface);
	border-right: 1px solid var(--an-line);
}

.sx-rail-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--an-space-4) 0 var(--an-space-6); }
.sx-rail-foot { border-top: 1px solid var(--an-line-soft); padding: var(--an-space-2); }

/* ── the four questions ────────────────────────────────────────── */

.sx-qs { list-style: none; margin: 0 0 var(--an-space-5); padding: 0 var(--an-space-3); }
.sx-qs > li + li { margin-top: 2px; }

.sx-qbtn {
	display: grid;
	grid-template-columns: 22px 1fr auto;
	align-items: center; gap: var(--an-space-3);
	padding: 11px var(--an-space-3);
	border-radius: var(--an-radius-md);
	color: var(--an-text-2);
	transition: background var(--an-fast) var(--an-ease), color var(--an-fast) var(--an-ease);
}
.sx-qbtn:hover { background: var(--an-sunk); color: var(--an-text); }

.sx-qbtn-i {
	font-family: var(--an-font-mono); font-size: 11px;
	color: var(--an-text-3);
	border: 1px solid var(--an-line); border-radius: 4px;
	width: 20px; height: 20px; display: grid; place-items: center;
}

.sx-qbtn-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sx-qbtn-t b { font-size: 14.5px; font-weight: 600; color: var(--an-text); }
.sx-qbtn-t em {
	font-style: normal; font-family: var(--an-font-mono);
	font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--an-text-3); margin-top: 2px;
}

.sx-qbtn-n {
	font-family: var(--an-font-mono); font-size: 11px;
	color: var(--an-text-3);
}

/* The active question is marked by a rule, not a fill. A filled row competes
   with the readings; a 2px rule states the same thing and stays quiet. */
.sx-qbtn.is-on {
	background: var(--an-sunk);
	box-shadow: inset 2px 0 0 var(--sx-open);
}
.sx-qbtn.is-on .sx-qbtn-i { border-color: var(--sx-open); color: var(--sx-open); }

/* Abilities under their question. Indented under the rule so the relationship
   is structural rather than decorative. */
.sx-qab { margin: 2px 0 var(--an-space-2) 30px; border-left: 1px solid var(--an-line-soft); padding-left: 8px; }

/* ── ability rows ──────────────────────────────────────────────── */

.sx-ab {
	display: grid; grid-template-columns: 20px 1fr auto;
	align-items: center; gap: 10px;
	width: 100%; padding: 7px 10px;
	border: 0; background: none; text-align: left; cursor: pointer;
	border-radius: var(--an-radius-sm);
	color: var(--an-text-2); font-size: 13.5px; font-family: inherit;
	transition: background var(--an-fast) var(--an-ease), color var(--an-fast) var(--an-ease);
}
.sx-ab:hover { background: var(--an-sunk); color: var(--an-text); }
.sx-ab.is-on { color: var(--an-text); font-weight: 600; }

.sx-ab-ic { display: grid; place-items: center; color: var(--an-text-3); }
.sx-ab.is-on .sx-ab-ic { color: var(--sx-open); }
.sx-ab-glyph { font-size: 14px; line-height: 1; }
.sx-ab-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-ab-n { font-family: var(--an-font-mono); font-size: 10.5px; color: var(--an-text-3); }

/* ── rail groups ───────────────────────────────────────────────── */

.sx-grp { padding: 0 var(--an-space-3); margin-top: var(--an-space-2); }

.sx-grp-h {
	display: flex; align-items: center; gap: 8px;
	width: 100%; padding: 8px 10px;
	border: 0; background: none; cursor: pointer; font-family: inherit;
	font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	font-weight: 600; color: var(--an-text-3);
}
.sx-grp-h .an-i { margin-left: auto; transition: transform var(--an-fast) var(--an-ease); }
.sx-grp-h[aria-expanded="true"] .an-i { transform: rotate(90deg); }
.sx-grp-n { font-family: var(--an-font-mono); letter-spacing: 0; text-transform: none; }

.sx-grp-h[aria-expanded="false"] + .sx-grp-b { display: none; }

.sx-morebtn {
	margin: 4px 0 0 10px; padding: 5px 0;
	border: 0; background: none; cursor: pointer; font-family: var(--an-font-mono);
	font-size: 11px; color: var(--an-text-3); text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── top bar ───────────────────────────────────────────────────── */

.sx-bar {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; gap: var(--an-space-3);
	height: var(--sx-bar); padding: 0 var(--sx-gut);
	background: var(--an-chrome);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--an-line);
}

.sx-burger { display: none; }

.sx-mark { display: flex; align-items: center; gap: 9px; flex: none; }
.sx-mark-t { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.sx-mark-t em { font-style: normal; color: var(--an-text-3); font-weight: 400; }

/* The mark is a filled square with a notch out of it — a field with a gap,
   which is the whole product in one glyph. It also carries the breathing. */
.sx-mark-glyph {
	width: 16px; height: 16px; flex: none; border-radius: 3px;
	background: var(--sx-open);
	clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 55%, 55% 100%, 0 100%);
	animation: sx-breathe var(--sx-breath) var(--sx-ease) infinite;
}

@keyframes sx-breathe {
	0%, 100% { opacity: .82; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.06); }
}

/* ── the one input ─────────────────────────────────────────────── */

.sx-cmd {
	/* min-width: 0 matters. Without it the field refuses to shrink below its
	   intrinsic width and pushes the acuity dial off the right edge of a
	   375px screen — which is where the one number this product most wants
	   read happens to live. */
	position: relative; flex: 1 1 auto; min-width: 0; max-width: 620px;
	display: flex; align-items: center; gap: 9px;
	height: 38px; padding: 0 12px;
	background: var(--an-bg);
	border: 1px solid var(--an-line); border-radius: var(--an-radius-md);
	transition: border-color var(--an-fast) var(--an-ease), box-shadow var(--an-fast) var(--an-ease);
}
.sx-cmd:focus-within {
	border-color: var(--sx-open);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-open) 16%, transparent);
}
.sx-cmd-ic { color: var(--an-text-3); display: grid; place-items: center; }
.sx-cmd input {
	flex: 1; min-width: 0; border: 0; background: none; outline: none;
	font: inherit; font-size: 14px; color: var(--an-text);
}
.sx-cmd input::-webkit-search-cancel-button { display: none; }
.sx-cmd-kbd {
	font-family: var(--an-font-mono); font-size: 11px; color: var(--an-text-3);
	border: 1px solid var(--an-line); border-radius: 4px; padding: 1px 6px;
}
.sx-cmd:focus-within .sx-cmd-kbd { opacity: 0; }

.sx-cmd-out {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
	max-height: 62vh; overflow-y: auto;
	background: var(--an-surface);
	border: 1px solid var(--an-line); border-radius: var(--an-radius-md);
	box-shadow: var(--an-shadow-2);
	padding: 6px;
}
.sx-cmd-opt {
	display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
	width: 100%; padding: 9px 11px; border: 0; background: none; cursor: pointer;
	text-align: left; font-family: inherit; border-radius: var(--an-radius-sm);
	color: var(--an-text);
}
.sx-cmd-opt:hover, .sx-cmd-opt.is-sel { background: var(--an-sunk); }
.sx-cmd-opt b { font-size: 13.5px; font-weight: 600; }
.sx-cmd-opt em {
	grid-column: 1; font-style: normal; font-size: 12px; color: var(--an-text-3);
}
.sx-cmd-opt code {
	grid-row: 1; grid-column: 2;
	font-family: var(--an-font-mono); font-size: 11px; color: var(--an-text-3);
}
.sx-cmd-none { padding: 12px; font-size: 13px; color: var(--an-text-3); }

/* The answer, rendered in the same dropdown the abilities use — because it is
   the same field, answering the same intention, and giving it its own panel
   would put the third entry point back. */
.sx-answer { padding: 14px 15px; }
.sx-answer-k {
	display: block; font-family: var(--an-font-mono); font-size: 10px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--an-text-3);
	margin-bottom: 6px;
}
.sx-answer h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; }
.sx-answer p { margin: 0 0 8px; font-size: 14px; color: var(--an-text-2); }
.sx-answer-n { font-size: 12.5px !important; color: var(--an-text-3) !important; }
.sx-answer-go {
	display: inline-block; font-size: 13px; font-weight: 600;
	color: var(--sx-open); text-decoration: underline; text-underline-offset: 4px;
}
.sx-answer.is-miss h3 { display: none; }

/* ── acuity dial ───────────────────────────────────────────────── */

.sx-acuity { display: flex; align-items: center; gap: 8px; flex: none; padding: 4px 8px; border-radius: var(--an-radius-sm); }
.sx-acuity:hover { background: var(--an-sunk); }

/* A conic sweep, not a bar: it is a proportion of a whole and it should read
   as one. The value is a custom property so nothing here duplicates the
   number that PHP already computed. */
.sx-acuity-dial {
	width: 22px; height: 22px; border-radius: 50%;
	background: conic-gradient(var(--sx-open) calc(var(--pct) * 1%), var(--an-line) 0);
	position: relative;
}
.sx-acuity-dial::after {
	content: ""; position: absolute; inset: 4px;
	border-radius: 50%; background: var(--an-chrome);
}
.sx-acuity-t { display: flex; flex-direction: column; line-height: 1.1; }
.sx-acuity-t b { font-family: var(--an-font-mono); font-size: 12.5px; font-weight: 500; }
.sx-acuity-t b i { font-style: normal; color: var(--an-text-3); }
.sx-acuity-t em {
	font-style: normal; font-size: 9.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--an-text-3);
}

.sx-bar-end { display: flex; align-items: center; gap: var(--an-space-3); margin-left: auto; }

.sx-season { display: flex; align-items: center; gap: 6px; color: var(--an-text-3); }
.sx-season b { font-family: var(--an-font-mono); font-size: 12.5px; font-weight: 500; color: var(--an-text-2); }
.sx-season em { font-style: normal; font-size: 12px; }

/* Display settings, in the rail's footer where they belong. */
.sx-rail-foot .sx-theme {
	display: flex; align-items: center; gap: 2px; margin-bottom: 4px;
	border: 1px solid var(--an-line); border-radius: var(--an-radius-sm);
	background: var(--an-bg); padding: 2px;
}
.sx-rail-foot .sx-theme button {
	flex: 1; border: 0; background: none; cursor: pointer; padding: 7px 0;
	color: var(--an-text-3); display: grid; place-items: center;
	border-radius: 4px;
}
.sx-rail-foot .sx-theme button:hover { color: var(--an-text); }
.sx-rail-foot .sx-theme button[aria-pressed="true"] { color: var(--an-text); background: var(--an-surface); }

/* ══════════════════════════════════════════════════════════════════════
   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 {
	display: inline-block; font-family: var(--an-font-mono);
	font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--an-text-3); margin-bottom: var(--an-space-3);
}

.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; }

/* ── buttons ───────────────────────────────────────────────────── */

.sx-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 18px; border-radius: var(--an-radius-md);
	font-size: 14px; font-weight: 600; font-family: inherit;
	cursor: pointer; border: 1px solid transparent;
	transition: transform var(--an-fast) var(--an-ease), background var(--an-fast) var(--an-ease);
}
.sx-btn:active { transform: translateY(1px); }
.sx-btn--solid { background: var(--an-text); color: var(--an-bg); }
.sx-btn--ghost { border-color: var(--an-line); color: var(--an-text); background: var(--an-surface); }
.sx-btn--ghost:hover { background: var(--an-sunk); }

/* ── 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: 9.5px;
	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: 9px; 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: 11.5px;
	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: 10px;
	letter-spacing: .12em; text-transform: uppercase; color: var(--an-text-3);
}
.sx-conf-n { font-family: var(--an-font-mono); font-size: 10.5px; color: var(--an-text-3); }

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

.sx-sec { max-width: var(--sx-max); margin: 0 auto; padding: var(--an-space-8) 0; }
.sx-sec--gap { border-top: 1px solid var(--an-line); }
.sx-sec-foot { margin-top: var(--an-space-5); }

.sx-head { max-width: 62ch; margin-bottom: var(--an-space-6); }
.sx-h1 { font-size: var(--an-t-h1); line-height: 1.06; letter-spacing: -.022em; font-weight: 600; margin: 0 0 var(--an-space-4); }
.sx-h2 { font-size: var(--an-t-h3); line-height: 1.15; letter-spacing: -.015em; font-weight: 600; margin: 0 0 10px; }
.sx-note, .sx-lede { color: var(--an-text-2); margin: 0; }
.sx-lede { font-size: 17px; max-width: 64ch; }

.sx-surface { max-width: var(--sx-max); margin-inline: auto; }
.sx-surface--narrow { max-width: 860px; }
.sx-surface-head { padding: var(--an-space-8) 0 var(--an-space-6); border-bottom: 1px solid var(--an-line); }

.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; }
.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); }
.sx-sig--gap .sx-sig-metric { color: var(--sx-gap); }
.sx-sig-unit {
	display: block; margin-top: 5px; font-size: 11px;
	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: 11px;
	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: 10px;
	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: 11px; 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: 11px; font-weight: 500; color: var(--an-text-3); }
.sx-band-axis em {
	font-style: normal; font-family: var(--an-font-mono); font-size: 11px;
	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: 10.5px;
	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: 11px;
	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: 11.5px; 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: 10.5px;
	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; }
.sx-table tr.is-off th, .sx-table tr.is-off td { opacity: .55; }

.sx-pill {
	display: inline-block; font-family: var(--an-font-mono); font-size: 10.5px;
	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: 10.5px; 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: 10px; 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: 11px; 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); }

.sx-month-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--an-space-6); padding: 0 4px var(--an-space-5); }
.sx-month-col h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-3); margin: 0 0 10px; }
.sx-month-col h4 span { font-family: var(--an-font-mono); color: var(--an-text-2); }
.sx-month-col ul { list-style: none; margin: 0; padding: 0; columns: 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: 11.5px; color: var(--an-text-3); }
.sx-mini {
	margin-left: auto; font-family: var(--an-font-mono); font-size: 10px;
	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: 10.5px;
	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: 11px; 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: 11.5px; 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: 11px; color: var(--an-text-3); }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */

.sx-foot { border-top: 1px solid var(--an-line); padding: var(--an-space-8) var(--sx-gut) var(--an-space-6); background: var(--an-surface); }
.sx-foot-in { max-width: var(--sx-max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--an-space-8); }
.sx-foot-h { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--an-text-3); margin: 0 0 var(--an-space-4); }

.sx-layers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px var(--an-space-5); }
.sx-layer { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.sx-layer-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px dashed var(--sx-gap); flex: none; }
.sx-layer.is-on .sx-layer-dot { background: var(--sx-open); border: 0; }
.sx-layer-n { font-family: var(--an-font-mono); font-size: 12px; color: var(--an-text-2); }
.sx-layer-s { font-size: 11px; color: var(--an-text-3); margin-left: auto; }
.sx-layer.is-on .sx-layer-s { color: var(--sx-open); }

.sx-foot-note, .sx-foot-claim { font-size: 12.5px; color: var(--an-text-3); max-width: 64ch; margin: var(--an-space-4) 0 0; }
.sx-foot-brand p { font-size: 14px; color: var(--an-text-2); margin: 8px 0 0; }
.sx-foot-list { list-style: none; margin: var(--an-space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.sx-copy { max-width: var(--sx-max); margin: var(--an-space-6) auto 0; font-size: 12px; color: var(--an-text-3); }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════ */

.sx-scrim { display: none; }
.sx-questbar { display: none; }

@media (max-width: 1100px) {
	.sx-twin { grid-template-columns: 1fr; gap: var(--an-space-6); }
	.sx-twin-fig { max-width: 480px; }
	.sx-foot-in { grid-template-columns: 1fr; }
	.sx-month-body { grid-template-columns: 1fr; }
	.sx-month-col ul { columns: 1; }
}

@media (max-width: 900px) {
	.sx-rail {
		transform: translateX(-100%);
		transition: transform var(--an-med) var(--an-ease);
		box-shadow: var(--an-shadow-2);
	}
	body.an-side-open .sx-rail { transform: none; }

	.sx-scrim {
		display: block; position: fixed; inset: 0; z-index: 55;
		background: rgba(0, 0, 0, .45); border: 0;
		opacity: 0; pointer-events: none;
		transition: opacity var(--an-med) var(--an-ease);
	}
	body.an-side-open .sx-scrim { opacity: 1; pointer-events: auto; }

	.sx-frame { margin-left: 0; }
	.sx-burger { display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--an-text); padding: 6px; }
	.sx-mark-t, .sx-season, .sx-acuity-t em, .sx-cmd-kbd { display: none; }
	/* The field is the point of this bar; on a phone it gets the room. */
	.sx-cmd { flex: 1 1 100%; }
	.sx-bar { gap: 8px; padding: 0 12px; }
	.sx-cmd { height: 36px; padding: 0 10px; }
	.sx-cmd input { font-size: 16px; }   /* 16px or iOS zooms the page on focus */

	.sx-questbar {
		display: grid; grid-template-columns: repeat(4, 1fr);
		position: fixed; inset: auto 0 0 0; z-index: 60;
		background: var(--an-chrome); backdrop-filter: blur(12px);
		border-top: 1px solid var(--an-line);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.sx-qb {
		display: flex; flex-direction: column; align-items: center; gap: 3px;
		padding: 9px 4px 8px; color: var(--an-text-3);
		font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
	}
	.sx-qb.is-on { color: var(--sx-open); box-shadow: inset 0 2px 0 var(--sx-open); }

	.sx-canvas { padding-bottom: 92px; }
	.sx-sig { grid-template-columns: 1fr; gap: var(--an-space-3); }
	.sx-sig-num { text-align: left; display: flex; align-items: baseline; gap: 8px; }
	.sx-win-a { grid-template-columns: 1fr auto; }
	.sx-win-g, .sx-win-d { display: none; }
	/* The month figures stay. They are the data; the abbreviations are only
	   the axis. Hiding the numbers to save 14px would leave a chart on a
	   phone with nothing to read off it. */
	.sx-band-axis b { font-size: 9.5px; }
	.sx-band-axis em { font-size: 9.5px; }
	.sx-band-axis li { padding: 3px 0; }
	.sx-month summary { flex-wrap: wrap; }
	.sx-month-n { min-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION

   Every animated property resolves to its FINAL state, not to a paused
   frame. A stopped breathing glyph at 82% opacity would just look broken.
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.sx-mark-glyph { opacity: 1; transform: none; }
}

/* ── Deep Grow: the atmosphere, and only in Deep Grow ──────────── */

:root[data-an-theme="deep"] .sx-spoke-fl { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sx-open) 55%, transparent)); }
:root[data-an-theme="deep"] .sx-band-line { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sx-open) 45%, transparent)); }
:root[data-an-theme="deep"] .sx-mark-glyph { box-shadow: var(--an-bloom); }

@media (prefers-reduced-motion: reduce) {
	:root[data-an-theme="deep"] .sx-spoke-fl,
	:root[data-an-theme="deep"] .sx-band-line { filter: none; }
}

/* ── print: the instrument is a document ───────────────────────── */

@media print {
	.sx-rail, .sx-bar, .sx-questbar, .sx-scrim, .sx-sig-act, .sx-decide-form { display: none !important; }
	.sx-frame { margin-left: 0; }
	.sx-ev[open] .sx-ev-trail, .sx-ev-trail { display: block; }
	.sx-sig, .sx-fac { break-inside: avoid; border: 1px solid #999; }
}

/* ══════════════════════════════════════════════════════════════════════
   AN-CORE'S PALETTE — one entry point, not two.

   an-core mounts a floating "⌕ Search ⌘K" button on every page, including the
   admin. Under this theme the field in the top bar is the entry point for the
   same intention — it filters the same capability manifest and it is always
   visible — so the floating trigger is a second control for one job, which is
   exactly the duplication this redesign is meant to remove.

   The button is hidden; the ⌘K palette itself is untouched and still opens.
   Deliberately not dequeued: the palette is offline-first and good, and
   removing a plugin's script from a theme is the kind of coupling that breaks
   silently the next time that plugin is updated.
   ══════════════════════════════════════════════════════════════════════ */

body.an-os .an-cmdk-trigger { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   TALK — the conversation panel.

   It is docked, not floating. A floating bubble is a widget bolted onto a
   product; this reads as part of the chassis, because it is: the header field
   feeds it, it sits against the same rail, and it is on every page including
   the module routes.

   The transcript is the only place in the whole theme where text arrives
   progressively, and that is deliberate — everywhere else the number was
   already true before you looked at it, so revealing it slowly would be a
   performance. Here you asked a moment ago, so it is not.
   ══════════════════════════════════════════════════════════════════════ */

.sx-talkbtn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 12px; border-radius: var(--an-radius-md);
	border: 1px solid var(--an-line); background: var(--an-surface);
	font: inherit; font-size: 13px; font-weight: 600; color: var(--an-text);
	cursor: pointer;
	transition: background var(--an-fast) var(--an-ease), border-color var(--an-fast) var(--an-ease);
}
.sx-talkbtn:hover { background: var(--an-sunk); border-color: var(--an-text-3); }
.sx-talkbtn .an-i { color: var(--sx-open); }

.sx-talk { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.sx-talk[hidden] { display: none; }

/* The scrim only exists on small screens, where the panel takes the whole
   view. On a desktop the panel is a companion, not a modal — you are meant to
   keep reading the page while it is open, and a scrim would say otherwise. */
.sx-talk-scrim { display: none; }

.sx-talk-panel {
	pointer-events: auto;
	position: absolute; right: var(--sx-gut); bottom: 20px;
	width: min(430px, calc(100vw - 2 * var(--sx-gut)));
	max-height: min(680px, calc(100vh - 100px));
	display: flex; flex-direction: column;
	background: var(--an-surface);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius-xl);
	box-shadow: var(--an-shadow-2);
	overflow: hidden;
	animation: sx-talk-in 220ms var(--sx-ease);
}

@keyframes sx-talk-in {
	from { opacity: 0; transform: translateY(10px) scale(.99); }
	to   { opacity: 1; transform: none; }
}

.sx-talk-head {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px; border-bottom: 1px solid var(--an-line-soft);
	flex: none;
}
.sx-talk-dot {
	width: 9px; height: 9px; border-radius: 50%; flex: none;
	background: var(--sx-open);
	animation: sx-breathe var(--sx-breath) var(--sx-ease) infinite;
}
.sx-talk-id { flex: 1; min-width: 0; }
.sx-talk-id h2 { margin: 0; font-size: 14.5px; font-weight: 600; }
.sx-talk-id p { margin: 1px 0 0; font-size: 11.5px; color: var(--an-text-3); }
.sx-talk-x {
	border: 0; background: none; cursor: pointer; color: var(--an-text-3);
	padding: 4px; display: grid; place-items: center; border-radius: var(--an-radius-sm);
}
.sx-talk-x:hover { background: var(--an-sunk); color: var(--an-text); }

.sx-talk-log {
	flex: 1; overflow-y: auto; overscroll-behavior: contain;
	padding: 16px; display: flex; flex-direction: column; gap: var(--an-space-4);
	scroll-behavior: smooth;
}

/* ── messages ──────────────────────────────────────────────────── */

.sx-msg { font-size: 14.5px; line-height: 1.6; }
.sx-msg p { margin: 0 0 9px; }
.sx-msg p:last-child { margin-bottom: 0; }

.sx-msg--asked {
	align-self: flex-end; max-width: 85%;
	background: var(--an-text); color: var(--an-bg);
	padding: 9px 14px; border-radius: 16px 16px 4px 16px;
	font-size: 14px;
}

.sx-msg--said { color: var(--an-text); }

/* The caret only exists while characters are still arriving. A blinking bar
   left on a finished message is a lie about what the system is doing. */
.sx-msg--said.is-typing p:last-of-type::after {
	content: ""; display: inline-block;
	width: 2px; height: 1.05em; margin-left: 2px;
	vertical-align: -2px; background: var(--sx-open);
	animation: sx-caret .85s steps(1) infinite;
}
@keyframes sx-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.sx-msg--wait { padding: 4px 0; }
.sx-wait { display: inline-flex; gap: 5px; }
.sx-wait i {
	width: 6px; height: 6px; border-radius: 50%; background: var(--an-text-3);
	animation: sx-wait 1.1s ease-in-out infinite;
}
.sx-wait i:nth-child(2) { animation-delay: .15s; }
.sx-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes sx-wait {
	0%, 60%, 100% { opacity: .25; transform: translateY(0); }
	30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Everything after the prose fades in once the prose has landed, so nothing
   shifts under the reader mid-sentence. */
.sx-msg-facts, .sx-msg-links, .sx-msg-chips, .sx-msg-from {
	opacity: 0; transform: translateY(4px);
	transition: opacity 240ms var(--sx-ease), transform 240ms var(--sx-ease);
}
.sx-msg-facts.is-in, .sx-msg-links.is-in, .sx-msg-chips.is-in, .sx-msg-from.is-in {
	opacity: 1; transform: none;
}

.sx-msg-facts {
	margin: 12px 0 0; display: grid; gap: 1px;
	background: var(--an-line-soft); border: 1px solid var(--an-line-soft);
	border-radius: var(--an-radius-md); overflow: hidden;
}
.sx-msg-facts > div {
	display: grid; grid-template-columns: 96px 1fr; gap: 10px;
	background: var(--an-bg); padding: 8px 11px;
}
.sx-msg-facts dt {
	font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--an-text-3); align-self: center;
}
.sx-msg-facts dd { margin: 0; font-family: var(--an-font-mono); font-size: 12.5px; }

.sx-msg-links { margin-top: 12px; display: grid; gap: 6px; }
.sx-card {
	display: block; padding: 10px 12px;
	border: 1px solid var(--an-line); border-radius: var(--an-radius-md);
	background: var(--an-bg);
	transition: border-color var(--an-fast) var(--an-ease), background var(--an-fast) var(--an-ease);
}
.sx-card:hover { border-color: var(--sx-open); background: var(--an-surface); }
.sx-card b { display: block; font-size: 13.5px; font-weight: 600; }
.sx-card em { display: block; font-style: normal; font-size: 12px; color: var(--an-text-3); margin-top: 2px; }
/* A hairline in the signal colours, so a guide, a crop page and a thing you
   can run are told apart without four different card designs. */
.sx-card--guide { box-shadow: inset 2px 0 0 var(--sx-hold); }
.sx-card--crop  { box-shadow: inset 2px 0 0 var(--sx-open); }
.sx-card--do    { box-shadow: inset 2px 0 0 var(--an-accent); }
.sx-card--page  { box-shadow: inset 2px 0 0 var(--an-line); }

.sx-msg-from {
	margin-top: 10px !important;
	font-size: 11.5px; line-height: 1.5; color: var(--an-text-3);
	padding-left: 10px; border-left: 2px solid var(--an-line);
}
.sx-msg-from a { color: var(--an-text-2); text-decoration: underline; text-underline-offset: 3px; }

.sx-msg-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.sx-chip {
	border: 1px solid var(--an-line); background: var(--an-bg);
	border-radius: 999px; padding: 6px 12px; cursor: pointer;
	font: inherit; font-size: 12.5px; color: var(--an-text-2);
	transition: border-color var(--an-fast) var(--an-ease), color var(--an-fast) var(--an-ease);
}
.sx-chip:hover { border-color: var(--sx-open); color: var(--an-text); }

/* ── the composer ──────────────────────────────────────────────── */

.sx-talk-ask {
	flex: none; display: flex; align-items: center; gap: 8px;
	padding: 10px 12px; border-top: 1px solid var(--an-line-soft);
}
.sx-talk-ask input {
	flex: 1; min-width: 0; border: 0; background: none; outline: none;
	font: inherit; font-size: 14.5px; color: var(--an-text); padding: 8px 4px;
}
.sx-talk-send {
	flex: none; width: 34px; height: 34px; border-radius: 50%;
	border: 0; cursor: pointer; display: grid; place-items: center;
	background: var(--an-text); color: var(--an-bg);
}
.sx-talk-send:hover { background: var(--sx-open); }

.sx-talk-foot {
	flex: none; margin: 0; padding: 0 14px 12px;
	font-size: 11px; line-height: 1.45; color: var(--an-text-3);
}

@media (max-width: 700px) {
	.sx-talk-scrim {
		display: block; position: absolute; inset: 0;
		background: rgba(0, 0, 0, .4);
	}
	.sx-talk-panel {
		right: 0; left: 0; bottom: 0;
		width: auto; max-height: 88vh;
		border-radius: var(--an-radius-xl) var(--an-radius-xl) 0 0;
		border-bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.sx-talkbtn span { display: none; }
	.sx-talkbtn { padding: 7px 9px; }
	/* iOS zooms the page when a focused field is under 16px. */
	.sx-talk-ask input { font-size: 16px; }
}

/* The page behind the panel does not scroll away under it on a phone. */
html.sx-talk-on { overflow: hidden; }
@media (min-width: 701px) { html.sx-talk-on { overflow: auto; } }

@media (prefers-reduced-motion: reduce) {
	.sx-talk-panel { animation: none; }
	.sx-msg-facts, .sx-msg-links, .sx-msg-chips, .sx-msg-from { opacity: 1; transform: none; }
	.sx-msg--said.is-typing p:last-of-type::after { display: none; }
}

/* ── /talk/ the page ───────────────────────────────────────────── */

.sx-talkpage-cta { margin: var(--an-space-5) 0 0; }

.sx-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.sx-starter {
	text-align: left; padding: 14px 16px; cursor: pointer;
	border: 1px solid var(--an-line); border-radius: var(--an-radius-lg);
	background: var(--an-surface); font: inherit;
	transition: border-color var(--an-fast) var(--an-ease), transform var(--an-fast) var(--an-ease);
}
.sx-starter:hover { border-color: var(--sx-open); transform: translateY(-1px); }
.sx-starter b { display: block; font-size: 15px; font-weight: 600; color: var(--an-text); }
.sx-starter em { display: block; font-style: normal; font-size: 12.5px; color: var(--an-text-3); margin-top: 4px; }

.sx-tourlist { list-style: none; counter-reset: sx; margin: 0; padding: 0; display: grid; gap: var(--an-space-6); }
.sx-tourlist li { counter-increment: sx; position: relative; padding-left: 44px; max-width: 68ch; }
.sx-tourlist li::before {
	content: counter(sx); position: absolute; left: 0; top: 2px;
	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-tourlist h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.sx-tourlist p { margin: 0 0 8px; color: var(--an-text-2); font-size: 15px; }
.sx-tourlist-go { display: flex; gap: 16px; flex-wrap: wrap; }
.sx-tourlist-go a { color: var(--sx-open); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.sx-plain { max-width: 66ch; }
.sx-plain p { margin: 0 0 12px; font-size: 15.5px; color: var(--an-text-2); }
.sx-plain p:first-child { font-size: 18px; color: var(--an-text); font-weight: 600; }