/* Data Format Converter. Tokens, header and footer come from the site stylesheet. */
.narrow.wide { max-width: 1000px; }
.intro h1 { font-size: 22px; margin: 0 0 12px; }
.intro code, .muted code { font-family: var(--mono); font-size: .9em; background: var(--head); padding: 0 4px; border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#text {
  display: block; width: 100%; min-height: 160px; resize: vertical;
  padding: 10px 12px; margin: 16px 0 12px;
  font: 13px/1.5 var(--mono); tab-size: 4;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text);
}
#text:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.controls { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }

.from, .to { display: inline-flex; align-items: center; gap: 8px; }
.from select, .to select {
  font: inherit; padding: 6px 8px; min-width: 150px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--text);
}
.from select:focus-visible, .to select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.swap { font-size: 16px; line-height: 1; padding: 6px 10px; margin: 0 -6px; }
.swap:disabled { opacity: .4; cursor: default; }

.assoc { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.assoc:has(input:disabled) { color: var(--muted); cursor: default; }

.controls button[type=submit] { margin-left: auto; background: var(--accent); color: #fff; border-color: transparent; padding: 7px 16px; font-weight: 600; }
.keys { font-size: 11px; opacity: .75; }
kbd { font: inherit; font-family: var(--mono); }

.result { margin: 16px 0; }
.result .error { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--err-bg); color: var(--err); white-space: pre-wrap; overflow-wrap: anywhere; }
.code { position: relative; }
.code pre {
  margin: 0; padding: 12px 14px; max-height: 70vh; overflow: auto;
  font: 13px/1.5 var(--mono); tab-size: 4;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.copy { position: absolute; top: 8px; right: 8px; font-size: 12px; padding: 3px 10px; }
form.busy .result { opacity: .6; }

.notes { padding-left: 18px; margin: 0 0 12px; }
.notes li + li { margin-top: 4px; }
.notes strong { color: var(--text); font-weight: 600; }

@media (max-width: 560px) {
  .from, .to { flex: 1; }
  .from select, .to select { flex: 1; min-width: 0; }
  .controls button[type=submit] { margin-left: 0; width: 100%; }
  .keys { display: none; }
}