/* ══════════════════════════════════════════════════════════════
   BLOCKS — the layer feed
   ══════════════════════════════════════════════════════════════

   One column. Full bleed. One block per thing the system did.

   The reference is a social feed, and the reason is not fashion:
   a feed is the only common layout where a stranger already knows
   that items arrive over time, that each one is complete on its
   own, and that you scroll rather than navigate. That is exactly
   the shape of a pipeline whose layers finish at different times.

   What is deliberately NOT taken from that reference: there are
   no avatars, no counts, no reactions, no infinite tail. Nothing
   here is engagement. A block exists because a layer ran.

   THE RULE THAT GOVERNS THE MOTION
   A block appears when its work is done, and never before. The
   timings printed on them are measured, not staged. If the crop
   resolved in one millisecond the block says 1ms and appears
   instantly — the brief is explicit that faking latency to show
   off the choreography makes a grower correctly conclude the
   software is wasting his time.
   ────────────────────────────────────────────────────────────── */

.an-feed {
	--blk-gutter: clamp(16px, 5vw, 40px);
	--blk-max: 760px;

	display: flex;
	flex-direction: column;
	gap: var(--an-space-5);
	width: 100%;
	margin: 0 auto;
	padding: var(--an-space-6) 0 var(--an-space-10);
}

/* ── the block ────────────────────────────────────────────── */

.blk {
	position: relative;
	width: 100%;
	max-width: var(--blk-max);
	margin: 0 auto;
	padding: var(--blk-gutter);
	background: var(--an-surface);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius-lg);
	overflow: hidden;
}

/* Edge to edge on a phone. A 16px gutter on each side of a card
   on a 390px screen throws away 8% of the width for a border
   nobody needed, and the numbers here are the whole point. */
@media (max-width: 640px) {
	.an-feed { gap: 2px; }

	.blk {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
}

/* ── the header row: what ran, and how long it took ───────── */

.blk-top {
	display: flex;
	align-items: baseline;
	gap: var(--an-space-3);
	margin-bottom: var(--an-space-4);
}

.blk-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--an-accent);
	transform: translateY(-2px);
}

.blk-label {
	font: 500 var(--an-t-micro) / 1 var(--an-font-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--an-text-2);
}

.blk-ms {
	margin-left: auto;
	font: 400 var(--an-t-micro) / 1 var(--an-font-mono);
	color: var(--an-text-3);
	font-variant-numeric: tabular-nums;
}

/* ── the big part ─────────────────────────────────────────── */

.blk-value {
	font: 600 var(--an-t-h1) / var(--an-lh-tight) var(--an-font-ui);
	letter-spacing: -.02em;
	color: var(--an-text);
	margin: 0 0 var(--an-space-4);
	text-wrap: balance;
}

.blk-value--huge { font-size: var(--an-t-display); }

.blk-value--num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.blk-detail {
	font: 400 var(--an-t-body) / var(--an-lh-body) var(--an-font-ui);
	color: var(--an-text-2);
	margin: 0;
	max-width: 60ch;
}

/* ── verdict colouring, and only here ─────────────────────── */

.blk[data-verdict="go"]        { --blk-tone: var(--an-primary); }
.blk[data-verdict="caution"]   { --blk-tone: var(--an-warn); }
.blk[data-verdict="no_go"]     { --blk-tone: var(--an-danger); }
.blk[data-verdict="refused"]   { --blk-tone: var(--an-text-3); }

.blk[data-verdict] .blk-dot    { background: var(--blk-tone, var(--an-accent)); }
.blk[data-verdict]::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--blk-tone, var(--an-accent));
}

/* ── the figure grid: nine numbers, read at a glance ───────── */

.blk-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1px;
	margin-top: var(--an-space-5);
	/* Not the line colour. The gap-as-border trick paints the ragged tail of
	   the last row too, so nine figures in a four-column grid drew a grey
	   rectangle where the three missing cells would have been. */
	background: transparent;
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius-md);
	overflow: hidden;
}

.blk-cell {
	background: var(--an-surface);
	padding: var(--an-space-4);
	/* The rules live on the cells, so only real cells get them. */
	box-shadow: 1px 0 0 var(--an-line), 0 1px 0 var(--an-line);
}

.blk-cell dt {
	font: 400 var(--an-t-micro) / 1.3 var(--an-font-mono);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--an-text-3);
	margin: 0 0 var(--an-space-2);
}

.blk-cell dd {
	font: 500 var(--an-t-h4) / var(--an-lh-snug) var(--an-font-ui);
	color: var(--an-text);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* ── the year strip: five seasons, as five bars ───────────── */

.blk-years {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--an-space-2);
	align-items: end;
	height: 140px;
	margin-top: var(--an-space-5);
}

