/* The test site's own layout (test 1's page, the home page, /qr; plan/technical-plan/7.8-phone-tests.md, 42-52): layout only. Every colour, size, corner and font is the
   kit's (/kit/tokens.css, /kit/kit.css: plan/blueprint/kit/, reused as it is). The page is the phone: the kit's .phone fills
   the browser's window, its .scroller scrolls, the glass top bar stays on top. Also used by the home page and /qr. */

html, body { height: 100%; }
body.site { background: var(--color-bg); }
body.site .phone { height: 100%; }
/* a link drawn as a button: the kit styles buttons; a link keeps the button's words and colour, never the browser's blue */
.site a.btn { text-decoration: none; }
.site a.btn:not(.primary) { color: var(--color-text); }

/* the top bar: a way back at the left, the name in the middle (as 2.1: "TryOnAstra" in the middle at the top) */
.site .topbar { display: grid; grid-template-columns: var(--size-tap) minmax(0, 1fr) var(--size-tap); }
.site .topbar .title { text-align: center; }

.site .body { padding: var(--space-6) var(--space-7) var(--space-14); display: flex; flex-direction: column; gap: var(--space-9); max-width: 560px; margin: 0 auto; }
.site .kicker { color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.site .h1 { margin-top: var(--space-2); }
.site .card > .h2 + p, .site .card > p + p { margin-top: var(--space-4); }
.site .card .acts { margin-top: var(--space-8); }
.site .card .acts .btn { flex: 1 1 auto; }
.site .tagline { overflow-wrap: anywhere; color: var(--color-text-muted); }

/* the results card: label and value lines, two columns, so the card fits one phone screen for its screenshot (the plan, 50) */
.site .facts { display: grid; grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr); gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
.site .facts dt { color: var(--color-text-muted); }
.site .facts dd { margin: 0; font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
@media (min-width: 360px) { .site .facts { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: var(--space-3) var(--space-7); } }

/* "test only": the two probes, apart from the drawn guard */
.site .card.test { border-style: dashed; border-width: var(--line-dashed); border-color: var(--color-btn-line); }
.site .acts.col { flex-direction: column; align-items: stretch; }

/* a pick among several: plain buttons, 8 px apart (the floor: 44 px, 8 px apart) */
.site .picks { display: flex; flex-wrap: wrap; gap: var(--gap-tap); margin-top: var(--space-6); }
.site .picks .btn { flex: 1 1 auto; }
.site .picks .btn[aria-pressed="true"] { background: var(--color-tint); border: var(--line-2) solid var(--color-accent); color: var(--color-link); font-weight: var(--font-weight-semibold); }

.site .note { margin-top: var(--space-6); flex-direction: column; gap: var(--space-2); } /* the kit's note is a row (an icon, then words): here, lines over each other */
.site .status { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }

/* the results card: the one to screenshot */
.site .card.results { border-width: var(--line-2); border-color: var(--color-accent); }
.site .results .stamp { margin-top: var(--space-6); color: var(--color-text-muted); overflow-wrap: anywhere; }

/* the home page's list of tests */
.site .tests { display: flex; flex-direction: column; gap: var(--space-8); }
.site .tests .acts { flex-direction: column; align-items: stretch; }

/* /qr on the laptop: the QR big and centred */
.site .qrbox { margin: var(--space-6) auto 0; width: min(420px, 100%); padding: var(--space-9); border-radius: var(--radius-9); background: var(--color-surface); border: var(--line-1) solid var(--color-line); }
.site .qrbox svg, .site .qrbox img { display: block; width: 100%; height: auto; }
.site .qrlink { text-align: center; overflow-wrap: anywhere; font-weight: var(--font-weight-medium); margin-top: var(--space-6); }
.site ol.steps { list-style: decimal; padding-left: var(--space-11); }
.site ol.steps li + li { margin-top: var(--space-3); }