/* editor-json — chrome. Reuses the wireon design tokens (see wireon-hub
   assets/hub.css) so the editor looks native inside any host iframe. */

:root {
  --ink: #000000;
  --paper: #FFFFFF;
  --ink-90: #1B1B1B;
  --ink-60: #727272;
  --ink-30: #AFAFAF;
  --ink-15: #D8D8D8;
  --ink-08: #E4E4E4;
  --ink-04: #F2F2F2;
  --ink-02: #F9F9F9;

  --fg-1: var(--ink);
  --fg-2: var(--ink-60);
  --fg-3: var(--ink-30);
  --bg-1: var(--paper);
  --rule-soft: var(--ink-08);

  --ok: #0a7d35;
  --err: #b00020;

  --font-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --gutter: 20px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --dur: 160ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: 14px;
}

button { font-family: inherit; }

/* ---------- layout ---------- */

.app { display: flex; flex-direction: column; height: 100%; }

.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  border-bottom: 1px solid var(--ink);
  flex-wrap: wrap;
}
.title { font-weight: 800; letter-spacing: -0.01em; font-size: 15px; margin: 0; }
.spacer { flex: 1 1 auto; }

.dirty {
  display: none; align-items: center; gap: 6px;
  color: var(--fg-2); font-weight: 700; font-size: 12px;
}
.dirty.show { display: inline-flex; }
.dirty::before { content: "●"; color: var(--err); }

.error-count {
  display: none; color: var(--err); font-weight: 700; font-size: 12px;
  padding: 2px 8px; border: 1px solid var(--err); border-radius: 2px;
  background: var(--paper); cursor: pointer; font-family: inherit;
}
.error-count.show { display: inline-block; }
.error-count:hover { background: var(--err); color: var(--paper); }

.search {
  border: 1px solid var(--ink-15); padding: 6px 8px; font-size: 13px;
  min-width: 160px; background: var(--paper); color: var(--ink);
}
.search:focus { outline: 2px solid var(--ink); outline-offset: -1px; }

.breadcrumb {
  padding: 6px var(--gutter); border-bottom: 1px solid var(--rule-soft);
  color: var(--fg-2); font-family: var(--font-mono); font-size: 12px;
  white-space: nowrap; overflow-x: auto;
}
.breadcrumb.hide { display: none; }

.workspace { flex: 1 1 auto; overflow: auto; padding: var(--gutter); }

/* ---------- buttons ---------- */

.btn {
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--paper); color: var(--ink); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--ink-90); }
.btn-icon { padding: 2px 8px; font-weight: 700; line-height: 1.4; }
.btn-add { border-style: dashed; font-weight: 700; }
.btn-danger:hover { background: var(--err); border-color: var(--err); color: var(--paper); }
.actions { display: inline-flex; gap: var(--sp-2); }
.actions.hide { display: none; }

/* ---------- nodes / groups ---------- */

.node { margin: 0 0 var(--sp-2); }
.node-group {
  border: 1px solid var(--ink-15); border-left: 3px solid var(--ink);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  background: var(--ink-02);
}
.node-summary {
  cursor: pointer; font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: var(--sp-2);
}
.node-title { font-weight: 700; }
.node-desc { margin: 2px 0 var(--sp-2); color: var(--fg-2); font-size: 12px; }
.node-badge {
  background: var(--ink); color: var(--paper); font-size: 11px;
  padding: 0 6px; border-radius: 8px; font-weight: 700;
}
.node-extra { border-left-color: var(--ink-30); background: var(--ink-04); margin-top: var(--sp-3); }
.node-extra-summary .node-title { color: var(--fg-2); }

