/* The documentation home page's own styles (moved out of index.html so the page needs no inline styles). */

/* ---- Title screen ---- */
.hero { display: grid; gap: 2.5rem; padding: 2.5rem 0 3rem; }
@media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; padding: 4rem 0 4.5rem; } }
.title { display: flex; align-items: center; gap: 0.15em; font-size: clamp(2.8rem, 13vw, 5.6rem); line-height: 0.8; margin: 0 0 1rem; }
/* Two columns from 960px: the title (logo and name, on one line) sizes to its column, about 45% of the screen. */
@media (min-width: 960px) { .title { font-size: min(5.2rem, 6.4vw); } }
.credits { color: var(--dim); margin: 0 0 0.4rem; }
.serial { margin: 0 0 1.5rem; }
.lede { font-size: 1.15rem; color: var(--bright); max-width: 34ch; margin: 0 0 1.75rem; }
/* No lone word on a line of its own: short lines (ledes, rules, headings) are balanced, and longer paragraphs avoid a
   one-word last line. Browsers without text-wrap support simply wrap as before. */
.lede, .credits, .rule, main h2, main h3, .guide-head h1 { text-wrap: balance; }
main p, main li { text-wrap: pretty; }
.install { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; border: 3px double var(--dim); padding: 0.55rem 0.7rem 0.55rem 0.9rem; max-width: 100%; }
.install code { background: none; border: 0; padding: 0; font-size: 0.95rem; }
.install button, .button {
  font: 500 0.8rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg); background: none; border: 1px solid var(--dim); padding: 0.2rem 0.55rem; cursor: pointer; text-shadow: inherit;
}
.install button:hover, .button:hover { background: var(--fg); color: var(--bg); text-shadow: none; }
.commands { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.3rem; }
.commands a::before { content: "> "; }

