/* Public pages: the landing page, the sample record and the live try-out. Kept apart from style.css, which is
   part of the student editor's build hash. */
body.site main { max-width: 64rem; }
body.site header.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .75rem 1rem; max-width: 64rem; margin: 0 auto; }
body.site header.top .brand { font-weight: 700; font-size: 1.15em; text-decoration: none; color: inherit; }
body.site header.top nav { display: flex; gap: 1rem; flex-wrap: wrap; }
body.site header.top nav a { color: inherit; }
.hero { padding: 2rem 0 1rem; }
.hero h1 { font-size: 2.2em; line-height: 1.15; margin: 0 0 .75rem; }
.hero p.lede { font-size: 1.2em; max-width: 40rem; margin: 0 0 1.25rem; }
.cta { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
a.btn.small { padding: .35rem .8rem; font-size: .95em; }
body.site header.top nav a.btn { color: var(--accent-fg); }
a.btn.secondary { background: var(--card); color: var(--fg); border: 1px solid var(--line); }
.hero .note { color: var(--muted); font-size: .95em; margin: .6rem 0 0; }
.door { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--card); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.door label { margin: 0; }
.door input { max-width: 16rem; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.step { border: 1px solid var(--line); border-radius: .75rem; padding: 1rem 1.1rem; background: var(--card); }
.step .n { display: inline-block; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 700; }
.step h3 { margin: .5rem 0 .25rem; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.facts h2 { margin-top: 2rem; }
.facts ul { padding-left: 1.2rem; }
footer.site { max-width: 64rem; margin: 2rem auto; padding: 1rem; border-top: 1px solid var(--line); color: var(--muted); display: flex; gap: 1.25rem; flex-wrap: wrap; }
footer.site a { color: inherit; }

/* try-out */
.try { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
@media (max-width: 60rem) { .try { grid-template-columns: 1fr; } }
.try iframe { width: 100%; height: 34rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--card); }
.side { border: 1px solid var(--line); border-radius: .75rem; background: var(--card); padding: .75rem 1rem; }
.side h2 { margin: .25rem 0 .5rem; font-size: 1.1em; }
.checklist { list-style: none; margin: 0 0 1rem; padding: 0; }
.checklist li { padding: .35rem 0; display: flex; gap: .6rem; align-items: flex-start; }
.checklist li .box { flex: none; width: 1.3rem; height: 1.3rem; border: 2px solid var(--line); border-radius: .3rem; margin-top: .15rem; text-align: center; line-height: 1rem; font-weight: 700; }
.checklist li.done .box { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.checklist li.done .box::after { content: "✓"; }
.live { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: 0 0 .75rem; }
.live dt { color: var(--muted); } .live dd { margin: 0; font-variant-numeric: tabular-nums; }
.side .actions { margin: .5rem 0; }
.try-done { margin: 1rem 0; }
.verdict { font-weight: 700; padding: .4rem .8rem; border-radius: .5rem; display: inline-block; }
.verdict.valid { background: var(--ok); color: var(--bg); } .verdict.invalid { background: var(--bad); color: var(--bg); }