/* Layout: Bootstrap navbar, then one view at a time. Home is a grid of square tool tiles; every tool is a set of Bootstrap cards (header, body, status footer). */
:root {
  --ok: #198754; --bad: #dc3545; --mid: #997404;
  --t-key: #1c55b8; --t-str: #1b7a45; --t-num: #a85a00; --t-bool: #8438a8; --t-null: #7a8594;
}
[data-bs-theme="dark"] {
  --ok: #75b798; --bad: #ea868f; --mid: #ffda6a;
  --t-key: #7fb0ff; --t-str: #7fd39b; --t-num: #f0a95a; --t-bool: #cf93ee; --t-null: #8693a3;
}
html, body { height: 100%; }
body { display: flex; flex-direction: column; background: var(--bs-body-bg); color: var(--bs-body-color); }
.app { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .75rem; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .75rem; }
.view.scroll { overflow: auto; padding: 2px .75rem; margin: -2px -.75rem; }
.narrow { max-width: 860px; width: 100%; flex: none; display: flex; flex-direction: column; gap: .75rem; }
.tool-head { display: flex; align-items: center; gap: .25rem .75rem; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.grow { flex: 1 1 240px; width: auto; min-width: 0; }

/* home tiles */
.tile { aspect-ratio: 1; transition: border-color .15s, box-shadow .15s; }
.tile:hover { border-color: var(--bs-primary); box-shadow: var(--bs-box-shadow); }
.tile:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; }
.tile .card-body { display: flex; flex-direction: column; gap: .25rem; }
.tile .glyph {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 3.5rem; margin-bottom: .5rem;
  font: 500 clamp(1.5rem, 4vw, 2.5rem)/1 var(--bs-font-monospace);
  color: var(--bs-link-color); background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius);
}
.tile .cat { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.tile .name { font-weight: 600; font-size: 1.05rem; color: var(--bs-body-color); line-height: 1.25; }
.tile .desc { font-size: .85rem; color: var(--bs-secondary-color); line-height: 1.35; }

/* panes (cards) */
.panes { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pane { min-width: 0; min-height: 0; overflow: hidden; }
.pane.fixed { flex: none; }
.pane .card-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-height: 46px; padding-block: .4rem; }
.pane .card-header .actions { margin-left: auto; display: flex; gap: .35rem; flex-wrap: wrap; }
.pane-title { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.pane .body { flex: 1; min-height: 0; display: flex; }
.pane.fixed .body { flex: none; height: 170px; }
.pane textarea, .pane pre, .tree {
  flex: 1; min-width: 0; margin: 0; padding: .75rem 1rem; border: 0; background: transparent; color: var(--bs-body-color);
  font: 13px/1.55 var(--bs-font-monospace); tab-size: 4; overflow: auto; resize: none;
}
.pane textarea.nowrap, .pane pre { white-space: pre; }
.pane textarea:focus-visible, .pane pre:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.pane.drag { border-color: var(--bs-primary); outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.filebtn:focus-within { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.foot {
  font-size: .8rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums;
  min-height: 34px; padding-block: .35rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.ok { color: var(--ok); font-weight: 600; }
.err { color: var(--bad); font-weight: 600; }
.mid { color: var(--mid); font-weight: 600; }
.lbl { flex: none; width: 8rem; font-size: .85rem; color: var(--bs-secondary-color); }
.val { flex: 1; min-width: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
#pw-len-val { font-family: var(--bs-font-monospace); width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* json */
.k { color: var(--t-key); } .s { color: var(--t-str); } .n { color: var(--t-num); }
.b { color: var(--t-bool); } .z { color: var(--t-null); }
.error { flex: 1; padding: 1rem; overflow: auto; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.error strong { color: var(--bad); font-size: 1rem; }
.error code {
  font: 13px/1.5 var(--bs-font-monospace); background: var(--bs-danger-bg-subtle); color: var(--bs-body-color);
  padding: .5rem .65rem; border-radius: var(--bs-border-radius-sm); max-width: 100%; overflow-x: auto; white-space: pre; display: block;
}
.error p { margin: 0; color: var(--bs-secondary-color); max-width: 60ch; }
.empty { flex: 1; padding: 1rem; color: var(--bs-secondary-color); }
.tree details > summary { cursor: pointer; list-style: none; white-space: nowrap; }
.tree details > summary::-webkit-details-marker { display: none; }
.tree details > summary::before { content: "▸"; display: inline-block; width: 1.2em; color: var(--bs-secondary-color); }
.tree details[open] > summary::before { content: "▾"; }
.tree .kids { margin-left: .55em; padding-left: 1.1em; border-left: 1px solid var(--bs-border-color); }
.tree .leaf { padding-left: 1.2em; white-space: nowrap; }
.tree .meta, .tree .i { color: var(--bs-secondary-color); }
.tree .more { margin: .25rem 0 .25rem 1.2em; }

[hidden] { display: none !important; }

@media (max-width: 767.98px) {
  html, body { height: auto; }
  .view.scroll { overflow: visible; }
  .panes { grid-template-columns: 1fr; }
  .panes .body { height: 42vh; min-height: 220px; }
  .lbl { width: 100%; }
  .tile .desc { display: none; }
}