/* ══════════════════════════════════════════════════════════════════════════
   AN LIMEN — /cangrow/

   Every colour here is an --an-* token with a fallback. The tokens are the
   theme's contract, so this page inherits light, dark and Sun mode without
   knowing which theme is active; the fallbacks mean it is still legible if a
   theme without the contract is switched on.

   No colour carries meaning on its own. A ruled-out answer is marked by a
   heavy left rule and by the word "Ruled out", because roughly one man in
   twelve cannot rely on a red-versus-green distinction, and this page exists
   to be read in a hurry.
   ══════════════════════════════════════════════════════════════════════════ */

.an-limen {
	max-width: 46rem;
	margin: 0 auto;
	padding: var(--an-space-6, 32px) var(--an-gutter, 20px) var(--an-space-9, 96px);
	color: var(--an-ink, #14140f);
	font-family: var(--an-font-ui, system-ui, sans-serif);
	font-size: var(--an-t-body, 1.0625rem);
	line-height: var(--an-lh-body, 1.6);
}

/* ── the question ─────────────────────────────────────────────────────── */

.an-limen-ask h1 {
	font-size: var(--an-t-h2, 2rem);
	line-height: var(--an-lh-snug, 1.2);
	margin: 0 0 var(--an-space-3, 12px);
}

.an-limen-sub {
	margin: 0 0 var(--an-space-5, 24px);
	color: var(--an-ink-2, #55564d);
	max-width: 34rem;
}

.an-limen-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--an-space-3, 12px);
	margin-bottom: var(--an-space-7, 48px);
}

@media (min-width: 40rem) {
	.an-limen-fields {
		grid-template-columns: 1fr 1fr auto;
		align-items: end;
	}
}

.an-limen-fields label {
	display: block;
}

