/* Page chrome for /demos/unselect2. OURS, not vendored — the component's own
   two files (unselect2.css, unselect2.js) are byte-identical copies pinned by a
   drift guard, so not one line of page styling may be added to them.
   Upstream makes the same split for the same reason: unselect2.css carries the
   component, demo.css carries the page around it.

   EVERY VALUE COMES FROM A HOST TOKEN. pigfox.com already publishes --surface,
   --surface-alt, --ink, --ink-muted, --accent, --on-accent, --hairline and
   --error, and those happen to be the exact values the component falls back to
   when no host defines them. That is why the fields already looked right before
   this file existed, and it is why reconciling with the shell here means using
   the shell's tokens rather than restating upstream's literals. No hardcoded
   colors below.

   Everything is scoped under .us2-demo so nothing can leak onto another page. */

/* The demo column. Upstream's page is 42rem wide and that measure is a large
   part of why it reads as a compact demo rather than an article; the pigfox
   shell column is much wider. */
.us2-demo {
  max-width: 42rem;
}

.us2-demo__lede {
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------- form */

.us2-demo__form {
  display: grid;
  gap: 1.5rem;
}

.us2-demo__field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.us2-demo__optional {
  font-weight: 400;
  color: var(--ink-muted);
}

.us2-demo__error {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--error);
}

/* THE SUBMIT BUTTON, and it is the reason this file exists at all.
   The shell's .btn is --surface-alt on --surface: two greys that differ by
   almost nothing on the dark theme, so the control read as a faint rectangle
   rather than a button. Upstream's is a solid accent pill, and that is what a
   submit control on this page should be. Stated as its own class rather than by
   overriding .btn, so no other page's buttons move. */
.us2-demo__submit {
  justify-self: start;
  padding: 0.8rem 1.6rem;
  font: inherit;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 980px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.us2-demo__submit:hover {
  background: var(--accent-hover);
}

.us2-demo__submit:focus-visible {
  outline: 3px solid var(--focus-ring-anchor);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------ results */

.us2-demo__results {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface-alt);
  border-radius: 18px;
}

.us2-demo__results h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.us2-demo__results dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  margin: 0;
}

.us2-demo__results dt {
  font-weight: 600;
  color: var(--ink-muted);
}

.us2-demo__results dd {
  margin: 0;
}

/* ----------------------------------------------------------------- footnote */

.us2-demo__footnote {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.us2-demo kbd {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  border-radius: 5px;
}