.oneof-bar { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.oneof-label { font-size: 12px; font-weight: 700; color: var(--fg-2); }
.inp-oneof { max-width: 240px; }

.node-cond { border-left: 3px dashed var(--ink-30); padding-left: var(--sp-3); margin: var(--sp-2) 0; }

.node-error {
  border: 1px solid var(--err); border-left: 3px solid var(--err);
  background: #fdecef; color: var(--err);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  word-break: break-word;
}

.array-items { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.array-item { display: flex; gap: var(--sp-2); align-items: flex-start; }
.array-item > .node, .array-item > .field { flex: 1 1 auto; }
.item-controls { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.array-add { margin-top: var(--sp-2); }

/* ---------- fields ---------- */

.field { margin-bottom: var(--sp-3); }
.field-head { display: flex; align-items: baseline; gap: 4px; margin-bottom: 3px; }
.field-label { font-weight: 600; font-size: 13px; }
.req-star { color: var(--err); font-weight: 800; }
.field-desc { margin: 3px 0 0; color: var(--fg-2); font-size: 12px; }
.field-error { margin: 3px 0 0; color: var(--err); font-size: 12px; min-height: 0; }
.field.has-error .inp { border-color: var(--err); }

.inp {
  width: 100%; max-width: 520px; border: 1px solid var(--ink-15);
  padding: 6px 8px; font-size: 13px; font-family: inherit;
  background: var(--paper); color: var(--ink);
}
textarea.inp { min-height: 72px; resize: vertical; font-family: var(--font-mono); }
.inp:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
select.inp { max-width: 260px; }

.bool { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.bool-text { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); }

.null-control { display: inline-flex; align-items: center; gap: var(--sp-2); }
.null-control .inp { max-width: 120px; color: var(--fg-2); font-family: var(--font-mono); font-style: italic; }

/* schemaless rows */
.sl-keybar { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: 4px; }
.inp-key { max-width: 220px; font-weight: 600; }
.inp-type { max-width: 110px; }
.sl-container { border-left: 2px solid var(--ink-15); padding-left: var(--sp-2); }

/* ---------- source view ---------- */

.source { display: none; flex-direction: column; gap: var(--sp-2); }
.source.show { display: flex; }
.form.hide { display: none; }
#source-text {
  width: 100%; min-height: 60vh; font-family: var(--font-mono); font-size: 13px;
  border: 1px solid var(--ink-15); padding: var(--sp-3); resize: vertical;
  background: var(--paper); color: var(--ink);
}
.source-error { color: var(--err); font-size: 13px; font-weight: 600; }

/* ---------- standalone + banner ---------- */

.standalone {
  display: none; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  padding: var(--sp-3) var(--gutter);
  border-bottom: 1px solid var(--rule-soft); background: var(--ink-02);
}
.standalone.show { display: flex; }
.standalone label { font-size: 12px; font-weight: 700; color: var(--fg-2); }
.standalone input[type=file] { font-size: 12px; }
.file-field { display: inline-flex; flex-direction: column; gap: 2px; }

.banner {
  display: none; padding: var(--sp-2) var(--gutter); font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--rule-soft);
}
.banner.show { display: block; }
.banner.error { background: #fdecef; color: var(--err); }
.banner.ok { background: #eaf7ee; color: var(--ok); }
.banner.info { background: var(--ink-04); color: var(--fg-1); }

/* ---------- Phase B: form-view UX ---------- */

/* Clickable breadcrumb segments (B3). */
.breadcrumb .crumb {
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--fg-2); font-weight: 600;
}
.breadcrumb .crumb:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb .crumb:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Group Copy/Paste cluster, kept out of the disclosure toggle (B9). */
.group-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.btn-mini {
  border: 1px solid var(--ink-15); background: var(--paper); color: var(--fg-2);
  padding: 1px 6px; font-size: 11px; font-weight: 700; cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.btn-mini:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Reset-to-default affordance on primitive fields (B5). */
.btn-reset { margin-left: auto; line-height: 1; }

/* Drag-to-reorder handle + drop target (B7). */
.drag-handle {
  cursor: grab; user-select: none; color: var(--fg-3); font-weight: 700;
  line-height: 1.2; text-align: center; padding: 2px 4px;
}
.drag-handle:active { cursor: grabbing; }
.array-item.drag-over { outline: 2px dashed var(--ink); outline-offset: 2px; }