.an-limen-fields span {
	display: block;
	font-size: var(--an-t-micro, 0.8125rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--an-ink-2, #55564d);
	margin-bottom: var(--an-space-1, 4px);
}

.an-limen-fields input {
	width: 100%;
	box-sizing: border-box;
	/* 16px minimum: anything smaller makes iOS Safari zoom the viewport on
	   focus, which on a phone in a field reads as the page breaking. */
	font-size: 1rem;
	font-family: inherit;
	padding: var(--an-space-3, 12px);
	border: 1px solid var(--an-rule, #d6d6cc);
	border-radius: var(--an-radius-sm, 6px);
	background: var(--an-surface, #fff);
	color: inherit;
	/* 48px is the smallest reliable one-thumb target. */
	min-height: 48px;
}

.an-limen-fields button {
	font: inherit;
	font-weight: 600;
	min-height: 48px;
	padding: var(--an-space-3, 12px) var(--an-space-5, 24px);
	border: 0;
	border-radius: var(--an-radius-sm, 6px);
	background: var(--an-ink, #14140f);
	color: var(--an-surface, #fff);
	cursor: pointer;
}

/* ── the answer ───────────────────────────────────────────────────────── */

.an-limen-q {
	font-size: var(--an-t-small, 0.9375rem);
	color: var(--an-ink-2, #55564d);
	margin: 0 0 var(--an-space-2, 8px);
}

.an-limen-headline {
	font-size: var(--an-t-h2, 2rem);
	line-height: var(--an-lh-snug, 1.2);
	margin: 0 0 var(--an-space-4, 16px);
	padding-left: var(--an-space-4, 16px);
	border-left: 6px solid var(--an-rule, #d6d6cc);
}

.an-limen-v-ruled_out    .an-limen-headline { border-left-color: var(--an-stop, #a4331f); }
.an-limen-v-cover_only   .an-limen-headline { border-left-color: var(--an-warn, #9a6b12); }
.an-limen-v-not_ruled_out .an-limen-headline { border-left-color: var(--an-go, #2f6b3a); }
.an-limen-v-no_record    .an-limen-headline { border-left-color: var(--an-ink-3, #8b8c82); }

/*
 * The caveat is styled to be read, not skipped.
 *
 * It is the same size as the body text and sits directly under the headline,
 * because it qualifies the headline and a qualification in 12px grey under a
 * fold is a qualification nobody has made.
 */
.an-limen-caveat {
	margin: 0 0 var(--an-space-6, 32px);
	padding: var(--an-space-4, 16px);
	background: var(--an-surface-2, #f4f4ef);
	border-radius: var(--an-radius-sm, 6px);
	max-width: 40rem;
}

.an-limen-findings {
	list-style: none;
	margin: 0 0 var(--an-space-6, 32px);
	padding: 0;
	display: grid;
	gap: var(--an-space-4, 16px);
}

@media (min-width: 34rem) {
	.an-limen-findings { grid-template-columns: repeat(3, 1fr); }
}

.an-limen-findings li {
	padding: var(--an-space-4, 16px);
	border: 1px solid var(--an-rule, #d6d6cc);
	border-radius: var(--an-radius-sm, 6px);
}

.an-limen-f-label {
	display: block;
	font-size: var(--an-t-micro, 0.8125rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--an-ink-2, #55564d);
}

.an-limen-f-value {
	display: block;
	font-family: var(--an-font-mono, ui-monospace, monospace);
	font-size: var(--an-t-h4, 1.25rem);
	margin: var(--an-space-1, 4px) 0;
}

.an-limen-f-note {
	display: block;
	font-size: var(--an-t-small, 0.9375rem);
	color: var(--an-ink-2, #55564d);
}

.an-limen h3 {
	font-size: var(--an-t-h4, 1.25rem);
	margin: var(--an-space-6, 32px) 0 var(--an-space-3, 12px);
}

.an-limen-checks,
.an-limen-blind {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--an-space-4, 16px);
}

.an-limen-checks li {
	padding-left: var(--an-space-4, 16px);
	border-left: 3px solid var(--an-rule, #d6d6cc);
}

.an-limen-checks li.is-fail { border-left-color: var(--an-stop, #a4331f); }
.an-limen-checks li.is-pass { border-left-color: var(--an-go, #2f6b3a); }

.an-limen-checks strong,
.an-limen-blind strong {
	display: block;
	margin-bottom: var(--an-space-1, 4px);
}

.an-limen-checks p,
.an-limen-blind p {
	margin: 0 0 var(--an-space-2, 8px);
}

.an-limen-cover {
	color: var(--an-ink-2, #55564d);
	font-style: italic;
}

.an-limen-src {
	font-family: var(--an-font-mono, ui-monospace, monospace);
	font-size: var(--an-t-micro, 0.8125rem);
	color: var(--an-ink-3, #8b8c82);
}

.an-limen-blind li,
.an-limen-checks.is-quiet li {
	color: var(--an-ink-2, #55564d);
	border-left-color: var(--an-rule, #d6d6cc);
}

.an-limen-record {
	margin-top: var(--an-space-6, 32px);
	font-size: var(--an-t-small, 0.9375rem);
	color: var(--an-ink-2, #55564d);
}

/* ── what to do next ──────────────────────────────────────────────────── */

.an-limen-next {
	display: flex;
	flex-wrap: wrap;
	gap: var(--an-space-3, 12px);
	margin-top: var(--an-space-6, 32px);
}

.an-limen-next a {
	display: inline-block;
	min-height: 48px;
	padding: var(--an-space-3, 12px) var(--an-space-5, 24px);
	border-radius: var(--an-radius-sm, 6px);
	border: 1px solid var(--an-ink, #14140f);
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	line-height: 24px;
}

.an-limen-share {
	background: var(--an-ink, #14140f);
	color: var(--an-surface, #fff) !important;
}

/* ── other states ─────────────────────────────────────────────────────── */

.an-limen-choose ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--an-space-2, 8px);
}

.an-limen-choose a {
	display: block;
	padding: var(--an-space-3, 12px);
	min-height: 48px;
	box-sizing: border-box;
	border: 1px solid var(--an-rule, #d6d6cc);
	border-radius: var(--an-radius-sm, 6px);
	text-decoration: none;
	color: inherit;
}

.an-limen-choose em {
	display: block;
	font-family: var(--an-font-mono, ui-monospace, monospace);
	font-size: var(--an-t-micro, 0.8125rem);
	color: var(--an-ink-2, #55564d);
	font-style: normal;
}

.an-limen-problem {
	padding: var(--an-space-4, 16px);
	border-left: 3px solid var(--an-warn, #9a6b12);
	background: var(--an-surface-2, #f4f4ef);
}

/* ── print: the answer, and nothing that cannot be carried ────────────── */

@media print {
	.an-limen-ask,
	.an-limen-next { display: none; }

	.an-limen { max-width: none; padding: 0; }

	.an-limen-headline { border-left-width: 3px; }
}