.transcript { margin: 0; }
/* The scene's name as a title card, and replies as the demo shows them */
.transcript .room-name {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.9rem;
  font: 400 1.6rem/1 var(--pixel); color: var(--bright); text-transform: uppercase; letter-spacing: 0.06em; text-shadow: var(--glow-strong);
}
.transcript .room-name::before, .transcript .room-name::after { content: ""; flex: 1; border-top: 3px double var(--line); }
.transcript .readout { margin-top: 0.1rem; }
.transcript .reply { margin: 0.2rem 0 0; }
.transcript .reply p { margin: 0; }
.transcript .turn:first-of-type .cmd { margin-top: 0.5rem; }
.caption { font-size: 0.85rem; color: var(--dim); margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px dashed var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .transcript .turn { animation: appear 0.35s steps(4) both; animation-delay: calc(var(--i) * 1s + 0.3s); }
  @keyframes appear { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- Docs: exits on the left, text on the right ---- */
.docs { display: grid; gap: 1.5rem; border-top: 3px double var(--line); padding-bottom: 4rem; }
@media (min-width: 960px) { .docs { grid-template-columns: 13rem minmax(0, 1fr); gap: 3.5rem; } }
nav.exits { padding-top: 2rem; font: 400 1.35rem/1.25 var(--pixel); }
nav.exits .label { color: var(--dim); margin: 0 0 0.4rem; }
nav.exits ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 1.2rem; }
@media (min-width: 960px) { nav.exits ol { position: sticky; top: 3.5rem; flex-direction: column; } }
nav.exits a { color: var(--dim); text-decoration: none; white-space: nowrap; }
nav.exits a::before { content: "\00a0\00a0"; }
nav.exits a[aria-current] { color: var(--bright); }
nav.exits a[aria-current]::before { content: ">\00a0"; }
nav.exits a:hover { color: var(--bg); }
main { max-width: 72ch; min-width: 0; }
/* Sections: room to breathe, and a header with a marker and a rule, so long pages are easy to scan. */
section { padding-top: 3.75rem; }
main section > h2 { font-size: 2.6rem; padding-bottom: 0.55rem; border-bottom: 1px dashed var(--line); margin-bottom: 1.25rem; }
main section > h2::before {
  content: ""; display: inline-block; width: 0.32em; height: 0.42em; margin-right: 0.45rem; vertical-align: 0.12em;
  background: var(--dim); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
main h3 { margin-top: 2.25rem; }
.faq h3::before { content: "> "; color: var(--dim); }
/* Parts of the docs, simplest first: a title card with the logo before each group of sections, and a matching
   label in the exits. The logo is a background image and the rule a border, so no extra font or markup is needed. */
.part { margin: 5rem 0 0; }
.part p { margin: 0; }
p.part, div.part > p:first-child {
  display: flex; align-items: center; gap: 0.75rem;
  font: 400 1.7rem/1 var(--pixel); color: var(--bright); text-transform: uppercase; letter-spacing: 0.08em; text-shadow: var(--glow-strong);
}
p.part::before, div.part > p:first-child::before {
  content: ""; flex: none; width: 32px; height: 32px;
  background: url("assets/honeytongue-logo-32.png") center / 32px no-repeat; image-rendering: pixelated;
}
p.part::after, div.part > p:first-child::after { content: ""; flex: 1; border-top: 3px double var(--line); }
.part p.dim { font: 400 0.95rem/1.6 var(--mono); margin-top: 0.6rem; }
.part + section { padding-top: 1.5rem; }
nav.exits li.group { color: var(--dim); font-size: 0.95rem; margin-top: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 959px) { nav.exits li.group { flex-basis: 100%; } }
ol.rubric { margin: 0 0 1rem; padding-left: 2rem; }
ol.rubric li::marker { color: var(--dim); }
/* Same words, different people: lines down the side, characters across the top. */
table.grid { min-width: 40rem; font-size: 0.85rem; }
table.grid caption { caption-side: bottom; text-align: left; color: var(--dim); font-size: 0.85rem; padding-top: 0.6rem; }
table.grid th, table.grid td { padding-right: 0.75rem; }
table.grid tbody th { text-transform: none; letter-spacing: 0; font-size: 0.8rem; width: 30%; min-width: 10rem; }
table.grid tbody th q { display: block; color: var(--fg); font-style: italic; font-size: 0.85rem; margin-top: 0.2rem; }
table.grid thead th .dim { text-transform: none; letter-spacing: 0; }
table.grid td .dim { display: block; }
/* Verdicts in the grid: the words code returns, coloured by verdict. Unconvinced, the most common, is plain text,
   so the offended and convinced cells stand out. */
table.grid td .chip { margin: 0 0 0.25rem; text-transform: uppercase; }
table.grid td .chip.v-unconvinced { border-color: transparent; padding-left: 0; }
/* The Verdicts table: each verdict in its colour, with a matching rule, and the demo's labels underneath. */
code.verdict-code { color: var(--mark); border-color: var(--mark); font-weight: 600; }
tr[class*="v-"] td:first-child { border-left: 3px solid var(--mark); padding-left: 0.6rem; }
table caption.labels { caption-side: bottom; text-align: left; color: var(--dim); font-size: 0.85rem; padding-top: 0.75rem; }
table caption.labels .chip { font-size: 0.95rem; margin: 0.15rem 0.25rem 0.15rem 0; }

/* How marked-up story text looks on screen */
.rendered { background: var(--screen); border: 1px dashed var(--line); padding: 0.55rem 0.9rem; margin: -0.6rem 0 1.4rem; }
.rendered-label { color: var(--dim); font: 400 1.05rem/1 var(--pixel); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.3rem; }

footer::before {
  content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 0.6rem; vertical-align: -4px;
  background: url("assets/honeytongue-logo-32.png") center / 20px no-repeat; image-rendering: pixelated;
}

/* A screenshot in the docs */
.shot { display: block; max-width: 100%; height: auto; border: 3px double var(--line); image-rendering: pixelated; }

/* The example transcript's timing (--i) and meter readings, as classes rather than style attributes. */
.t0 { --i: 0; } .t1 { --i: 1; } .t2 { --i: 2; } .t3 { --i: 3; }
.meter.s0 { --score: 0%; } .meter.s40 { --score: 40%; } .meter.s97 { --score: 97%; }
/* The showcase grid's Try it links, one per cell, under the verdict. */
/* position: relative keeps the hidden screen-reader text inside the link, and so inside the scrolling table. */
.grid .try { display: block; position: relative; margin-top: 0.3rem; font-size: 0.85em; }
/* Harry's threshold, 2.4 of 4 (test/pages.test.js keeps it equal to his preset). */
.transcript .meter { --mark: 60%; }

/* The guide (docs/guide/): its heading, each section's rule, and the collapsible evidence (plain <details>, no script). */
/* A link in the status bar (the guide's way back to the docs) takes the bar's own colour, which meets contrast on it. */
.status .extra a { color: inherit; }
.guide-head { padding: 2rem 0 1.5rem; max-width: 72ch; }
.guide-head h1 { font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: 1; margin: 0.25rem 0 0.75rem; }
.guide-head .lede { max-width: none; margin-bottom: 1rem; }
.rule { font-size: 1.1rem; }
.brief li, .checklist li { margin-bottom: 0.5rem; }
/* The checklist's empty boxes, for the eye only: screen readers hear the list as a list. */
.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 4ch; }
.checklist li::before { content: "[ ]"; content: "[ ]" / ""; position: absolute; left: 0; color: var(--dim); }
.copy-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem; }
blockquote.from-story { margin: 0.5rem 0 1rem; padding-left: 0.9rem; border-left: 3px solid var(--line); color: var(--bright); }
details.evidence { border: 1px dashed var(--line); padding: 0.6rem 0.9rem; margin: 1.25rem 0; }
details.evidence > summary { cursor: pointer; font-weight: 600; color: var(--bright); }
details.evidence[open] > summary { margin-bottom: 0.4rem; }
details.evidence ul { margin: 0; padding-left: 1.2rem; }