/* The home page (SU-3, AI1-33): / for a visitor. The words and the two ways to try GAIT; the
	example on the deep band (the packaged sample drawn in em, its findings and recommendation
	beside it); the five steps. Colours are the :root tokens of app.css only. */
.home { display: grid; gap: var(--gap-region); }
.home-text { display: grid; gap: var(--space-5); justify-items: start; align-content: start; }
.home-text h1 { font-size: var(--text-display); line-height: 1.1; text-wrap: balance; }
.home-lead { max-width: 36rem; font-size: var(--text-lead); text-wrap: pretty; }
.nowrap { white-space: nowrap; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
	justify-self: stretch; }
.home-actions a.button, .home-actions button { height: var(--control-h-lg);
	padding: 0 var(--space-5); }
.home-note { flex: 1 0 100%; font-size: var(--text-sm); color: var(--muted); text-wrap: pretty; }
.home-upload { justify-self: stretch; max-width: 36rem; margin-top: var(--space-3); }
.home-drop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
	padding: var(--space-5); border: 1.5px dashed var(--border-strong);
	border-radius: var(--radius-xl); background: var(--surface); }
.home-drop:hover, .home-drop:focus-within, .home-drop.is-dragover { border-color: var(--accent); }
.home-drop.is-dragover { border-style: solid; background: var(--accent-bg); }
.home-drop-title { flex: 1 0 100%; font-weight: 600; }
.home-drop input[type="file"] { flex: 0 1 auto; min-width: 0; font-size: var(--text-sm); }
.file-facts { flex: 1 0 100%; }
.file-facts:empty { position: absolute; }

/* The example: a band of --grad-deep with a faint grid, the sheet on it, the notes beside. */
.sheet-figure { position: relative; isolation: isolate; display: grid;
	grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-4);
	padding: var(--space-6); border-radius: var(--radius-xl);
	background: var(--deep-mid) var(--grad-deep);
	--grid-ink: color-mix(in srgb, var(--on-deep) 8%, var(--bg-clear)); }
.sheet-figure::before { content: ""; position: absolute; z-index: -1; inset: 0;
	border-radius: inherit; background-size: 24px 24px; background-image:
	linear-gradient(var(--grid-ink) 1px, var(--bg-clear) 1px),
	linear-gradient(90deg, var(--grid-ink) 1px, var(--bg-clear) 1px); }
.sheet { position: relative; isolation: isolate; display: flex; flex-direction: column;
	gap: 0.375em; width: 20em; aspect-ratio: 8.5 / 11; padding: 1.75em 2.25em 1.5em;
	font-size: calc(var(--space-4) * 0.875); background: var(--surface);
	border-radius: var(--radius-sm); box-shadow: var(--shadow-paper); }
.sheet > span { flex: none; height: 0.3125em; border-radius: 1px; background: var(--sheet-ink); }
.sheet > .sheet-run { display: flex; justify-content: space-between; align-items: flex-start;
	height: 0.875em; margin-bottom: 0.5em; background: none;
	border-bottom: 1px solid var(--border); }
.sheet-run::before, .sheet-run::after { content: ""; width: 48%; height: 0.25em;
	background: var(--sheet-ink); }
.sheet-run::after { width: 22%; }
.sheet > .sheet-title { height: 0.625em; width: 86%; background: var(--sheet-ink-strong); }
.sheet > .sheet-sub { width: 78%; }
.sheet > .sheet-head { height: 0.4375em; width: 52%; margin-top: 0.5em;
	background: var(--sheet-ink-strong); }
.sheet > .sheet-end { width: 44%; }
.sheet > .sheet-gap { height: 1.25em; margin-top: 0.25em; background: var(--warn-bg);
	border: 1px dashed var(--warn-fg); }
.sheet > .sheet-hitline { display: flex; gap: 0.5em; background: none; }
.sheet-hitline::before, .sheet-hitline::after { content: ""; background: var(--sheet-ink); }
.sheet-hitline::before { flex: 1; }
.sheet-hitline::after { flex: 1.4; }
.sheet-hit { position: relative; width: 30%; background: var(--sheet-ink-strong); }
.sheet-hit::before { content: ""; position: absolute; z-index: -1; inset: -0.25em -0.2em;
	border-radius: 1px; background: var(--mark-strong); }
.sheet-side { display: grid; gap: var(--space-4); }
.sheet-notes { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sheet-note { display: grid; justify-items: start; gap: var(--space-1); padding: var(--space-3);
	border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-sm); }
.sheet-caption { display: grid; gap: var(--space-1); color: var(--on-deep); --at: 1450ms; }
/* One line of text, so a screen reader reads it as one piece. */
.sheet-says { margin-block: -0.225em; font-size: var(--text-md); line-height: 2; }
.sheet-says-lead { margin-inline-end: var(--space-1); }
.sheet-reason { font-size: var(--text-md); text-wrap: pretty; }

/* Plays once, about 1.8 s: each finding marks the sheet as its note appears, then the
	recommendation. Opacity only, so no box ever changes size; without this block the page is
	the still frame. */
.at-1 { --at: 250ms; }
.at-2 { --at: 650ms; }
.at-3 { --at: 1050ms; }
@media (prefers-reduced-motion: no-preference) {
	.sheet-gap, .sheet-hit::before, .sheet-note, .sheet-caption {
		animation: home-in var(--dur-slow) var(--ease-out) var(--at) both; }
}
@keyframes home-in { from { opacity: 0; } }
/* Forced colours would erase the drawing (it is made of backgrounds); it is aria-hidden. */
@media (forced-colors: active) { .sheet { forced-color-adjust: none; } }
/* How GAIT decides: five numbered steps, in a row from 64rem. */
.home-how { display: grid; gap: var(--space-2); }
.home-how-lead { max-width: 40rem; color: var(--muted); }
.home-steps { display: grid; gap: var(--space-5); margin: var(--space-4) 0 0; padding: 0;
	list-style: none; counter-reset: home-step; }
.home-steps li { display: grid; gap: var(--space-1); counter-increment: home-step; }
.home-steps h3::before { content: counter(home-step) ". "; color: var(--accent); }
.home-steps p { color: var(--muted); font-size: var(--text-md); }

@media (min-width: 48rem) { main.landing { justify-content: center; } }
@media (min-width: 64rem) {
	.home { grid-template-columns: minmax(0, 1fr) auto; align-items: center;
		column-gap: var(--space-12); }
	.sheet-figure { grid-template-columns: auto 15rem; }
	.home-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Below 64rem one column: the sheet is a thumbnail beside its notes, larger on a tablet. */
@media (max-width: 63.99rem) {
	.sheet { font-size: calc(var(--space-6) / 4); }
	.sheet-figure { padding: var(--space-4); }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.sheet { font-size: calc(var(--space-4) * 0.625); }
}
@media (max-width: 29.99rem) {
	.home-actions a.button { flex: 1 0 100%; }
	.home-actions button { flex: 1 0 100%; }
}