/* AstroWay widget styles. Theme-overridable via CSS custom properties on .astroway-embed. */

/* The frame's own width, not the page's. Every embed page draws a card at most
   460px wide, so a wrapper at 100% of a block theme's full-width content area
   (1340px at 1440) was a 1340px frame with the card on its left, and it
   overrode the theme's own column width while doing it. */
.astroway-embed {
	--astroway-bg: transparent;
	--astroway-border: 0;
	--astroway-border-radius: 8px;
	--astroway-max-width: 460px;
	--astroway-margin: 1em auto;
	--astroway-min-height: 240px;

	background: var(--astroway-bg);
	border: var(--astroway-border);
	border-radius: var(--astroway-border-radius);
	max-width: min(var(--astroway-max-width), 100%);
	margin: var(--astroway-margin);
	overflow: hidden;
	line-height: 0;
	min-height: var(--astroway-min-height);
}

/* The embed script folds a frame away for a visitor whose quota is spent. */
.astroway-embed[hidden] {
	display: none;
}

/* Height reported by the frame itself, so the reserve is no longer needed. */
.astroway-embed--fit {
	--astroway-min-height: 0;
}

.astroway-embed__iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
	background: transparent;
}

/* The admin-only note is text, not a frame, so it needs the line box back:
   `line-height: 0` on the wrapper exists to kill the gap under an iframe, and
   it collapsed the note's lines onto each other. */

.astroway-embed--unavailable {
	--astroway-min-height: 0;
	--astroway-max-width: var(--wp--style--global--content-size, 100%);

	line-height: 1.5;
	padding: 0.9em 1.1em;
	border: 1px dashed var(--astroway-card-line, rgba(128, 128, 128, 0.35));
	border-radius: 8px;
	font-size: 0.9em;
	opacity: 0.85;
}

.astroway-embed--unavailable p {
	margin: 0;
}

/* Per-widget max-width matches the embed page's intrinsic content width */
.astroway-embed--natal,
.astroway-embed--bodygraph,
.astroway-embed--daily-horoscope {
	--astroway-max-width: 460px;
}

.astroway-embed--moon-phase,
.astroway-embed--tarot-daily {
	--astroway-max-width: 320px;
}

.astroway-embed--mini-chart {
	--astroway-max-width: 300px;
}

@media (max-width: 480px) {
	.astroway-embed {
		--astroway-max-width: 100%;
		margin-inline: 0;
	}
}


/* ── Server-rendered cards ───────────────────────────────────────────────────
   Real text in the page DOM, in the theme's font. No @layer: a layered rule
   loses to every unlayered theme rule, even `button {}`, so every rule here
   hangs off the card root instead. Public API for themes: the --astroway-*
   properties below, set on .astroway-card. */

/* Tokens. Instrument is the default look: lapis and gilt, as on astronomical
   clocks. Neutrals are the theme's own text colour at lower strengths. */
.astroway-card,
.astroway-section {
	--astroway-muted: var(--astroway-card-muted, color-mix(in oklab, currentColor 62%, transparent));
	--astroway-line: var(--astroway-card-line, color-mix(in oklab, currentColor 14%, transparent));
	--astroway-line-strong: color-mix(in oklab, currentColor 30%, transparent);
	--astroway-tint: color-mix(in oklab, currentColor 4%, transparent);
	--astroway-accent: #2b4ea6;
	--astroway-gilt: #86620f;
	--astroway-tens: #b1261d;
	--astroway-harm: var(--astroway-accent);
	--astroway-accent-tint: color-mix(in oklab, var(--astroway-accent) 10%, transparent);
	--astroway-on-accent: #fff;
	--astroway-surface: var(--astroway-card-bg, transparent);
	--astroway-radius: var(--astroway-card-radius, 16px);
	--astroway-radius-inner: 10px;
}

/* The theme's text colour says whether the background is dark: lighter than
   0.6 in OKLCH means a dark page, or a dark section inside a light one, and
   the accents switch to their light forms. No script, no measuring. */
@supports (color: oklch(from currentColor l c h)) {
	.astroway-card,
	.astroway-section {
		--astroway-accent: oklch(from currentColor calc(0.45 + 0.355 * clamp(0, (l - 0.6) * 50, 1)) calc(0.148 - 0.05 * clamp(0, (l - 0.6) * 50, 1)) calc(264.7 + 7.2 * clamp(0, (l - 0.6) * 50, 1)) / 1);
		--astroway-gilt: oklch(from currentColor calc(0.52 + 0.302 * clamp(0, (l - 0.6) * 50, 1)) calc(0.102 + 0.009 * clamp(0, (l - 0.6) * 50, 1)) calc(81.9 + 6.8 * clamp(0, (l - 0.6) * 50, 1)) / 1);
		--astroway-tens: oklch(from currentColor calc(0.498 + 0.284 * clamp(0, (l - 0.6) * 50, 1)) calc(0.177 - 0.05 * clamp(0, (l - 0.6) * 50, 1)) calc(29 - 2.2 * clamp(0, (l - 0.6) * 50, 1)) / 1);
		/* Text on a filled accent: near white on a dark accent, near black on a light one. */
		--astroway-on-accent: oklch(from var(--astroway-accent) calc(0.99 - 0.84 * clamp(0, (l - 0.62) * 50, 1)) 0.01 h);
	}
}

/* Browsers without relative colours: a site can ask for the dark forms. */
.astroway-card[data-astroway-scheme="dark"],
.astroway-section[data-astroway-scheme="dark"] {
	--astroway-accent: #a9bcff;
	--astroway-gilt: #e2c16c;
	--astroway-tens: #ff978c;
	--astroway-on-accent: #10142e;
}

/* Native: no colour of its own. Meaning is carried by stroke and shape. */
.astroway-card[data-astroway-look="native"],
.astroway-section[data-astroway-look="native"] {
	--astroway-accent: currentColor;
	--astroway-gilt: currentColor;
	--astroway-tens: currentColor;
	--astroway-harm: currentColor;
	--astroway-accent-tint: color-mix(in oklab, currentColor 8%, transparent);
}

/* Night sky: its own surface, the same on any site. Only the card takes it;
   a section's tab strip sits on the page, not on the night. */
.astroway-card[data-astroway-look="night"] {
	--astroway-muted: rgba(235, 232, 255, 0.66);
	--astroway-line: rgba(232, 203, 132, 0.2);
	--astroway-line-strong: rgba(232, 203, 132, 0.42);
	--astroway-tint: rgba(255, 255, 255, 0.035);
	--astroway-accent: #e8c878;
	--astroway-on-accent: #10142e;
	--astroway-gilt: #e8c878;
	--astroway-harm: #8fd4ff;
	--astroway-tens: #ff9d8e;
	--astroway-accent-tint: rgba(232, 200, 120, 0.14);
	/* Stars only in the margin: inside the text one reads as a full stop. */
	--astroway-surface:
		radial-gradient(1.2px 1.2px at 1.6% 14%, rgba(255, 255, 255, 0.7), transparent 60%),
		radial-gradient(1px 1px at 98.4% 7%, rgba(255, 255, 255, 0.55), transparent 60%),
		radial-gradient(1.4px 1.4px at 98.2% 58%, rgba(255, 236, 190, 0.65), transparent 60%),
		radial-gradient(1px 1px at 1.4% 71%, rgba(255, 255, 255, 0.45), transparent 60%),
		radial-gradient(1px 1px at 61% 0.9%, rgba(255, 255, 255, 0.45), transparent 60%),
		radial-gradient(1.2px 1.2px at 27% 99.2%, rgba(255, 255, 255, 0.5), transparent 60%),
		linear-gradient(160deg, #141a46 0%, #0d1130 55%, #0a0d24 100%);

	color: #ebe8ff;
	border-color: rgba(232, 203, 132, 0.3);
}

/* Old engines without color-mix: flat greys rather than invisible lines. */
@supports not (color: color-mix(in srgb, currentColor 50%, transparent)) {
	.astroway-card,
	.astroway-section {
		--astroway-muted: inherit;
		--astroway-line: rgba(128, 128, 128, 0.32);
		--astroway-line-strong: rgba(128, 128, 128, 0.5);
		--astroway-tint: rgba(128, 128, 128, 0.08);
		--astroway-accent-tint: rgba(43, 78, 166, 0.1);
	}
}

/* ── Base ── */

.astroway-card {
	container-type: inline-size;
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	/* Never wider than the theme's content column. */
	max-inline-size: min(var(--astroway-card-max-width, 44em), var(--wp--style--global--content-size, 100%), 100%);
	margin: var(--astroway-card-margin, 1.5em 0);
	padding: var(--astroway-card-padding, clamp(16px, 4%, 26px));
	background: var(--astroway-surface);
	border: 1px solid var(--astroway-line);
	border-radius: var(--astroway-radius);
	line-height: 1.55;
	text-align: start;
	overflow-wrap: break-word;
	/* Core Columns sets word-break: break-word, which splits words anywhere. */
	word-break: normal;
}

.astroway-card *,
.astroway-card *::before,
.astroway-card *::after {
	box-sizing: border-box;
}

.astroway-card :focus-visible {
	outline: 2px solid var(--astroway-accent);
	outline-offset: 2px;
}

/* Themes outline every :focus, a mouse click included (Twenty Twenty-Five
   does); the ring is for the keyboard. */
.astroway-card :focus:not(:focus-visible),
.astroway-section :focus:not(:focus-visible) {
	outline: none;
}

.astroway-sr {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Glyphs are SVG, never Unicode: iOS turns the zodiac into emoji. The box
   is 1.24em tall with the baseline where the text's is, see tools/glyphs. */
.astroway-card .astroway-glyph {
	display: inline-block;
	inline-size: auto;
	block-size: 1.24em;
	max-inline-size: none;
	vertical-align: -0.263em;
	fill: currentColor;
	overflow: visible;
}

.astroway-card .astroway-defs {
	position: absolute;
	inline-size: 0;
	block-size: 0;
	overflow: hidden;
}

/* Theme button styles leak into anything that is a <button> or an <a>;
   everything a theme usually sets is reset for the controls here. */
.astroway-card :is(.astroway-tabs__tab, .astroway-chip, .astroway-iconbtn, .astroway-signs__sign, .astroway-button, .astroway-field__input),
.astroway-section :is(.astroway-tabs__tab) {
	appearance: none;
	margin: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	min-inline-size: 0;
	inline-size: auto;
	-webkit-tap-highlight-color: transparent;
}

/* ── Header: medallion, title, meta, actions ── */

/* Every card closes its header with the same rule. Three of them ran the
   heading straight into the content while their neighbours had a line, and
   side by side that read as two different components. */
.astroway-card .astroway-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0;
	padding: 0 0 12px;
	border: 0;
	border-block-end: 1px solid var(--astroway-line);
}

/* The title keeps at least 9em; below that the arrows move under it. */
.astroway-card .astroway-card__heading {
	flex: 1 1 9em;
	min-inline-size: 0;
}

.astroway-card .astroway-card__title {
	margin: 0;
	padding: 0;
	font-size: 1.14em;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	text-wrap: balance;
	color: inherit;
}

/* A row, not a paragraph: the meta line carries a badge beside the date on
   the retrograde card, and inline boxes with their own line-height overlapped
   the time when the line wrapped. */
.astroway-card .astroway-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 1.1em;
	margin: 1px 0 0;
	font-size: 0.86em;
	color: var(--astroway-muted);
	overflow-x: clip;
}

