/* nlir workspace — an editor-first layout on the shared theme (../theme.css):
   expression and result own the main column; config, messages and bindings live
   in a ruled inspector rail. */

.ws {
  display: grid; grid-template-columns: minmax(0, 1fr) 23rem;
  min-height: calc(100vh - var(--bar-h));
}
@media (max-width: 980px) { .ws { grid-template-columns: 1fr; } }
.main { padding: 1.6rem clamp(1rem, 3vw, 2.2rem) 4rem; min-width: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.inspector { border-left: 1px solid var(--rule); background: var(--paper-2); min-width: 0; }
@media (max-width: 980px) { .inspector { border-left: 0; border-top: 1px solid var(--rule); } }
.inspector section { padding: 1.1rem 1.2rem 1.2rem; border-bottom: 1px solid var(--rule); }
.main > section { min-width: 0; }

h2 {
  font: 600 .72rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin: 0 0 .7rem; display: flex; align-items: center; gap: .6rem;
}
h2 .hint { font: 500 .74rem/1 var(--mono); text-transform: none; letter-spacing: 0; color: var(--muted); opacity: .8; }
h2 .aside-actions { margin-left: auto; display: flex; gap: .35rem; }
.spacer { flex: 1; }

/* ---- editor --------------------------------------------------------------- */
.expreditor { width: 100%; }
#expr, .CodeMirror {
  display: block; width: 100%; min-height: 6.5rem;
  font: 400 1.02rem/1.6 var(--mono); color: var(--console-ink);
  background: var(--console); border: 1px solid var(--console-rule); border-radius: var(--r);
  padding: .8rem 1rem; resize: vertical;
}
.CodeMirror { height: auto; padding: .55rem .6rem; }
.CodeMirror-scroll { min-height: 5.4rem; }
.CodeMirror-focused, #expr:focus { outline: none; border-color: color-mix(in srgb, var(--syn-op) 55%, var(--console-rule)); }
.CodeMirror-placeholder { color: var(--console-muted) !important; }
.CodeMirror-cursor { border-left: 2px solid var(--syn-op); }
.cm-fat-cursor .CodeMirror-cursor, .CodeMirror-fat-cursor div.CodeMirror-cursor { background: color-mix(in srgb, var(--syn-op) 55%, transparent); border: 0; }
.CodeMirror-selected { background: rgba(92, 198, 168, .18); }
.CodeMirror-focused .CodeMirror-selected { background: rgba(92, 198, 168, .28); }
.CodeMirror-dialog { background: var(--console-2); color: var(--console-ink); }