.blk-year {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	gap: var(--an-space-2);
	text-align: center;
}

.blk-bar {
	background: var(--blk-tone, var(--an-accent));
	border-radius: var(--an-radius-sm) var(--an-radius-sm) 0 0;
	min-height: 3px;
	opacity: .85;
}

/* A failed year is drawn full height, hatched — not short. Its yield fraction
   is a number the model has just declared invalid, so sizing a bar by it would
   be drawing a measurement we said we could not make. Full height reads as
   "this is off the scale", which is what happened. */
.blk-year.is-fail .blk-bar {
	height: 100% !important;
	background: repeating-linear-gradient(
		45deg,
		var(--an-danger) 0 5px,
		transparent 5px 10px
	);
	border: 1px solid var(--an-danger);
}

.blk-year b {
	font: 500 var(--an-t-micro) / 1 var(--an-font-mono);
	color: var(--an-text-2);
	font-variant-numeric: tabular-nums;
}

.blk-year span {
	font: 400 var(--an-t-micro) / 1 var(--an-font-mono);
	color: var(--an-text-3);
}

/* ── the reason list ──────────────────────────────────────── */

.blk-because {
	margin: var(--an-space-5) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--an-space-3);
}

.blk-because li {
	position: relative;
	padding-left: var(--an-space-5);
	font: 400 var(--an-t-body) / var(--an-lh-body) var(--an-font-ui);
	color: var(--an-text-2);
}

.blk-because li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .7em;
	width: 10px;
	height: 1px;
	background: var(--an-text-3);
}

/* ── the answer block, set in the editorial face ──────────── */

.blk--answer .blk-value {
	font: 400 var(--an-t-h3) / 1.45 var(--an-font-editorial);
	letter-spacing: 0;
	max-width: 40ch;
}

.blk-note {
	margin-top: var(--an-space-5);
	padding-top: var(--an-space-4);
	border-top: 1px solid var(--an-line);
	font: 400 var(--an-t-small) / var(--an-lh-body) var(--an-font-ui);
	color: var(--an-text-3);
	max-width: 62ch;
}

/* ── links out ────────────────────────────────────────────── */

.blk-links {
	margin: var(--an-space-4) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.blk-links a {
	display: block;
	padding: var(--an-space-3) 0;
	border-bottom: 1px solid var(--an-line);
	font: 500 var(--an-t-body) / 1.4 var(--an-font-ui);
	color: var(--an-text);
}

.blk-links a:hover { color: var(--an-accent); }
.blk-links li:last-child a { border-bottom: 0; }

/* ── arrival ──────────────────────────────────────────────── */

@keyframes blk-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.blk[data-arrived] {
	animation: blk-in var(--an-med, 240ms) var(--an-ease) both;
}

/* A block that is still working. The bar is indeterminate on
   purpose — we do not know how long ERA5 will take, and a
   progress bar that guesses is a progress bar that lies. */
.blk--waiting .blk-value {
	color: var(--an-text-3);
	font-size: var(--an-t-h3);
}

.blk--waiting::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 40%;
	background: var(--an-accent);
	animation: blk-sweep 1.1s var(--an-ease) infinite;
}

@keyframes blk-sweep {
	from { transform: translateX(-100%); }
	to   { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
	.blk[data-arrived] { animation: none; }
	.blk--waiting::after { animation: none; width: 100%; opacity: .35; }
}

/* ── the composer, pinned where a thumb is ────────────────── */

.blk-ask {
	position: sticky;
	bottom: 0;
	z-index: 20;
	max-width: var(--blk-max);
	margin: var(--an-space-6) auto 0;
	padding: var(--an-space-3) var(--blk-gutter)
	         calc(var(--an-space-3) + env(safe-area-inset-bottom));
	background: var(--an-bg);
	border-top: 1px solid var(--an-line);
}

.blk-ask form {
	display: flex;
	gap: var(--an-space-2);
	align-items: center;
}

.blk-ask input[type="search"],
.blk-ask input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--an-space-4);
	font: 400 var(--an-t-body) / 1.2 var(--an-font-ui);
	color: var(--an-text);
	background: var(--an-surface);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius-lg);
}

.blk-ask button {
	flex: 0 0 auto;
	padding: var(--an-space-4) var(--an-space-5);
	font: 500 var(--an-t-body) / 1.2 var(--an-font-ui);
	color: var(--an-bg);
	background: var(--an-text);
	border: 0;
	border-radius: var(--an-radius-lg);
	cursor: pointer;
}

.blk-ask button:disabled { opacity: .4; cursor: default; }