/* The dot hangs into the gap before the date; when the date wraps to a line of
   its own, the dot lands left of the meta box and is clipped, not orphaned. */
.astroway-card .astroway-card__when {
	margin-inline-start: -1.1em;
}

.astroway-card .astroway-card__when > [aria-hidden] {
	display: inline-block;
	inline-size: 1.1em;
	text-align: center;
}

.astroway-card .astroway-card__meta > .astroway-badge {
	margin-inline-start: 0;
}

.astroway-card .astroway-card__actions {
	display: flex;
	gap: 4px;
	flex: none;
	margin-inline-start: auto;
}

.astroway-card .astroway-medal {
	flex: none;
	inline-size: 50px;
	block-size: 50px;
	color: var(--astroway-accent);
}

.astroway-card .astroway-medal svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
}

@container (max-width: 340px) {
	.astroway-card .astroway-medal {
		inline-size: 40px;
		block-size: 40px;
	}

	/* The arrows drop to their own row rather than the medallion vanishing:
	   hiding it left the first card on a phone looking like a cut-down version
	   of the nine below it. */
	.astroway-card .astroway-card__header:has(> .astroway-card__actions) .astroway-card__heading {
		flex: 1 1 60%;
	}

	.astroway-card .astroway-card__header:has(> .astroway-card__actions) .astroway-card__actions {
		margin-inline-start: auto;
	}
}

.astroway-medal__ring {
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
}

.astroway-medal__ring2,
.astroway-medal__tick {
	fill: none;
	stroke: var(--astroway-line-strong);
	stroke-width: 1;
}

.astroway-medal__glyph {
	fill: currentColor;
}

/* ── Icon button (date navigation) ── */

.astroway-card .astroway-iconbtn {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--astroway-line);
	border-radius: var(--astroway-radius-inner);
}

.astroway-card .astroway-iconbtn:hover {
	background: var(--astroway-tint);
}

.astroway-card .astroway-iconbtn.is-disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

.astroway-card .astroway-iconbtn svg {
	inline-size: 16px;
	block-size: 16px;
}

.astroway-card .astroway-iconbtn:dir(rtl) svg {
	transform: scaleX(-1);
}

/* ── Facts: the big three, or label and value rows ── */

.astroway-card .astroway-facts {
	display: grid;
	margin: 16px 0 0;
	padding: 0;
}

.astroway-card .astroway-facts dt {
	margin: 0;
	font-size: 0.78em;
	font-weight: 400;
	color: var(--astroway-muted);
}

.astroway-card .astroway-facts dd {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
}

.astroway-card .astroway-facts .astroway-glyph {
	color: var(--astroway-accent);
}

