@layer components {
  .checker-form {
    display: grid;
    gap: var(--space-2);
    margin-block: var(--space-4);
  }

  .checker-form label {
    color: var(--color-ink-muted);
    font-weight: bold;
  }

  .checker-form__hint {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .checker-form__hint summary {
    cursor: pointer;
    color: var(--color-accent);
  }

  .checker-form__hint ul {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding-left: var(--space-4);
  }

  /* A monospace sample at the body size looks oversized beside it, and these
     samples sit inline in a sentence rather than in a block of code. */
  .checker-form__hint code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--color-ink);
  }

  .checker-form textarea {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-2);
    resize: vertical;
  }

  .checker-form input[type="submit"] {
    justify-self: start;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-accent-ink);
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
  }

  .checker-results {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
  }

  .checker-results > h3 {
    margin-bottom: 0;
  }

  .checker-violations {
    border: 1px solid var(--color-danger);
    background: var(--color-danger-surface);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
  }

  .checker-violations ul,
  .checker-advisories ul {
    margin-top: var(--space-2);
    padding-left: var(--space-4);
  }

  .checker-advisories ul {
    color: var(--color-ink-muted);
  }

  .checker-meter__label {
    font-variant-numeric: tabular-nums;
  }

  .checker-meter__flag {
    margin-left: var(--space-2);
    color: var(--color-danger);
    font-weight: 700;
  }

  .checker-meter__track {
    height: var(--space-2);
    margin-top: var(--space-1);
    background: var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  /* The fill is the power the deck has spent, so it reads in aether until it
     passes the budget, where danger takes over from measurement. */
  .checker-meter__fill {
    height: 100%;
    width: var(--meter-fill);
    background: var(--color-aether);
  }

  .checker-meter--over .checker-meter__fill {
    background: var(--color-danger);
  }

  .checker-meter__source {
    margin-top: var(--space-1);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  /* Sort headers are buttons, not links: the re-order happens in place. */
  .checker-table th button {
    font: inherit;
    font-family: var(--font-display);
    color: var(--color-ink);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .checker-table th button:hover {
    text-decoration: underline;
  }

  .checker-table th[aria-sort] button {
    color: var(--color-accent);
  }

  /* Share sits just after the heading rather than at the far edge of a wide
     screen, where it reads as belonging to nothing. Wraps to a second line
     once the minted link needs the room. */
  .checker-results__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
  }

  /* The heading sits in a row beside the share link, where space below it
     only deepens the header. */
  .checker-results__header h2 {
    margin-bottom: 0;
  }

  .checker-share__link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .checker-share__link label {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .checker-share__link input {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-2);
    min-width: 22ch;
  }

  /* Quiet text actions: the page's filled button belongs to Check deck, the
     thing people came here to do. */
  .checker-share input[type="submit"],
  .checker-share__link button {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
  }

  .checker-changes,
  .checker-elsewhere {
    margin-top: var(--space-6);
  }

  .checker-changes ul {
    margin-top: var(--space-2);
    padding-left: var(--space-4);
  }

  .checker-tag {
    display: inline-block;
    margin-left: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0 var(--space-1);
  }
}