/* json-schema-to-sample-data — style.css (RT-AI-030). Tokens only. */
#jss { display: flex; flex-direction: column; gap: 1rem; }
.jss-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 860px) { .jss-grid { grid-template-columns: 1fr 1fr; } }
.jss-pane { display: flex; flex-direction: column; gap: .4rem; }
.jss-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 40px; }
.jss-title { font-size: .8rem; font-weight: 600; color: var(--rt-ink-soft, #2A3340); }
.jss-actions { display: flex; gap: .4rem; }
.jss-input, .jss-output {
  width: 100%; min-height: 280px; padding: .75rem; font-size: .9rem; line-height: 1.6;
  font-family: var(--rt-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);
  border: 1px solid var(--rt-border, #d8dce2); border-radius: 10px; resize: vertical;
  background: var(--rt-card, #fff); color: var(--rt-ink, #14213d); tab-size: 2;
}
.jss-output { background: var(--rt-bg, #f7f6f3); }
.jss-input:focus-visible, .jss-output:focus-visible { outline: 2px solid var(--rt-accent, #e8622a); outline-offset: 2px; }
.jss-btn {
  min-height: 36px; padding: .35rem .8rem; border: 1px solid var(--rt-border, #d8dce2);
  border-radius: 8px; background: var(--rt-accent, #e8622a); color: #fff; font-weight: 600;
  font-size: .82rem; cursor: pointer;
}
.jss-btn:hover { filter: brightness(1.05); }
.jss-btn:disabled { opacity: .5; cursor: not-allowed; }
.jss-btn:focus-visible { outline: 2px solid var(--rt-ink, #14213d); outline-offset: 2px; }
.jss-error {
  padding: .6rem .75rem; border-radius: 8px; font-size: .85rem; line-height: 1.5;
  border: 1px solid var(--rt-border, #d8dce2); background: var(--rt-bg, #f7f6f3);
  color: var(--rt-ink, #14213d);
}
.jss-error[hidden] { display: none; }
.jss-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }