/*
 * parcor.io/verify/demo/ — the demonstration's own rules (G043). The page links tokens.css, fonts.css, site.css
 * and styles.css as every page of the site does, so its header, column, title and footer are theirs; these are
 * the four examples, the one result panel, the note and the link. Existing tokens only: no colour and no face is
 * added. Phone first at 360 px: every target 44 px or more, no text under 16 px, nothing wider than the column —
 * the verifier's output wraps inside it rather than scrolling sideways.
 *
 * Nothing inline: the page is served `style-src 'self'` (OI-39), so this is a file.
 */
.demo-body{padding-block:2rem 3.5rem}
@media (min-width:44rem){.demo-body{padding-block:2.75rem 4rem}}

/* The four examples: one under another on a phone, two by two from 40rem. */
.demo-examples{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media (min-width:40rem){.demo-examples{grid-template-columns:1fr 1fr}}
.demo-example{
  display:flex;align-items:center;width:100%;min-height:2.75rem;padding:.75rem 1rem;
  font-family:inherit;font-size:1rem;line-height:1.4;text-align:left;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink-3);border-radius:0;cursor:pointer;
}
.demo-example:hover{border-color:var(--petrol);color:var(--petrol)}
.demo-example:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.demo-example[aria-pressed="true"]{border-color:var(--petrol);box-shadow:inset 3px 0 var(--petrol)}

/* The result panel: under its label, the sentence, the passed or stopped line, then the verifier's own output. */
.demo-panel{margin-top:1.75rem;border-left:3px solid var(--petrol);padding:.25rem 0 .25rem .75rem}
.demo-state p{margin:0;font-size:1rem}
.demo-label{font-weight:600;color:var(--ink)}
.demo-label[data-state="live"]{color:var(--petrol)}
.demo-status{color:var(--ink-3)}
.demo-result{margin-top:1rem}
.demo-sentence{font-size:1.0625rem;color:var(--ink)}
.demo-checks{margin-top:.5rem;font-size:1rem;color:var(--ink-2)}
.demo-verdict{
  margin:.75rem 0 0;font-family:var(--f-mono);font-size:1rem;line-height:1.5;color:var(--ink-2);
  white-space:pre-wrap;overflow-wrap:anywhere;
}

.demo-note{margin-top:2rem;max-width:var(--measure);font-size:1rem;color:var(--ink-3)}
.demo-more{margin-top:1rem}
.demo-more a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:1rem;color:var(--petrol);font-weight:500;text-underline-offset:3px}

@media (prefers-reduced-motion:no-preference){.demo-example{transition:color .15s ease,border-color .15s ease}}