/* Viewer-only components; tokens, base and shared components come from site.css. */
@layer components {
  .controls { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); }
  .inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-5); }
  .controls label { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
  .controls label span { font-weight: 700; }
  .controls small { color: var(--muted); }
  .controls input { max-inline-size: 100%; padding-block: var(--space-2); font: inherit; }
  .button:disabled { opacity: 0.6; cursor: wait; }
  #status { margin-block-end: 0; }
  #status.error { color: var(--error); }
  .result-heading { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
  #mirador { block-size: min(82vh, 900px); min-block-size: 520px; position: relative; border: 1px solid var(--line); }
  .controls .lead { margin-block-end: var(--space-5); max-inline-size: 60ch; }
  .rule { margin-block: var(--space-4) 0; }
}