.astroway-facts__sub {
	font-size: 0.8em;
	font-weight: 400;
	color: var(--astroway-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.astroway-card .astroway-facts--trio {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-block: 1px solid var(--astroway-line);
}

/* The header already rules the line above; a second one 16px under it reads as a gap. */
.astroway-card .astroway-card__header + .astroway-facts--trio {
	border-block-start: 0;
}

/* The trio's own rule already closes it; the heading that follows adds none. */
.astroway-card > .astroway-facts--trio + .astroway-card__subtitle {
	border-block-start: 0;
}

/* Without the time there is no Ascendant: two halves, not two thirds and a gap. */
.astroway-card .astroway-facts--trio:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The same inset on both sides of every cell: with padding only after the
   divider the three texts sat at uneven steps across the row. */
.astroway-facts--trio .astroway-facts__item {
	min-inline-size: 0;
	padding-block: 10px 11px;
	padding-inline: 0 12px;
}

.astroway-facts--trio .astroway-facts__item + .astroway-facts__item {
	border-inline-start: 1px solid var(--astroway-line);
	padding-inline-start: 12px;
}

/* The glyph belongs to the word it marks: on a narrow cell it dropped to a
   line of its own in one column and stayed inline in the other two, which
   made the middle cell a line taller than its neighbours. */
.astroway-card .astroway-facts--trio dd > .astroway-glyph {
	flex: none;
}

.astroway-card .astroway-facts--trio dd {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.28em;
	font-size: 0.96em;
}

/* The degree on a line of its own, always: three equal cells, one baseline. */
.astroway-facts--trio .astroway-facts__sub {
	flex-basis: 100%;
}

/* The label takes what it needs up to two fifths, and the value keeps the
   rest: with `auto` a two-word label squeezed "October 24, 2026" into two
   lines and left the year alone on the second. */
.astroway-card .astroway-facts--list {
	grid-template-columns: minmax(min-content, 0.4fr) minmax(0, 1fr);
	gap: 0;
}

/* The rule belongs to the row, not to its two cells: a muted label would
   draw its half of the line in its own, lighter colour. */
.astroway-card .astroway-facts--list .astroway-facts__item {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	border-block-end: 1px solid var(--astroway-line);
}

.astroway-card .astroway-facts--list .astroway-facts__item:last-child {
	border-block-end: 0;
}

.astroway-card .astroway-facts--list dt,
.astroway-card .astroway-facts--list dd {
	padding-block: 7px;
}

.astroway-card .astroway-facts--list dt {
	padding-inline-end: 16px;
	font-size: 0.9em;
}

.astroway-card .astroway-facts--list dd {
	font-weight: 500;
	text-align: end;
	font-variant-numeric: tabular-nums;
}

@container (max-width: 280px) {
	.astroway-card .astroway-facts--list {
		grid-template-columns: 1fr;
	}

	.astroway-card .astroway-facts--list dt {
		padding-block-end: 0;
	}

	.astroway-card .astroway-facts--list dd {
		padding-block-start: 0;
		text-align: start;
	}

}

/* Three narrow columns leave "Ascendant" no room: the trio becomes rows. In em,
   because the word grows with the theme's type while pixels stay put. */
@container (max-width: 21.5em) {
	.astroway-card .astroway-facts--trio,
	.astroway-card .astroway-facts--trio:has(> :nth-child(2):last-child) {
		grid-template-columns: 1fr;
	}

	.astroway-facts--trio .astroway-facts__item {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		padding-block: 8px;
		padding-inline-end: 0;
	}

	.astroway-facts--trio .astroway-facts__item + .astroway-facts__item {
		border-inline-start: 0;
		border-block-start: 1px solid var(--astroway-line);
		padding-inline-start: 0;
	}

	.astroway-card .astroway-facts--trio dd {
		justify-content: flex-end;
		text-align: end;
	}
}

/* ── Tabs. Without JS every panel shows, under its own heading. ── */

.astroway-card .astroway-tabs {
	margin-block-start: 14px;
}

.astroway-tabs__list {
	display: none;
	gap: 2px;
	border-block-end: 1px solid var(--astroway-line);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.astroway-tabs__list::-webkit-scrollbar {
	display: none;
}

.astroway-js .astroway-tabs__list {
	display: flex;
}

.astroway-card .astroway-tabs__tab,
.astroway-section .astroway-tabs__tab {
	flex: none;
	min-block-size: 44px;
	padding: 9px 12px;
	border: 0;
	border-block-end: 2px solid transparent;
	border-radius: 0;
	margin-block-end: -1px;
	font-size: 0.94em;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--astroway-muted);
}

.astroway-card .astroway-tabs__tab:hover,
.astroway-section .astroway-tabs__tab:hover {
	color: inherit;
}

.astroway-card .astroway-tabs__tab[aria-selected="true"],
.astroway-section .astroway-tabs__tab[aria-selected="true"] {
	color: inherit;
	font-weight: 600;
	border-block-end-color: var(--astroway-accent);
}

.astroway-card .astroway-tabs__tab:focus-visible,
.astroway-section .astroway-tabs__tab:focus-visible {
	outline: 2px solid var(--astroway-accent);
	outline-offset: -3px;
	border-radius: 8px;
}

/* A narrow card keeps its tabs on one row, as the mockup has it: wrapped, they
   took three rows before any content. What does not fit fades at the edge the
   way a table does, so the tab past it is not simply invisible. */
@container (max-width: 420px) {
	.astroway-card .astroway-tabs__tab {
		padding-inline: 10px;
	}
}

.astroway-tabs__list[data-astroway-more="end"] {
	mask-image: linear-gradient(to left, transparent, #000 2.5em);
}

.astroway-tabs__list[data-astroway-more="start"] {
	mask-image: linear-gradient(to right, transparent, #000 2.5em);
}

.astroway-tabs__list[data-astroway-more="both"] {
	mask-image: linear-gradient(to right, transparent, #000 2.5em, #000 calc(100% - 2.5em), transparent);
}

.astroway-tabs__list[data-astroway-more="end"]:dir(rtl) {
	mask-image: linear-gradient(to right, transparent, #000 2.5em);
}

.astroway-tabs__list[data-astroway-more="start"]:dir(rtl) {
	mask-image: linear-gradient(to left, transparent, #000 2.5em);
}

.astroway-tabs__count {
	margin-inline-start: 0.3em;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* Muted only beside a selected label: an unselected tab is muted already. */
[aria-selected="true"] > .astroway-tabs__count {
	color: var(--astroway-muted);
}

.astroway-card .astroway-tabs__panel {
	padding-block-start: 14px;
}

.astroway-card .astroway-tabs__heading {
	margin: 18px 0 4px;
	font-size: 0.98em;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.astroway-js .astroway-tabs__heading {
	display: none;
}

.astroway-js .astroway-tabs__panel:not(.is-selected) {
	display: none;
}

/* ── Section inside a card ── */

.astroway-card .astroway-card__section {
	margin-block-start: 18px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--astroway-line);
}

/* The header already draws the line; a second one right under it reads as a gap. */
.astroway-card .astroway-chinese ~ .astroway-facts--list + .astroway-card__section {
	border-block-start: 0;
	padding-block-start: 0;
}

.astroway-card .astroway-card__header + .astroway-card__section {
	margin-block-start: 14px;
	padding-block-start: 0;
	border-block-start: 0;
}

.astroway-card .astroway-card__subtitle {
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	font-size: 0.98em;
	font-weight: 650;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
}

.astroway-card .astroway-card__intro {
	margin: 0 0 10px;
	font-size: 0.88em;
	color: var(--astroway-muted);
}

/* ── Accordion: one open at a time via the name attribute ── */

.astroway-card .astroway-acc {
	margin-block-start: 10px;
	border-block-start: 1px solid var(--astroway-line);
}

.astroway-card .astroway-acc__item[hidden] {
	display: none;
}

.astroway-card .astroway-acc__item {
	margin: 0;
	padding: 0;
	border: 0;
	border-block-end: 1px solid var(--astroway-line);
}

.astroway-card .astroway-acc__summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 48px;
	padding: 6px 2px;
	list-style: none;
	cursor: pointer;
	font-weight: 400;
}

.astroway-card .astroway-acc__summary::-webkit-details-marker {
	display: none;
}

.astroway-card .astroway-acc__summary::marker {
	content: "";
}

.astroway-acc__icon {
	inline-size: 1.3em;
	text-align: center;
	color: var(--astroway-accent);
	flex: none;
}

.astroway-acc__title {
	/* The title takes the free width, so the chevron keeps one column at the edge. */
	flex: 1 1 auto;
	min-inline-size: 0;
	font-weight: 500;
}

.astroway-acc__meta {
	margin-inline-start: auto;
	white-space: nowrap;
	font-size: 0.84em;
	color: var(--astroway-muted);
	font-variant-numeric: tabular-nums;
}

.astroway-card .astroway-acc__chevron {
	flex: none;
	inline-size: 14px;
	block-size: 14px;
	color: var(--astroway-muted);
	transition: transform 0.2s;
}

.astroway-acc__item[open] > .astroway-acc__summary .astroway-acc__chevron {
	transform: rotate(180deg);
}

.astroway-card .astroway-acc__body {
	padding: 0 2px 12px;
}

/* A long reading: the body starts right under its row and ends with room before
   the next one; its headings sit below the row title, and list and prose share a size. */
.astroway-card .astroway-acc__body > .astroway-prose {
	padding-block-end: 12px;
}

.astroway-card .astroway-acc__body > .astroway-prose > :first-child {
	margin-block-start: 0;
}

.astroway-card .astroway-acc__body .astroway-prose :is(h4, h5) {
	font-size: 0.9em;
	color: var(--astroway-muted);
}

.astroway-card .astroway-acc__body .astroway-prose ul > li {
	font-size: inherit;
}

/* ── Aspect rows and marks. Harmony is a circle and a solid line, tension a
   square and a dashed one: readable without colour. ── */

.astroway-card .astroway-aspects {
	margin: 0;
	padding: 0;
	list-style: none;
}

.astroway-card .astroway-aspects li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 6px 2px;
	padding-inline-start: 34px;
	font-size: 0.9em;
}

.astroway-card .astroway-aspects li[hidden] {
	display: none;
}

@container (max-width: 340px) {
	.astroway-card .astroway-aspects li {
		padding-inline-start: 2px;
	}
}

.astroway-aspects__orb {
	color: var(--astroway-muted);
	font-variant-numeric: tabular-nums;
	font-size: 0.92em;
	text-align: end;
}

.astroway-card .astroway-aspects__note {
	display: block;
	margin-block-start: 2px;
	font-size: 0.9em;
	color: var(--astroway-muted);
}

.astroway-mark {
	display: inline-grid;
	place-items: center;
	inline-size: 1.5em;
	block-size: 1.5em;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--astroway-line-strong);
	font-size: 0.95em;
	line-height: 1;
}

.astroway-mark--h {
	color: var(--astroway-harm);
	box-shadow: inset 0 0 0 1px var(--astroway-harm);
}

.astroway-mark--t {
	color: var(--astroway-tens);
	box-shadow: inset 0 0 0 1px var(--astroway-tens);
	border-radius: 3px;
}

.astroway-card .astroway-mark .astroway-glyph {
	block-size: 1.1em;
	vertical-align: 0;
}

/* ── Chips: filters. They only work with JS, so they only show with it. ── */

.astroway-card .astroway-chips {
	display: none;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
}

.astroway-js .astroway-card .astroway-chips {
	display: flex;
}

.astroway-card .astroway-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 36px;
	padding: 5px 12px;
	border: 1px solid var(--astroway-line);
	border-radius: 999px;
	font-size: 0.82em;
	line-height: 1.2;
}

.astroway-card .astroway-chip[aria-pressed="true"] {
	background: var(--astroway-accent-tint);
	border-color: var(--astroway-accent);
	font-weight: 600;
}

.astroway-chip__count {
	color: var(--astroway-muted);
	font-variant-numeric: tabular-nums;
}

.astroway-card .astroway-line {
	inline-size: 22px;
	block-size: 8px;
	flex: none;
}

/* ── Legend ── */

.astroway-card .astroway-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 16px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8em;
	color: var(--astroway-muted);
}

.astroway-card .astroway-legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

/* Which chart a ring of the bi-wheel holds. The words carry it: in the night
   and native looks the two planet colours are the same. */
.astroway-legend__ring {
	flex: none;
	align-self: flex-start;
	margin-block-start: 0.35em;
	inline-size: 0.7em;
	block-size: 0.7em;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.astroway-legend__ring--out {
	background: var(--astroway-gilt);
	box-shadow: none;
}

.astroway-line--h {
	stroke: var(--astroway-harm);
	stroke-width: 1.6;
}

.astroway-line--t {
	stroke: var(--astroway-tens);
	stroke-width: 1.6;
	stroke-dasharray: 5 3.5;
}

/* ── Badge ── */

.astroway-badge {
	display: inline;
	margin-inline-start: 6px;
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1.2;
	color: var(--astroway-accent);
	white-space: nowrap;
}

.astroway-badge--tens {
	color: var(--astroway-tens);
}

.astroway-badge--muted {
	color: var(--astroway-muted);
	font-weight: 500;
}

/* ── Table. A scroller when it cannot fit; JS marks the side with more. ── */

.astroway-card .astroway-scroll {
	max-inline-size: 100%;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.astroway-scroll[data-astroway-more="end"] {
	mask-image: linear-gradient(to left, transparent, #000 2.5em);
}

.astroway-scroll[data-astroway-more="start"] {
	mask-image: linear-gradient(to right, transparent, #000 2.5em);
}

.astroway-scroll[data-astroway-more="both"] {
	mask-image: linear-gradient(to right, transparent, #000 2.5em, #000 calc(100% - 2.5em), transparent);
}

.astroway-scroll[data-astroway-more="end"]:dir(rtl) {
	mask-image: linear-gradient(to right, transparent, #000 2.5em);
}

.astroway-scroll[data-astroway-more="start"]:dir(rtl) {
	mask-image: linear-gradient(to left, transparent, #000 2.5em);
}

.astroway-card .astroway-table {
	inline-size: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 0.9em;
	font-family: inherit;
	color: inherit;
	font-variant-numeric: tabular-nums;
	background: none;
}

.astroway-card .astroway-table caption {
	margin: 0;
	padding: 0 0 6px;
	font-size: 0.86em;
	font-weight: 400;
	text-align: start;
	color: var(--astroway-muted);
	caption-side: top;
}

.astroway-card .astroway-table :is(th, td) {
	padding: 8px 8px 8px 0;
	padding-inline: 0 8px;
	border: 0;
	border-block-end: 1px solid var(--astroway-line);
	background: none;
	font-size: 1em;
	font-weight: 400;
	text-align: start;
	vertical-align: baseline;
	color: inherit;
	/* The card's break-word lets a column shrink below its longest word; a table wraps at spaces. */
	overflow-wrap: normal;
}

.astroway-card .astroway-table thead th {
	padding-block: 6px;
	font-size: 0.9em;
	font-weight: 500;
	color: var(--astroway-muted);
	white-space: nowrap;
}

.astroway-card .astroway-table tr {
	background: none;
}

.astroway-card .astroway-table :is(th, td):last-child {
	padding-inline-end: 0;
}

.astroway-card .astroway-table .astroway-num {
	text-align: end;
}

/* One rule per row, and none under the last: the section below brings its own. */
.astroway-card .astroway-table tbody tr:last-child > * {
	border-block-end: 0;
}

.astroway-card .astroway-table .astroway-glyph {
	color: var(--astroway-accent);
}

.astroway-card .astroway-table tr.is-current > * {
	background: var(--astroway-accent-tint);
	font-weight: 600;
}

.astroway-card .astroway-table tr.is-current > :first-child {
	padding-inline-start: 6px;
}

.astroway-card .astroway-table tr.is-angle th {
	color: var(--astroway-gilt);
	font-weight: 700;
}

.astroway-nowrap,
.astroway-named {
	white-space: nowrap;
}

/* Retrograde: the glyph in the tension colour, its word for screen readers. */
.astroway-card .astroway-rx {
	margin-inline-start: 0.2em;
	color: var(--astroway-tens);
	font-size: 0.86em;
}

/* A stacking table turns each row into a small card on a narrow column. The
   column names move into each cell, so the head row goes: `overflow` does not
   apply to a row group, and a visually hidden one still painted over row one.

   Each cell is its own label-and-value line. The row used to be a two column
   grid, which works for two cells and collapses for three: the second column
   fell to min-content and, with break-word on the card, printed one letter per
   line. The retrograde board is eight rows of three cells, and on a phone it
   ran to four screens of ladders. */
@container (max-width: 400px) {
	.astroway-card .astroway-table--stack,
	.astroway-card .astroway-table--stack tbody {
		display: block;
	}

	.astroway-card .astroway-table--stack thead {
		display: none;
	}

	.astroway-card .astroway-table--stack tr {
		display: block;
		padding-block: 8px;
		border-block-end: 1px solid var(--astroway-line);
	}

	.astroway-card .astroway-table--stack :is(th, td) {
		padding: 0;
		border: 0;
		text-align: start;
	}

	.astroway-card .astroway-table--stack tbody th {
		display: block;
		margin-block-end: 2px;
		font-weight: 600;
	}

	.astroway-card .astroway-table--stack td {
		display: grid;
		grid-template-columns: minmax(0, 11ch) minmax(0, 1fr);
		gap: 0 10px;
		padding-block: 1px;
	}

	/* A cell with nothing in it says nothing: the empty motion column of a
	   placement should not print its own name eight times down the card. */
	.astroway-card .astroway-table--stack td:empty {
		display: none;
	}

	.astroway-card .astroway-table--stack td::before {
		content: attr(data-label);
		color: var(--astroway-muted);
		font-size: 0.9em;
	}

	/* The row is one block here, so the mark belongs to the row and not to
	   each cell: painting the cells left white gaps between them. */
	.astroway-card .astroway-table--stack tr.is-current {
		padding-inline: 6px;
		background: var(--astroway-accent-tint);
	}

	.astroway-card .astroway-table--stack tr.is-current > * {
		background: none;
	}
}

/* ── Matrix: elements by modality ── */

.astroway-card .astroway-matrix__word {
	display: inline-block;
	margin-inline: 1px;
	font-size: 0.88em;
	font-weight: 600;
	color: var(--astroway-muted);
}


.astroway-card .astroway-matrix {
	inline-size: 100%;
	min-inline-size: 280px;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 0.86em;
	font-family: inherit;
	color: inherit;
	background: none;
}

.astroway-card .astroway-matrix th {
	padding: 6px 2px;
	border: 0;
	background: none;
	font-size: 0.9em;
	font-weight: 500;
	text-align: center;
	color: var(--astroway-muted);
	/* A fixed layout squeezes the columns; a word never breaks inside. */
	overflow-wrap: normal;
}

.astroway-card .astroway-matrix thead td {
	inline-size: 23%;
}

.astroway-card .astroway-matrix thead th:last-child {
	inline-size: 17%;
}

.astroway-card .astroway-matrix th[scope="row"] {
	padding-inline-start: 0;
	text-align: start;
}

@container (max-width: 360px) {
	.astroway-card .astroway-matrix th {
		font-size: 0.78em;
	}
}

.astroway-card .astroway-matrix thead td {
	border: 0;
}

.astroway-card .astroway-matrix td {
	block-size: 38px;
	padding: 6px 4px;
	border: 1px solid var(--astroway-line);
	background: none;
	text-align: center;
	color: inherit;
}

.astroway-card .astroway-matrix tbody td {
	font-size: 1.12em;
}

.astroway-card .astroway-matrix td .astroway-glyph + .astroway-glyph {
	margin-inline-start: 0.12em;
}

.astroway-card .astroway-matrix .astroway-matrix__total {
	font-size: 1em;
}

/* The row header is muted already; muting the total again would compound. */
.astroway-card .astroway-matrix__n {
	display: none;
	margin-inline-start: 0.2em;
	font-variant-numeric: tabular-nums;
}

.astroway-card .astroway-matrix__corner {
	display: none;
	font-size: 0.8em;
	color: var(--astroway-muted);
}

/* Narrow: the totals column goes and each row names its own total. */
@container (max-width: 320px) {
	.astroway-card .astroway-matrix {
		min-inline-size: 0;
	}

	.astroway-card .astroway-matrix :is(thead th:last-child, .astroway-matrix__total) {
		display: none;
	}

	.astroway-card .astroway-matrix__n {
		display: inline;
	}

	.astroway-card .astroway-matrix__corner {
		display: inline;
	}

	.astroway-card .astroway-matrix th[scope="row"] {
		inline-size: 30%;
	}
}

.astroway-card .astroway-matrix .astroway-matrix__total {
	font-variant-numeric: tabular-nums;
	color: var(--astroway-muted);
}

.astroway-card .astroway-matrix .is-dominant {
	color: inherit;
	font-weight: 700;
}

.astroway-card .astroway-matrix td.is-dominant {
	background: var(--astroway-accent-tint);
}

/* ── Aspect grid: the staircase, planets along both edges ── */

.astroway-card .astroway-grid {
	margin: 4px auto 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font-size: 1em;
	color: inherit;
}

.astroway-card .astroway-grid :is(th, td) {
	inline-size: 30px;
	block-size: 30px;
	min-inline-size: 30px;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	vertical-align: middle;
	font-weight: 400;
	color: inherit;
}

.astroway-card .astroway-grid td {
	border: 1px solid var(--astroway-line);
}

.astroway-card .astroway-grid tr:last-child td {
	border: 0;
}

.astroway-card .astroway-grid th .astroway-glyph {
	color: var(--astroway-accent);
}

.astroway-card .astroway-grid .astroway-mark {
	inline-size: 1.35em;
	block-size: 1.35em;
	font-size: 0.9em;
}

/* ── Score: one figure, its meaning, and the same figure as a bar ── */

.astroway-card .astroway-score {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 4px 16px;
	margin: 16px 0 0;
}

.astroway-card .astroway-score__value {
	margin: 0;
	font-size: 2.6em;
	font-weight: 700;
	line-height: 1.15;
	color: var(--astroway-accent);
	font-variant-numeric: tabular-nums;
}

.astroway-score__value span {
	font-size: 0.45em;
	font-weight: 600;
	margin-inline-start: 0.08em;
}

.astroway-card .astroway-score__label {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
}

.astroway-card .astroway-score .astroway-meter {
	grid-column: 1 / -1;
	margin-block-start: 8px;
}

@container (max-width: 280px) {
	.astroway-card .astroway-score {
		grid-template-columns: 1fr;
	}
}

.astroway-meter {
	display: block;
	block-size: 6px;
	border-radius: 999px;
	background: var(--astroway-line);
	overflow: hidden;
}

.astroway-meter > span {
	display: block;
	block-size: 100%;
	border-radius: inherit;
	background: var(--astroway-accent);
}

/* A quieter note beside a subtitle: whose birth moment a block is about. */
.astroway-card .astroway-card__aside {
	margin-inline-start: 0.4em;
	font-size: 0.85em;
	font-weight: 400;
	color: var(--astroway-muted);
}

/* A score in its ring beside the word for it. */
.astroway-card .astroway-verdict {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 16px 0 0;
}

.astroway-card .astroway-verdict p {
	margin: 0;
}

.astroway-card .astroway-verdict__word {
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25;
}

.astroway-card .astroway-verdict__note {
	margin-block-start: 2px;
	color: var(--astroway-muted);
	font-size: 0.9em;
}

.astroway-card .astroway-ring {
	position: relative;
	inline-size: 96px;
	block-size: 96px;
	flex: none;
}

.astroway-card .astroway-ring svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	transform: rotate(-90deg);
}

.astroway-ring__track {
	fill: none;
	stroke: var(--astroway-line);
	stroke-width: 6;
}

.astroway-ring__bar {
	fill: none;
	stroke: var(--astroway-accent);
	stroke-width: 6;
	stroke-linecap: round;
}

.astroway-card .astroway-ring__value {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	font-size: 1.6em;
	font-weight: 700;
	color: var(--astroway-accent);
	font-variant-numeric: tabular-nums;
}

/* Rows of bars: compatibility by sphere. */
.astroway-card .astroway-bars {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(40px, 1fr) auto;
	align-items: center;
	gap: 10px 12px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.92em;
}

.astroway-card .astroway-bars li {
	display: contents;
}

.astroway-bars__value {
	font-variant-numeric: tabular-nums;
	color: var(--astroway-muted);
	text-align: end;
}

/* ── Timeline: dates on a rail, the past quieter, today marked ── */

.astroway-card .astroway-timeline {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.astroway-card .astroway-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0 0 14px;
}

/* The rail and the dot share one centre, 76.5px from the start edge. */
.astroway-timeline__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 76px;
	inset-block: calc(0.45em + 13px) -0.1em;
	inline-size: 1px;
	background: var(--astroway-line);
}

.astroway-timeline__item:last-child::before {
	display: none;
}

.astroway-card .astroway-timeline__date {
	font-size: 0.84em;
	color: var(--astroway-muted);
	font-variant-numeric: tabular-nums;
	text-align: end;
	padding-block-start: 0.1em;
}

.astroway-card .astroway-timeline__date b {
	display: block;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.1;
	color: inherit;
}

.astroway-card .astroway-timeline__body {
	position: relative;
	padding-inline-start: 13px;
	font-size: 0.93em;
}

.astroway-timeline__body::before {
	content: "";
	position: absolute;
	inset-inline-start: -8px;
	inset-block-start: 0.45em;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--astroway-accent);
}

.astroway-card .astroway-timeline__title {
	margin: 0;
	font-weight: 600;
}

.astroway-card .astroway-timeline__title .astroway-glyph {
	color: var(--astroway-accent);
}

.astroway-card .astroway-timeline__body p {
	margin: 0;
}

/* The past is quieter by colour, not opacity: opacity on top of the muted
   date took it under AA contrast. Once, on the body: muted is a share of the
   current colour, so muting a child of a muted element compounds it. */
.astroway-card .astroway-timeline__item.is-past .astroway-timeline__body {
	color: var(--astroway-muted);
}

.astroway-card .astroway-timeline__item.is-past .astroway-glyph {
	color: inherit;
}

.astroway-timeline__item.is-past .astroway-timeline__body::before {
	box-shadow: inset 0 0 0 1.5px var(--astroway-line-strong);
}

.astroway-timeline__item.is-now .astroway-timeline__body::before {
	background: var(--astroway-accent);
}

/* ── Natal wheel. Sizes are wheel units: the SVG scales as a whole. ── */

.astroway-card .astroway-wheel {
	position: relative;
	max-inline-size: 520px;
	margin: 0 auto;
	padding: 0;
}

.astroway-card .astroway-wheel__svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-inline-size: none;
	overflow: visible;
}

.astroway-wheel__band {
	fill: var(--astroway-tint);
}

.astroway-wheel__circle,
.astroway-wheel__ticks {
	fill: none;
	stroke: var(--astroway-line-strong);
	stroke-width: 1;
}

.astroway-wheel__ticks {
	stroke-width: 0.8;
}

.astroway-wheel__div {
	stroke: var(--astroway-line-strong);
	stroke-width: 1;
}

.astroway-wheel__cusp {
	stroke: var(--astroway-line);
	stroke-width: 1;
}

.astroway-wheel__angle {
	stroke: var(--astroway-gilt);
	stroke-width: 1.6;
}

.astroway-wheel__mark {
	stroke: var(--astroway-accent);
	stroke-width: 1.5;
}

.astroway-wheel__lead {
	stroke: var(--astroway-line-strong);
	stroke-width: 0.8;
}

.astroway-card .astroway-wheel__asp {
	fill: none;
	stroke-width: 1.25;
}

.astroway-wheel__hit {
	fill: transparent;
}

/* Each glyph sits in a group translated to its point, so 0 0 is its centre. */
.astroway-wheel__sign,
.astroway-wheel__glyph,
.astroway-wheel__rx {
	transform-box: view-box;
	transform-origin: 0 0;
}

.astroway-wheel__sign {
	fill: currentColor;
	opacity: 0.85;
}

.astroway-wheel__glyph {
	fill: currentColor;
}

.astroway-wheel__rx {
	fill: var(--astroway-tens);
}

/* The second chart of a bi-wheel, told apart by colour as well as by ring. */
.astroway-wheel__planet--b .astroway-wheel__glyph {
	fill: var(--astroway-gilt);
}

.astroway-card .astroway-wheel text {
	dominant-baseline: central;
	font-variant-numeric: tabular-nums;
}

.astroway-card :is(.astroway-wheel__hnum, .astroway-wheel__deg) {
	text-anchor: middle;
}

.astroway-card .astroway-wheel__hnum {
	fill: var(--astroway-muted);
	font-size: 11px;
}

.astroway-card .astroway-wheel__alabel {
	fill: var(--astroway-gilt);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.astroway-card .astroway-wheel__deg {
	fill: var(--astroway-muted);
	font-size: 11px;
}

/* Pointer or focus on a planet: its aspects stay, the rest steps back. */
.astroway-card .astroway-wheel__planet {
	outline: none;
}

.astroway-card .astroway-wheel.is-live .astroway-wheel__planet {
	cursor: pointer;
}

.astroway-wheel__planet:focus-visible .astroway-wheel__hit {
	stroke: var(--astroway-accent);
	stroke-width: 1.5;
}

.astroway-wheel.is-focus .astroway-wheel__asp {
	opacity: 0.12;
}

.astroway-card .astroway-wheel.is-focus .astroway-wheel__asp.is-on {
	opacity: 1;
	stroke-width: 2;
}

.astroway-wheel.is-focus .astroway-wheel__planet {
	opacity: 0.35;
}

.astroway-wheel.is-focus .astroway-wheel__planet.is-on {
	opacity: 1;
}

.astroway-wheel__planet.is-current .astroway-wheel__glyph {
	fill: var(--astroway-accent);
}

/* The tooltip is the page's text colour turned into a background. */
.astroway-card .astroway-wheel__tip {
	position: absolute;
	z-index: 2;
	padding: 6px 10px;
	border-radius: 9px;
	background: #15171c;
	font-size: 0.8em;
	line-height: 1.35;
	white-space: nowrap;
	pointer-events: none;
	transform: translate(-50%, calc(-100% - 10px));
}

.astroway-card .astroway-wheel__tip > span {
	color: #fff;
}

@supports (color: oklch(from currentColor l c h)) {
	.astroway-card .astroway-wheel__tip {
		background: currentColor;
	}

	.astroway-card .astroway-wheel__tip > span {
		color: oklch(from currentColor calc(0.98 - 0.83 * clamp(0, (l - 0.6) * 50, 1)) 0 0);
	}
}

.astroway-card[data-astroway-look="night"] .astroway-wheel__tip {
	background: #e8c878;
}

.astroway-card[data-astroway-look="night"] .astroway-wheel__tip > span {
	color: #0d1130;
}

.astroway-card .astroway-wheel__tip[hidden] {
	display: none;
}

/* The one movement on the page: the aspects draw in once, on arrival. */
@media (prefers-reduced-motion: no-preference) {
	.astroway-wheel__aspects {
		animation: astroway-draw 0.9s ease-out 0.15s both;
	}

	@keyframes astroway-draw {
		from {
			opacity: 0;
		}
	}
}

/* Full size the wheel is 520px, a wheel unit is 1.02px and the 11-unit
   labels are 11.2px. Any narrower and the table takes degrees, houses and
   retrogrades, while signs, planets and angles grow; below 380px they grow
   again, for about half a pixel a unit on a 320px phone. Nothing on the
   wheel is set under 11px at any width. */
@container (max-width: 520px) {
	.astroway-card .astroway-wheel {
		margin-inline: -12px;
	}

	.astroway-card :is(.astroway-wheel__deg, .astroway-wheel__hnum, .astroway-wheel__rx) {
		display: none;
	}

	.astroway-card .astroway-wheel__alabel {
		font-size: 17px;
		letter-spacing: 0;
	}

	.astroway-wheel__sign {
		transform: scale(1.2);
	}

	.astroway-wheel__glyph {
		transform: scale(1.1);
	}
}

@container (max-width: 380px) {
	.astroway-card .astroway-wheel__alabel {
		font-size: 23px;
	}

	.astroway-wheel__sign {
		transform: scale(1.45);
	}

	.astroway-wheel__glyph {
		transform: scale(1.25);
	}
}

/* ── Human Design bodygraph. The centres keep the colours every chart of the
   system uses; design is red, personality the text colour. ── */

.astroway-card .astroway-bodygraph {
	--astroway-hd-yellow: #efc440;
	--astroway-hd-green: #5ba46a;
	--astroway-hd-brown: #c49a6c;
	--astroway-hd-red: #d9534f;
	--astroway-hd-ink: #1d1b16;
	display: grid;
	justify-items: center;
	gap: 14px;
	margin: 0;
}

.astroway-bodygraph__graph {
	inline-size: min(396px, 100%);
}

/* The columns sit under the drawing, as wide as it together, and go one
   under the other when a column head would not fit on its line. */
.astroway-card .astroway-bodygraph__sides {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5em), 1fr));
	gap: 14px 16px;
	inline-size: min(396px, 100%);
}

.astroway-card .astroway-bodygraph__svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-inline-size: none;
}

.astroway-bodygraph__tracks path {
	fill: none;
	stroke: var(--astroway-line);
	stroke-width: 7;
}

.astroway-card .astroway-bodygraph__design,
.astroway-card .astroway-bodygraph__personality {
	fill: none;
	stroke-width: 4.4;
}

.astroway-card .astroway-bodygraph__design {
	stroke: var(--astroway-tens);
}

.astroway-card .astroway-bodygraph__personality {
	stroke: currentColor;
}

.astroway-card .astroway-bodygraph__personality.is-both {
	stroke-dasharray: 3.5 3.5;
}

.astroway-bodygraph__centre {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
}

.astroway-bodygraph__centre--head.is-defined,
.astroway-bodygraph__centre--g.is-defined {
	fill: var(--astroway-hd-yellow);
}

.astroway-bodygraph__centre--ajna.is-defined {
	fill: var(--astroway-hd-green);
}

.astroway-bodygraph__centre.is-defined:is(.astroway-bodygraph__centre--throat, .astroway-bodygraph__centre--spleen, .astroway-bodygraph__centre--solarplexus, .astroway-bodygraph__centre--root) {
	fill: var(--astroway-hd-brown);
}

.astroway-bodygraph__centre.is-defined:is(.astroway-bodygraph__centre--heart, .astroway-bodygraph__centre--sacral) {
	fill: var(--astroway-hd-red);
}

.astroway-card .astroway-bodygraph__gate {
	font-size: 10px;
	text-anchor: middle;
	dominant-baseline: central;
	fill: currentColor;
	opacity: 0.6;
}

.astroway-card .astroway-bodygraph__gate.is-in-defined {
	fill: var(--astroway-hd-ink);
	opacity: 0.7;
}

.astroway-card .astroway-bodygraph__gate.is-on {
	font-weight: 700;
	opacity: 1;
}

/* Native has no colour: a defined centre is shaded, design is dotted. */
.astroway-card[data-astroway-look="native"] .astroway-bodygraph__centre.is-defined {
	fill: color-mix(in oklab, currentColor 24%, transparent);
}

.astroway-card[data-astroway-look="native"] .astroway-bodygraph__gate.is-in-defined {
	fill: currentColor;
}

.astroway-card[data-astroway-look="native"] .astroway-bodygraph__design {
	/* Round caps grow each dash by half the width, so the gap has to outrun them. */
	stroke-dasharray: 0.1 7;
	stroke-linecap: round;
}

/* Both sides: the dots strung on a thin line, told apart from dots alone and from a solid half. */
.astroway-card[data-astroway-look="native"] .astroway-bodygraph__personality.is-both {
	stroke-dasharray: none;
	stroke-width: 2;
}

.astroway-bodygraph__side {
	font-variant-numeric: tabular-nums;
}

.astroway-card .astroway-bodygraph__head {
	margin: 0 0 4px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--astroway-muted);
	/* "Persönlichkeit" in a column of 5.5em: broken at a syllable, not a letter. */
	hyphens: auto;
}

.astroway-card .astroway-bodygraph__side--design .astroway-bodygraph__head {
	color: var(--astroway-tens);
}

.astroway-card .astroway-bodygraph__side ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.astroway-card .astroway-bodygraph__side li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.astroway-card .astroway-bodygraph figcaption {
	inline-size: 100%;
}

/* Gate numbers are 10 units: 11px once the drawing has its full 396px. */
@container (max-width: 395.98px) {
	.astroway-card .astroway-bodygraph__gates {
		display: none;
	}
}

/* ── Chinese sign: the branch character as a seal in the colour of the year's
   element, beside the pillar of stem and branch. ── */

.astroway-card .astroway-chinese {
	--astroway-el: var(--astroway-accent);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin: 4px 0 16px;
}

.astroway-card .astroway-chinese[data-astroway-element="wood"] { --astroway-el: #3d8a4e; }
.astroway-card .astroway-chinese[data-astroway-element="fire"] { --astroway-el: #c3402d; }
.astroway-card .astroway-chinese[data-astroway-element="earth"] { --astroway-el: #a87a1f; }
.astroway-card .astroway-chinese[data-astroway-element="metal"] { --astroway-el: #7d8591; }
.astroway-card .astroway-chinese[data-astroway-element="water"] { --astroway-el: #2c5c8f; }

.astroway-card[data-astroway-look="native"] .astroway-chinese[data-astroway-element] {
	--astroway-el: currentColor;
}

.astroway-card .astroway-chinese__seal {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 96px;
	block-size: 96px;
	/* Mixed with the text colour: lighter on a dark page, deeper on a light one. */
	--astroway-seal: color-mix(in oklab, var(--astroway-el) 72%, currentColor);
	border: 2px solid var(--astroway-seal);
	border-radius: 50%;
	outline: 1px solid var(--astroway-seal);
	outline-offset: -8px;
	color: var(--astroway-seal);
	font-size: 52px;
	line-height: 1;
}

.astroway-card .astroway-chinese__pillar {
	display: flex;
	gap: 24px;
	margin: 0;
}

.astroway-card .astroway-chinese__pillar dt {
	margin: 0;
	font-size: 0.8em;
	color: var(--astroway-muted);
}

.astroway-card .astroway-chinese__pillar dd {
	margin: 4px 0 0;
	font-size: 1.1em;
}

/* A box of its own, one line high: inline, the glyph's ascent would reach up
   into the label above. */
.astroway-card .astroway-chinese__stem {
	display: inline-block;
	font-size: 1.5em;
	line-height: 1;
	vertical-align: -0.1em;
}

.astroway-card .astroway-chinese__reading dt {
	margin: 12px 0 2px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--astroway-muted);
	/* "Persönlichkeit" in a column of 5.5em: broken at a syllable, not a letter. */
	hyphens: auto;
}

.astroway-card .astroway-chinese__reading dd {
	margin: 0;
}

/* ── Tarot: a face is the card's number and its suit's emblem, turned when the
   card came out reversed; the name and reading stand beside it as text. ── */

.astroway-card .astroway-tarot__face {
	display: block;
	flex: none;
	inline-size: 96px;
	block-size: auto;
	--astroway-suit: var(--astroway-gilt);
}

.astroway-tarot__face[data-suit="wands"] { --astroway-suit: var(--astroway-tens); }
.astroway-tarot__face[data-suit="cups"] { --astroway-suit: var(--astroway-accent); }
.astroway-tarot__face[data-suit="swords"] { --astroway-suit: currentColor; }

.astroway-tarot__edge {
	fill: var(--astroway-tint);
	stroke: var(--astroway-line-strong);
	stroke-width: 1.5;
}

.astroway-tarot__frame {
	fill: none;
	stroke: var(--astroway-suit);
	stroke-width: 1;
	opacity: 0.55;
}

.astroway-tarot__emblem,
.astroway-tarot__crown {
	fill: none;
	stroke: var(--astroway-suit);
	stroke-width: 2.4;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.astroway-card .astroway-tarot__index {
	fill: var(--astroway-suit);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-anchor: middle;
	dominant-baseline: central;
}

.astroway-card .astroway-tarot {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.astroway-card .astroway-tarot__text {
	flex: 1;
	min-inline-size: 0;
}

.astroway-card .astroway-tarot .astroway-card__lead {
	margin-block-start: 0;
}

/* The rule under the header needs air before a face or the cross. */
.astroway-card .astroway-card__header + :is(.astroway-tarot, .astroway-spread, .astroway-cross, .astroway-chinese) {
	margin-block-start: 16px;
}

/* The spreads. */
.astroway-card .astroway-spread {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.astroway-card .astroway-spread__card {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 14px;
	align-items: start;
	/* A shorter card in a row of three keeps its text at the top. */
	align-content: start;
	margin: 0;
}

.astroway-card .astroway-spread__card .astroway-tarot__face {
	inline-size: 64px;
}

.astroway-card .astroway-spread__text {
	min-inline-size: 0;
}

.astroway-card .astroway-spread__pos {
	margin: 0 0 2px;
	font-size: 0.8em;
	font-weight: 600;
}

/* Only the name is muted: the badge beside it would take the translucent
   colour for its accent too, and lose its contrast in the native look. */
.astroway-card .astroway-spread__where-name {
	color: var(--astroway-muted);
}

.astroway-card .astroway-spread__num {
	display: inline-grid;
	place-items: center;
	min-inline-size: 1.6em;
	block-size: 1.6em;
	margin-inline-end: 4px;
	border-radius: 0.8em;
	background: var(--astroway-accent);
	font-variant-numeric: tabular-nums;
}

.astroway-card .astroway-spread__num > span {
	color: var(--astroway-on-accent);
}

.astroway-card .astroway-spread__name {
	margin: 0 0 4px;
	font-size: 1.05em;
	line-height: 1.3;
}

.astroway-card .astroway-spread__meaning,
.astroway-card .astroway-spread__where {
	margin: 4px 0 0;
}

.astroway-card .astroway-spread__where {
	font-size: 0.85em;
	color: var(--astroway-muted);
}

/* A face beside its text needs about 12em for the text: a long word such as
   "предпринимательское" is 10.5. In em, so a reader's larger font counts. */
@container (max-width: 17em) {
	.astroway-card .astroway-spread__card {
		grid-template-columns: 1fr;
	}
}

@container (max-width: 17em) {
	.astroway-card .astroway-tarot {
		flex-direction: column;
	}
}

@container (max-width: 26em) {
	.astroway-card .astroway-tarot .astroway-tarot__face {
		inline-size: 64px;
	}
}

/* Three in a row once each column gets those 12em. */
@container (min-width: 40em) {
	.astroway-card .astroway-spread--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.astroway-card .astroway-spread--three .astroway-spread__card {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.astroway-card .astroway-spread--three .astroway-tarot__face {
		inline-size: 96px;
	}
}

/* The Celtic Cross: the cross of six on the left, the second card across the
   first, and the staff of four on the right from the bottom up. Each slot is
   two rows of eight tall: the staff fills all eight, the cross the middle six. */
.astroway-card .astroway-cross {
	/* The card across is 1.7 slots wide, so the columns stand 0.4 of a slot apart. */
	--astroway-slot: min(64px, calc((100cqi - 12px) / 6.7));
	display: grid;
	grid-template-columns: repeat(3, var(--astroway-slot)) 12px var(--astroway-slot);
	grid-template-rows: repeat(8, calc(var(--astroway-slot) * 0.85));
	gap: 6px calc(var(--astroway-slot) * 0.4);
	justify-content: center;
	margin: 4px 0 24px;
}

.astroway-cross__slot {
	position: relative;
	grid-row: span 2;
	display: grid;
	place-items: center;
}

.astroway-card .astroway-cross__slot .astroway-tarot__face {
	inline-size: var(--astroway-slot);
}

.astroway-cross__slot--1,
.astroway-cross__slot--2 { grid-column: 2; grid-row: 4 / span 2; }
.astroway-cross__slot--2 { transform: rotate(90deg); z-index: 1; }
.astroway-card .astroway-cross__slot--2 .astroway-cross__num { transform: rotate(-90deg); }
/* Only the ends of the first card show from under the second, as on a table. */
.astroway-cross__slot--1 .astroway-tarot__face { mask-image: linear-gradient(#000 20%, transparent 20%, transparent 80%, #000 80%); }
.astroway-cross__slot--3 { grid-column: 2; grid-row: 2 / span 2; }
.astroway-cross__slot--4 { grid-column: 2; grid-row: 6 / span 2; }
.astroway-cross__slot--5 { grid-column: 1; grid-row: 4 / span 2; }
.astroway-cross__slot--6 { grid-column: 3; grid-row: 4 / span 2; }
.astroway-cross__slot--7 { grid-column: 5; grid-row: 7 / span 2; }
.astroway-cross__slot--8 { grid-column: 5; grid-row: 5 / span 2; }
.astroway-cross__slot--9 { grid-column: 5; grid-row: 3 / span 2; }
.astroway-cross__slot--10 { grid-column: 5; grid-row: 1 / span 2; }

/* Off the card's corner, clear of the pip's number, and sized with the card;
   above the card laid across, so the first card's number stays in view. */
.astroway-card .astroway-cross__num {
	--astroway-badge: clamp(15px, calc(var(--astroway-slot) * 0.32), 20px);
	position: absolute;
	inset-block-start: calc(var(--astroway-badge) * -0.4);
	inset-inline-start: calc(var(--astroway-badge) * -0.4);
	z-index: 2;
	display: grid;
	place-items: center;
	min-inline-size: var(--astroway-badge);
	block-size: var(--astroway-badge);
	padding: 0 3px;
	border-radius: 10px;
	background: var(--astroway-accent);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

/* On the inner span, as on the button: the accent is worked out from the text
   colour, so the badge setting its own would turn its background pale. */
.astroway-card .astroway-cross__num > span {
	color: var(--astroway-on-accent);
}

/* ── Sky strip: what the sky is doing today, in one line ── */

.astroway-card .astroway-sky {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 0;
	padding: 10px 12px;
	list-style: none;
	border-radius: 12px;
	background: var(--astroway-tint);
	font-size: 0.88em;
}

.astroway-card .astroway-sky li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.astroway-card .astroway-sky .astroway-glyph {
	color: var(--astroway-accent);
	block-size: 1.45em;
}

/* One slot per icon, so the texts start on one line whatever the icon. */
.astroway-card .astroway-sky__icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 24px;
	block-size: 24px;
}

.astroway-card .astroway-moon {
	inline-size: 24px;
	block-size: 24px;
	flex: none;
}

/* The moon card shows the drawing itself, not an icon beside a line of text. */
.astroway-card .astroway-card__moon {
	display: grid;
	justify-items: center;
	margin: 18px 0 4px;
}

.astroway-card .astroway-card__moon .astroway-moon {
	inline-size: clamp(88px, 34%, 132px);
	block-size: auto;
}

/* The lit limb is the bright one in every look. It used to take the gilt
   token, which on a light page is #86620f: darker than the shadow beside it,
   so a Moon at 89 % read as an eclipse. */
.astroway-moon__dark {
	fill: var(--astroway-line-strong);
}

.astroway-moon__lit {
	fill: #f5e6bb;
	stroke: var(--astroway-line-strong);
	stroke-width: 0.5;
}

.astroway-card[data-astroway-look="night"] .astroway-moon__lit {
	fill: #f3e2b3;
}

/* ── Sign picker: links, so it works without JS ── */

.astroway-card .astroway-signs {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 4px;
	margin: 14px 0 0;
}

@container (min-width: 520px) {
	.astroway-card .astroway-signs {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}

.astroway-card .astroway-signs__sign {
	display: grid;
	place-items: center;
	min-block-size: 44px;
	padding: 0;
	border: 1px solid var(--astroway-line);
	border-radius: var(--astroway-radius-inner);
	font-size: 1.15em;
}

@container (max-width: 300px) {
	.astroway-card .astroway-signs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.astroway-card .astroway-signs__sign:hover {
	background: var(--astroway-tint);
}

.astroway-card .astroway-signs__sign[aria-current] {
	border-color: var(--astroway-accent);
	background: var(--astroway-accent-tint);
	color: var(--astroway-accent);
}

/* ── Prose ── */

.astroway-card .astroway-prose {
	max-inline-size: 66ch;
}

.astroway-card .astroway-prose p {
	margin: 12px 0 0;
}

.astroway-card .astroway-prose .astroway-lead {
	font-size: 1.06em;
	margin-block-start: 14px;
}

.astroway-card .astroway-prose :is(h4, h5) {
	margin: 18px 0 6px;
	font-size: 0.98em;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.astroway-card .astroway-prose ul {
	display: grid;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

/* The marker sits out of flow: a list item holds arbitrary inline markup, and
   every inline child of a grid item would claim a column of its own. */
.astroway-card .astroway-prose ul > li {
	position: relative;
	margin: 0;
	padding-inline-start: 28px;
	font-size: 0.95em;
}

.astroway-card .astroway-prose ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 5px;
	inset-block-start: 0.55em;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 2px;
	background: var(--astroway-accent);
	transform: rotate(45deg);
}

/* ── Callout ── */

.astroway-card .astroway-callout {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: 12px;
	/* The bar stays a straight bar: rounded with the corner it tapered to points. */
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-inline-start: 3px solid var(--astroway-accent);
	background: var(--astroway-accent-tint);
	font-size: 0.92em;
}

.astroway-card .astroway-icon {
	inline-size: 1.15em;
	block-size: 1.15em;
	margin-block-start: 0.2em;
	color: var(--astroway-accent);
}

.astroway-card .astroway-callout--tens .astroway-icon {
	color: var(--astroway-tens);
}

.astroway-card .astroway-state__title .astroway-icon {
	margin: 0 0.35em 0 0;
	vertical-align: -0.15em;
	color: var(--astroway-tens);
}

.astroway-card .astroway-callout--tens {
	border-inline-start-color: var(--astroway-tens);
	background: color-mix(in oklab, var(--astroway-tens) 9%, transparent);
}

.astroway-card .astroway-callout p {
	margin: 0;
}

/* ── States: empty, error, loading ── */

.astroway-card .astroway-state {
	margin: 14px 0 0;
	padding: 22px 16px;
	border: 1px dashed var(--astroway-line-strong);
	border-radius: 12px;
	text-align: center;
}

.astroway-card .astroway-state__title {
	margin: 0;
	font-weight: 600;
}

.astroway-card .astroway-state p {
	margin: 4px 0 0;
	font-size: 0.9em;
	color: var(--astroway-muted);
}

.astroway-card .astroway-state a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	margin-block-start: 12px;
	padding: 0 18px;
	border: 1px solid var(--astroway-accent);
	border-radius: 999px;
	color: var(--astroway-accent);
	font-size: 0.92em;
	font-weight: 600;
	text-decoration: none;
}

.astroway-card .astroway-state a:hover {
	background: var(--astroway-accent-tint);
}

.astroway-card .astroway-state--error {
	border-style: solid;
	border-color: color-mix(in oklab, var(--astroway-tens) 45%, transparent);
}

.astroway-card .astroway-skeleton {
	display: grid;
	gap: 10px;
	margin: 14px 0 0;
}

.astroway-skeleton__line {
	display: block;
	block-size: 0.9em;
	inline-size: var(--astroway-w, 100%);
	border-radius: 6px;
	background: var(--astroway-tint);
	background: color-mix(in oklab, currentColor 8%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.astroway-skeleton__line {
		animation: astroway-pulse 1.4s ease-in-out infinite;
	}

	@keyframes astroway-pulse {
		50% {
			opacity: 0.45;
		}
	}
}

/* ── Footnote ── */

.astroway-card .astroway-card__note {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	font-size: 0.78em;
	line-height: 1.45;
	color: var(--astroway-muted);
}

.astroway-card .astroway-card__note small {
	font-size: inherit;
}

/* ── Parts the 1.x cards still print, in the new tokens ── */

.astroway-card .astroway-card__lead {
	margin: 12px 0 0;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.25;
	color: var(--astroway-accent);
}

.astroway-card .astroway-card__lead--no {
	color: var(--astroway-muted);
	font-weight: 500;
}

.astroway-card .astroway-card__glyph {
	font-size: 1.15em;
	line-height: 1;
}

.astroway-card .astroway-card__body {
	margin: 12px 0 0;
	max-inline-size: 66ch;
}

.astroway-card .astroway-card__body p {
	margin: 0 0 0.85em;
}

.astroway-card .astroway-card__body p:last-child {
	margin-block-end: 0;
}

.astroway-card .astroway-card__keywords {
	margin: 6px 0 0;
	font-size: 0.9em;
	color: var(--astroway-muted);
}

.astroway-card :is(.astroway-card__themes, .astroway-card__aspects, .astroway-card__channels) {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
}

.astroway-card .astroway-card__themes li {
	margin: 0;
	padding: 3px 11px;
	border: 1px solid var(--astroway-line);
	border-radius: 999px;
	font-size: 0.94em;
}

.astroway-card .astroway-card__aspects li,
.astroway-card .astroway-card__channels li {
	margin: 0;
	margin-inline-end: 10px;
}

.astroway-card .astroway-card__header + .astroway-card__subtitle,
.astroway-card .astroway-card__subtitle:first-child {
	margin-block-start: 14px;
}

.astroway-card > .astroway-card__subtitle {
	margin-block-start: 18px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--astroway-line);
}

.astroway-card > .astroway-card__header + .astroway-card__subtitle {
	margin-block-start: 14px;
	padding-block-start: 0;
	border-block-start: 0;
}

.astroway-card .astroway-card__scroll {
	max-inline-size: 100%;
	margin-block-start: 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.astroway-card .astroway-card__placements {
	inline-size: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9em;
	font-family: inherit;
	color: inherit;
	font-variant-numeric: tabular-nums;
	background: none;
}

.astroway-card .astroway-card__scroll .astroway-card__placements {
	min-inline-size: max-content;
}

.astroway-card .astroway-card__placements caption {
	margin: 0;
	padding: 0 0 6px;
	font-size: 0.86em;
	font-weight: 400;
	text-align: start;
	color: var(--astroway-muted);
}

.astroway-card .astroway-card__placements :is(th, td) {
	padding: 8px 0;
	padding-inline-end: 8px;
	border: 0;
	border-block-end: 1px solid var(--astroway-line);
	background: none;
	font-size: 1em;
	font-weight: 400;
	text-align: start;
	vertical-align: baseline;
	color: inherit;
}

.astroway-card .astroway-card__placements thead th {
	padding-block: 6px;
	font-size: 0.9em;
	font-weight: 500;
	color: var(--astroway-muted);
	white-space: nowrap;
}

.astroway-card .astroway-card__placements tr {
	background: none;
}

.astroway-card .astroway-card__placements tr.astroway-card__row--current > * {
	background: var(--astroway-accent-tint);
	font-weight: 600;
}

.astroway-card .astroway-card__nowrap {
	white-space: nowrap;
}

.astroway-card--natal .astroway-card__scroll .astroway-card__placements {
	min-inline-size: 0;
}

.astroway-card--natal .astroway-embed {
	margin: 12px 0 0;
	min-height: 0;
}

.astroway-card .astroway-card__more {
	margin-block-start: 12px;
	font-size: 0.95em;
}

.astroway-card .astroway-card__more summary {
	min-block-size: 44px;
	display: flex;
	align-items: center;
	cursor: pointer;
	color: var(--astroway-muted);
}

/* ── Section: several cards, tabbed by the script ── */

.astroway-section {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.astroway-section > .astroway-tabs__list {
	display: flex;
	margin-block-end: -0.25em;
}

.astroway-section--tabbed > .astroway-card {
	margin-block-start: 0;
}

/* `hidden` is a UA rule, and any author rule outranks it: the cards set
   `display: block` on themselves, so the attribute alone did nothing. */
.astroway-section--tabbed > [hidden] {
	display: none;
}

/* ── Birth-data form ── */

.astroway-card .astroway-form {
	display: grid;
	gap: 14px;
	margin: 16px 0 0;
}

.astroway-card .astroway-field {
	display: grid;
	gap: 4px;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.astroway-card .astroway-field__label {
	padding: 0;
	font-size: 0.9em;
	font-weight: 500;
}

.astroway-card .astroway-field__input {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 44px;
	padding: 8px 12px;
	border: 1px solid var(--astroway-line-strong);
	border-radius: var(--astroway-radius-inner);
	background: transparent;
	line-height: 1.3;
	cursor: text;
}

/* The browser's calendar and clock marks, in the card's muted ink rather than pure black. */
.astroway-card .astroway-field__input::-webkit-calendar-picker-indicator {
	opacity: 0.55;
	cursor: pointer;
}

.astroway-card .astroway-field.is-invalid .astroway-field__input {
	border-color: var(--astroway-tens);
}

.astroway-card :is(.astroway-field__hint, .astroway-field__error) {
	margin: 0;
	font-size: 0.84em;
	text-wrap: pretty;
}

.astroway-card .astroway-field__hint {
	color: var(--astroway-muted);
}

.astroway-card .astroway-field__error {
	color: var(--astroway-tens);
}

/* A checkbox or radio row keeps a 44px target, but draws itself closer to
   the field above: the tick belongs to the time, not halfway to the city. */
.astroway-card .astroway-field--check {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 44px;
}

.astroway-card :is(.astroway-form, .astroway-form__person) > .astroway-field--check {
	margin-block-start: -8px;
}

/* One person of two: the same column of fields under their own heading. */
.astroway-card .astroway-form__person {
	display: grid;
	gap: 14px;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* A floated legend is an ordinary grid item instead of a cut in the rule above. */
.astroway-card .astroway-form__person > legend {
	float: left;
	inline-size: 100%;
	margin: 0;
	padding: 0;
}

.astroway-card .astroway-form__person + .astroway-form__person {
	padding-block-start: 16px;
	border-block-start: 1px solid var(--astroway-line);
}

.astroway-card .astroway-field__box {
	flex: none;
	display: grid;
	place-content: center;
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	border: 1px solid var(--astroway-line-strong);
	border-radius: 4px;
	background: transparent;
	appearance: none;
	cursor: pointer;
}

.astroway-card .astroway-field__box[type="radio"] {
	border-radius: 50%;
}

.astroway-card .astroway-field__box:checked {
	border-color: var(--astroway-accent);
	background: var(--astroway-accent);
}

.astroway-card .astroway-field__box:checked::before {
	content: "";
	inline-size: 10px;
	block-size: 10px;
	background: var(--astroway-on-accent);
	clip-path: polygon(14% 44%, 0 58%, 38% 96%, 100% 22%, 86% 8%, 38% 68%);
}

.astroway-card .astroway-field__box[type="radio"]:checked::before {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	clip-path: none;
}

.astroway-card .astroway-field--check label {
	cursor: pointer;
}

.astroway-card .astroway-choices {
	gap: 0;
}

.astroway-card .astroway-choices > .astroway-field__label {
	margin-block-end: 4px;
}

.astroway-card .astroway-choices__asked {
	margin: 0 0 8px;
	font-size: 0.84em;
	color: var(--astroway-muted);
}

.astroway-card .astroway-choices .astroway-field--check {
	border-block-end: 1px solid var(--astroway-line);
}

.astroway-card .astroway-choices__asked + .astroway-field--check {
	border-block-start: 1px solid var(--astroway-line);
}

/* A disclosure, not a link: the card's own text, smaller, with the same
   chevron the accordion turns. */
.astroway-card .astroway-form__manual > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 44px;
	margin-block: -8px;
	font-size: 0.9em;
	font-weight: 500;
	color: var(--astroway-accent);
	list-style: none;
	cursor: pointer;
}

.astroway-card .astroway-form__manual > summary::-webkit-details-marker {
	display: none;
}

.astroway-card .astroway-form__manual > summary::after {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s;
}

.astroway-card .astroway-form__manual[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

/* The content of a details element sits in its own box, which a grid gap on
   the details does not reach: the fields are spaced by margin. */
.astroway-card .astroway-form__manual > .astroway-field {
	margin-block-start: 14px;
}

/* Off-screen rather than hidden: a robot skips a field it can tell is hidden. */
.astroway-card .astroway-form__trap {
	position: absolute;
	inset-inline-start: -10000px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.astroway-card .astroway-form__actions {
	margin: 4px 0 0;
}

/* The one filled control in the card: the form's action. The accent follows
   currentColor, so the button keeps the theme's text colour and only its
   label takes the ink for a filled accent: set on the button itself, that
   colour would become the currentColor the fill is computed from. */
.astroway-card .astroway-button {
	min-block-size: 44px;
	padding: 0 22px;
	border: 1px solid var(--astroway-accent);
	border-radius: var(--astroway-radius-inner);
	background: var(--astroway-accent);
	font-weight: 600;
}

.astroway-card .astroway-button > span {
	color: var(--astroway-on-accent);
}

.astroway-card .astroway-button:hover {
	background: color-mix(in oklab, var(--astroway-accent) 86%, currentColor);
}

.astroway-form__again {
	margin: 0 0 1.5em;
}