/* the raw save browser */

.back { display: inline-block; margin-bottom: 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.back:hover { color: var(--accent); text-decoration: none; }

.raw-meta { margin-top: 12px; gap: 6px; font-family: var(--mono); font-size: 11px; }
.raw-meta code { color: var(--faint); }

.raw-problems { margin: 0; padding-left: 18px; font-size: 13px; }
.raw-problems li { margin-top: 4px; }
.raw-problems .muted { margin-left: 10px; }

/* one key's value, as a tree or as the JSON behind it */

.json-tree, .json-text {
  max-height: 72vh;
  overflow: auto;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
}
.json-text { margin: 0; white-space: pre; color: var(--muted); }

.json-branch > summary { cursor: pointer; list-style: none; color: var(--muted); }
.json-branch > summary::-webkit-details-marker { display: none; }
.json-branch > summary::before { content: "▸"; display: inline-block; width: 12px; color: var(--faint); }
.json-branch[open] > summary::before { content: "▾"; }
.json-branch > summary:hover { color: var(--text); }
.json-children { margin-left: 5px; padding-left: 10px; border-left: 1px solid var(--rule); }
.json-leaf { padding-left: 12px; }

.json-key { color: var(--muted); }
.json-key::after { content: ":"; margin-right: 6px; color: var(--faint); }
.json-count { color: var(--faint); }
.json-val.num { color: var(--accent); }
.json-val.bool, .json-val.null, .json-val.empty { color: var(--flag); }

.json-scalars { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); padding-left: 12px; }
.json-item { display: flex; gap: 6px; min-width: 0; }
.json-item i { font-style: normal; color: var(--faint); }
.json-item .json-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }