/* Scoped to the Try it page. */
.try-page .try-intro { padding-block: 3rem 2.5rem; }
.try-page h1 { font-size: clamp(2.8rem, 6vw, 4.25rem); line-height: 1.05; }
.try-page h1 em { color: var(--accent); }
.try-page .eyebrow { color: var(--muted); margin-bottom: 1.25rem; }
.live-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; margin-top: 1.5rem; padding: .85rem 1rem; border: 1px solid var(--accent); background: var(--accent-surface); max-width: 48rem; }
.live-status span:last-child { color: var(--muted); }
.status-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); align-self: center; flex: none; }

.try-layout { display: grid; gap: 2.5rem; padding-block: 2.5rem 3rem; border-top: 1px solid var(--line); }
.try-layout > * { min-width: 0; }
.try-form h2, .try-result h2, .try-rules h2, .try-switch h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; margin-bottom: 1.5rem; }
.field { margin-bottom: 1.5rem; }
.field label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .5rem; }
.try-form textarea, .try-form select { display: block; width: 100%; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--text); font: inherit; opacity: 1; }
.try-form textarea { resize: vertical; min-height: 11rem; }
.try-form textarea:disabled, .try-form select:disabled { cursor: not-allowed; color: var(--muted); }
.try-form textarea::placeholder { color: var(--muted); opacity: 1; }
.field p { margin-top: .5rem; color: var(--muted); font-size: .875rem; }
.field-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.field-row span:last-child { white-space: nowrap; }
.field.check { display: flex; align-items: flex-start; gap: .75rem; }
.field.check input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--accent); }
.field.check label { font-weight: 400; margin: 0; }
.try-button { min-height: 3.125rem; padding: .8rem 1.6rem; background: var(--accent); color: var(--button-text); font: 600 1rem var(--body-font); border: 1px solid var(--accent); border-radius: 0; }
.try-button:disabled { background: transparent; color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.button-note { margin-top: .75rem; color: var(--muted); font-size: .875rem; }

.try-result .mock-label { margin-bottom: 1.25rem; }
.result-skeleton { background: var(--panel); border: 1px solid var(--line); padding: 1.5rem; }
.skeleton-item + .skeleton-item { margin-top: 1.3rem; }
.skeleton-item h3 { font: 700 .9375rem/1.5 var(--body-font); margin-bottom: .4rem; }
.skeleton-item .empty { color: var(--muted); padding: .85rem 1rem; border: 1px dashed var(--line); }
.skeleton-item.unknowns { padding-top: 1.3rem; border-top: 1px solid var(--line); }
.skeleton-item.unknowns h3 { color: var(--accent); }
.try-result .trust-note { margin-top: 1.25rem; }

.try-rules, .try-switch { padding-block: 2.5rem 3rem; border-top: 1px solid var(--line); }
.try-switch .method-list { max-width: 48rem; }
.try-switch a { color: var(--accent); text-underline-offset: .2em; }

@media (min-width: 56rem) {
  .try-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}

@media (max-width: 39.99rem) {
  .try-form select { font-size: .875rem; padding-inline: .75rem; }
}