.exprctl { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .7rem; }
.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: .55rem .8rem; font: 500 .8rem/1 var(--mono); color: var(--muted); }
.seg button + button { border-left: 1px solid var(--rule-strong); }
.seg button.on { background: var(--ink); color: var(--paper); }
button.ghost { font-size: .78rem; padding: .4rem .65rem; color: var(--ink-2); }
.vimtoggle { font-family: var(--mono) !important; }
.vimtoggle.on { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.vimtoggle[disabled] { opacity: .45; cursor: not-allowed; }

/* live det preview (bd-970e05): quiet result-so-far under the editor */
.livepreview { margin-top: .55rem; display: flex; gap: .55rem; align-items: baseline; flex-wrap: wrap; font: .84rem/1.5 var(--mono); }
.livepreview .arrow { flex: 0 0 auto; }
.livepreview .lp-result { color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.livepreview .lp-tag { font-size: .68rem; color: var(--muted); border: 1px solid var(--rule-strong); border-radius: 4px; padding: .05rem .4rem; }
.livepreview .lp-tag.mock-tag { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }

/* ---- result ---------------------------------------------------------------- */
.result-pane { border-top: 1px solid var(--rule); padding-top: 1.3rem; }
.output { min-height: 2.6rem; }
.output .result {
  display: block; font: 400 1.28rem/1.5 var(--serif); color: var(--ink);
  white-space: pre-wrap; max-height: 26rem; overflow: auto; overflow-wrap: anywhere;
  padding-left: 1rem; border-left: 2px solid var(--accent); scrollbar-width: thin;
}
.output .placeholder, .placeholder { color: var(--muted); font: italic 400 1.05rem/1.5 var(--serif); }
.mock { display: inline-block; font: .74rem/1.4 var(--mono); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: 4px; padding: .05rem .4rem; margin-left: .5rem; }
.err { color: var(--danger); font: .85rem/1.55 var(--mono); overflow-wrap: anywhere; }

.steps { margin-top: 1rem; display: flex; flex-direction: column; }
.steps .step { display: flex; gap: .8rem; align-items: baseline; font: .88rem/1.6 var(--mono); padding: .35rem 0; border-bottom: 1px dashed var(--rule); min-width: 0; }
.steps .step:last-child { border-bottom: 0; }
.steps .step .n { color: var(--muted); font-size: .74rem; min-width: 1.4rem; text-align: right; }
.steps .step .x { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.steps .step .note { color: var(--muted); margin-left: auto; font: italic .82rem var(--serif); }
.steps .o, .livepreview .o, .chip .o { color: var(--accent-ink); }
.steps .s, .chip .s { color: var(--amber); }
.steps .num, .chip .num { color: var(--ink); font-weight: 600; }

.graphview { margin-top: 1.2rem; }
.graphsvg svg { max-width: 100%; height: auto; display: block; }
.graphsvg .reduced rect { stroke: var(--syn-op) !important; stroke-width: 2.6 !important; }
.animctl { display: flex; align-items: center; gap: .85rem; margin-top: .7rem; }
.animctl input[type=range] { flex: 1; accent-color: var(--accent); }
.animctl input[type=range][hidden] { display: none; }
.framecap { font: .8rem var(--mono); color: var(--muted); white-space: nowrap; }

/* ---- examples + operator reference ---------------------------------------- */
.chips { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.chip {
  font: .84rem/1.5 var(--mono); color: var(--ink); text-align: left; background: transparent;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: .5rem .2rem; cursor: pointer;
  overflow-wrap: anywhere; display: block; width: 100%;
}
.chip:hover { background: var(--paper-2); }

.ops { display: flex; flex-direction: column; max-height: 22rem; overflow: auto; border-top: 1px solid var(--rule); scrollbar-width: thin; }
.ops .op { display: grid; grid-template-columns: 3rem 9rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; font-size: .84rem; padding: .45rem .2rem; border-bottom: 1px solid var(--rule); }
@media (max-width: 720px) { .ops .op { grid-template-columns: 2.6rem minmax(0, 1fr) auto; } .ops .op .ds { grid-column: 2 / -1; } }
.ops .op .sig { font: 600 .92rem var(--mono); color: var(--accent-ink); }
.ops .op .nm { font: 500 .8rem var(--mono); color: var(--ink); }
.ops .op .ds { color: var(--ink-2); overflow-wrap: anywhere; }
.ops .op .tag { font: 500 .66rem/1 var(--mono); padding: .2rem .4rem; border-radius: 4px; border: 1px solid var(--rule-strong); color: var(--muted); }
.ops .op .tag.llm { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }

/* ---- inspector controls ----------------------------------------------------- */
textarea:not(#expr) {
  width: 100%; min-height: 15rem; resize: vertical; font: .78rem/1.55 var(--mono); white-space: pre; overflow: auto;
  color: var(--console-ink); background: var(--console); border: 1px solid var(--console-rule); border-radius: var(--r-sm); padding: .7rem .8rem;
}
textarea:focus { outline: none; }
.row { display: flex; gap: .4rem; align-items: center; margin: .35rem 0; min-width: 0; }
.row input, .row select {
  font: .8rem var(--mono); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm); padding: .42rem .5rem; min-width: 0;
}
.row input:focus, .row select:focus { outline: none; border-color: var(--accent); }
.row .k { flex: 0 0 5.8rem; } .row .v, .row .txt { flex: 1 1 0; } .row .role { flex: 0 0 6.4rem; }
.row button.x { flex: 0 0 auto; padding: .3rem .5rem; font-size: .72rem; color: var(--muted); }
.row .o { color: var(--accent-ink); font-family: var(--mono); }
small.note { color: var(--muted); font-size: .76rem; display: block; margin-top: .5rem; }
.od-status { font: .8rem/1.4 var(--mono); padding: .5rem .6rem; border-radius: var(--r-sm); border: 1px solid var(--rule-strong); color: var(--muted); }
.od-status.ok { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.od-status.warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.output:empty { display: none; }
.output:empty + .steps { margin-top: 0; }