/* Outdoor lane chrome. editor.css owns the palette variables, the buttons and
   the brand mark; this file is only the layout this page adds — a tool rail, a
   plan canvas, and a right column that stacks four panels rather than tabbing
   between them (an outdoor author reads the checks WHILE editing the mission,
   so hiding one behind the other would be the wrong economy). */

#od-root { display: flex; flex-direction: column; height: 100%; }

#od-menubar {
  display: flex; align-items: center; gap: 6px;
  background: var(--ink2); border-bottom: 1px solid var(--line);
  padding: 4px 8px; flex: 0 0 auto;
}
#od-menubar .od-doc { color: var(--dim); letter-spacing: .1em; padding-right: 10px; }
#od-menubar .od-go { border-color: var(--hot); color: var(--hot); }
#od-menubar .od-go:hover { background: var(--hot); color: var(--ink); }

#od-body { display: flex; flex: 1; min-height: 0; }

/* ---- tool rail ---- */
#od-tools {
  flex: 0 0 150px; overflow-y: auto;
  background: var(--ink2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px; padding: 4px;
}
.od-tool {
  display: flex; align-items: center; gap: 8px;
  text-align: left; border-color: transparent; background: transparent;
  letter-spacing: .08em;
}
.od-tool:hover { background: var(--ink3); }
.od-tool.od-on { background: var(--ink3); border-color: var(--neon2); color: var(--neon); }
.od-tool-key {
  display: inline-block; min-width: 14px; text-align: center;
  color: var(--dim); border: 1px solid var(--line); border-radius: 2px;
  font-size: 10px; padding: 0 2px;
}
.od-tool.od-on .od-tool-key { color: var(--neon); border-color: var(--neon2); }

/* ---- centre ---- */
#od-centre { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
#od-viewbar {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 8px; background: var(--ink2); border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
#od-viewbar label { display: flex; align-items: center; gap: 4px; color: var(--dim); }
#od-readout { color: var(--neon); letter-spacing: .1em; }
#od-canvas { flex: 1; min-height: 0; width: 100%; display: block; cursor: crosshair; }
#od-canvas.panning { cursor: grabbing; }

/* ---- right column ---- */
#od-right {
  flex: 0 0 330px; overflow-y: auto;
  background: var(--ink2); border-left: 1px solid var(--line);
  padding: 6px; display: flex; flex-direction: column; gap: 10px;
}
.od-insp-head {
  color: var(--neon); letter-spacing: .16em; font-weight: bold;
  border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-bottom: 5px;
}
.od-empty { color: var(--dim); line-height: 1.6; }
.od-help { color: var(--dim); font-size: 11px; margin: 2px 0 4px; line-height: 1.4; }

.od-field { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.od-field > span { flex: 0 0 118px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.od-field input[type=text], .od-field input[type=number], .od-field select { flex: 1; min-width: 0; }
.od-field input[type=checkbox] { flex: 0 0 auto; }

.od-json textarea {
  width: 100%; min-height: 84px; resize: vertical;
  background: var(--ink); color: var(--text); border: 1px solid var(--line);
  font: 11px/1.4 "Consolas", "Menlo", monospace; padding: 4px;
}
.od-json textarea.od-badjson { border-color: var(--bad); }

.od-issue { padding: 2px 0; line-height: 1.4; }
.od-issue.od-bad { color: var(--bad); }
.od-issue.od-warn { color: var(--hot); }
.od-issue.od-ok { color: var(--ok); }

.od-lib-row { display: flex; gap: 4px; margin-bottom: 3px; }
.od-lib-row > button:first-child { flex: 1; text-align: left; }
.od-small { flex: 0 0 auto; padding: 3px 6px; }
.od-danger { border-color: var(--bad); color: var(--bad); }
.od-danger:hover { background: var(--bad); color: var(--ink); border-color: var(--bad); }

/* ---- bottom ---- */
#od-bottom {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 3px 8px; background: var(--ink2); border-top: 1px solid var(--line);
}
#od-status { color: var(--neon); letter-spacing: .08em; }
.od-dim { color: var(--dim); text-decoration: none; }
a.od-dim:hover { color: var(--neon); }
.ed-spacer { flex: 1; }

/* ---- toasts ---- */
#od-toasts {
  position: fixed; right: 14px; bottom: 34px; z-index: 90;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.od-toast {
  background: var(--ink3); border: 1px solid var(--line); border-left-width: 3px;
  padding: 6px 12px; max-width: 420px; box-shadow: 0 6px 22px #000a;
  transition: opacity .7s;
}
.od-toast.od-ok { border-left-color: var(--ok); }
.od-toast.od-warn { border-left-color: var(--hot); }
.od-toast.od-bad { border-left-color: var(--bad); }
.od-toast.od-fade { opacity: 0; }