:root {
  --bg: #f6f8fa; --panel: #fff; --line: #d0d7de; --text: #1f2328; --muted: #59636e;
  --accent: #0969da; --ok: #1a7f37; --warn: #9a6700; --bad: #cf222e; --control: #bf3989;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 14px/1.45 system-ui, sans-serif; color: var(--text); background: var(--bg);
       height: 100vh; display: flex; flex-direction: column; }
button { font: inherit; border: 1px solid var(--line); background: var(--panel); border-radius: 6px;
         padding: .35rem .7rem; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
input { font: inherit; border: 1px solid var(--line); border-radius: 4px; padding: .2rem .4rem; width: 100%; min-width: 0; }
h3 { margin: 0 0 .4rem; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; }

#top { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; background: var(--panel);
       border-bottom: 1px solid var(--line); flex-wrap: wrap; }
#top h1 { font-size: 16px; margin: 0; }
#top h1:empty { display: none; }                  /* a config with no title */
/* A picker in the top bar is one line: no title, no detail line, the typed box inline. */
#top-widgets > div:has(> .picker-select) { display: flex; align-items: center; gap: .4rem; }
#top-widgets > div:has(> .picker-select) > h3,
#top-widgets > div:has(> .picker-select) > .picker-detail { display: none; }
#top-widgets .picker-row { display: flex; gap: .3rem; margin: 0; }
#top-widgets { display: flex; gap: 1rem; align-items: center; flex: 1; flex-wrap: wrap; min-width: 0; }
.pill { font-size: 12px; padding: .1rem .5rem; border-radius: 999px; background: #eaeef2; color: var(--muted); }
.pill.on { background: #dafbe1; color: var(--ok); }

#layout { flex: 1; display: grid; grid-template-columns: 380px minmax(0, 1fr); min-height: 0; }
#layout:has(> #left:empty) { grid-template-columns: minmax(0, 1fr); }  /* a config with no left panels */
#left:empty { display: none; }
body.embed #top, body.embed #left { display: none; }   /* embed: true: only the viewer */
body.embed #layout { grid-template-columns: minmax(0, 1fr); }
#left { overflow: auto; padding: .8rem; display: flex; flex-direction: column; gap: .8rem; border-right: 1px solid var(--line); }
#right { overflow: auto; padding: .8rem; display: flex; flex-direction: column; gap: .8rem; }
.widget { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; }
.widget-button { background: none; border: 0; padding: 0; }
.widget-button button { width: 100%; }
.widget-viewer { padding: .4rem; }

.banner { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.banner .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.banner #current-state { font-size: 16px; font-weight: 700; }
.banner .status.error { color: var(--bad); }
.message-bar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.message-bar #message:empty::before { content: "No message."; color: var(--muted); }
#control { display: flex; gap: .5rem; align-items: center; color: #fff; background: var(--control);
           border-radius: 6px; padding: .25rem .6rem; }
#control[hidden] { display: none; }
#control button { background: #fff; color: var(--control); border: 0; }

.tree .row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: .4rem; align-items: center; margin: .15rem 0; }
.tree .row .key { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree .group { margin: .3rem 0 .3rem .2rem; padding-left: .6rem; border-left: 2px solid #eaeef2; }
.tree .group > .name { font-weight: 600; font-size: 12px; }
.tree button.reroll { padding: .1rem .4rem; }
.empty { color: var(--muted); font-style: italic; }
dl.result { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: 0; }
dl.result dt { color: var(--muted); }
dl.result dd { margin: 0; }

ol.trace { list-style: none; margin: 0; padding: 0; max-height: 20rem; overflow: auto; font: 12px/1.4 ui-monospace, monospace; }
ol.trace li.state { font-weight: 700; margin-top: .2rem; }
ol.trace li.step { padding-left: 1rem; color: var(--muted); }
ol.trace li.error { color: var(--bad); padding-left: 1rem; }
ol.trace li.control { color: var(--control); padding-left: 1rem; }
ol.trace li.end { font-weight: 700; color: var(--ok); }
ol.trace li.run { margin-top: .6rem; color: var(--accent); font-weight: 700; }

.viewer-wrap { display: flex; flex-direction: column; gap: .4rem; position: relative; }

.button-choice { display: flex; flex-direction: column; gap: .3rem; }
.button-choice select.choice { width: 100%; font: inherit; border: 1px solid var(--line); border-radius: 6px;
                                background: var(--panel); padding: .25rem .3rem; }

/* The full map to approve: over the viewer, which keeps its size behind it. */
.panel { position: absolute; inset: 0 0 1.4rem 0; z-index: 3; display: flex; flex-direction: column;
         background: var(--panel); border: 2px solid var(--accent); border-radius: 8px; overflow: hidden; }
.panel-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .5rem .8rem;
              border-bottom: 1px solid var(--line); background: #ddf4ff; }
.panel-head .panel-message { flex: 1; min-width: 12rem; }
.panel-head .panel-count { color: var(--muted); font-size: 12px; }
.panel-body { overflow: auto; padding: .4rem .8rem .8rem; }
.panel section h4 { margin: .8rem 0 .3rem; }
.panel .data-key { font-weight: normal; color: var(--muted); font-size: 12px; }
.panel table { border-collapse: collapse; width: 100%; }
.panel td { padding: .15rem .4rem; border-bottom: 1px solid #eaeef2; vertical-align: middle; }
.panel td.value { font-family: ui-monospace, monospace; }
.panel tr.undetermined td.value { color: var(--bad); }
.panel select.option { font: inherit; max-width: 22rem; }
.panel input.approve { width: auto; }
.badge { font-size: 11px; padding: .05rem .4rem; border-radius: 999px; white-space: nowrap; }
.badge.exact, .badge.recorded { background: #dafbe1; color: var(--ok); }
.badge.meaning { background: #ddf4ff; color: var(--accent); }
.badge.close { background: #fff8c5; color: var(--warn); }
.badge.none { background: #ffebe9; color: var(--bad); }
.badge.ambiguous { background: #fbefff; color: #8250df; }
.viewer { position: relative; width: 100%; background: #24292f; border-radius: 6px; overflow: hidden; outline: none;
          user-select: none; }
.viewer img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.viewer { cursor: not-allowed; }
.viewer:not(.control) img { filter: grayscale(1) opacity(.55); }     /* watching only: no control */
.viewer.control { box-shadow: 0 0 0 3px var(--control); cursor: pointer; }
.viewer .placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #8c959f; }
.viewer .overlay { position: absolute; inset: 0; pointer-events: none; }
.viewer .overlay .box { position: absolute; border: 2px solid var(--c, #fb8500); border-radius: 3px; }
.viewer .overlay .box span { position: absolute; left: -2px; bottom: 100%; background: var(--c, #fb8500); color: #fff;
                             font-size: 11px; padding: 0 .3rem; border-radius: 3px 3px 0 0; white-space: nowrap; }
.viewer .picker { position: absolute; z-index: 2; overflow-y: auto; background: #fff; color: #1f2328;
                  border: 1px solid #8c959f; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.3);
                  font-size: 13px; cursor: default; }
.viewer .picker .option { padding: .25rem .6rem; white-space: nowrap; }
.viewer .picker .option.selected { font-weight: 600; }
.viewer .picker .option.at, .viewer .picker .option:hover { background: #0969da; color: #fff; }
.viewer-caption { font-size: 12px; color: var(--muted); }
.viewer-caption.control { color: var(--control); font-weight: 600; }

#notice { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: #24292f; color: #fff;
          padding: .5rem 1rem; border-radius: 6px; }

@media (max-width: 900px) {
  #layout { grid-template-columns: 1fr; }
  #left { border-right: 0; border-bottom: 1px solid var(--line); }
}

.learn-hint { margin: 0 0 .4rem; padding: .3rem .5rem; border-radius: 6px; background: #dafbe1; color: var(--ok); font-size: 12px; }
.tree .key.bindable { cursor: grab; text-decoration: underline dotted; color: var(--ok); }
.tree .key.armed { background: var(--ok); color: #fff; border-radius: 4px; padding: 0 .3rem; }
.tree .cell { display: flex; align-items: center; }
.tree .cell input[type=checkbox] { width: auto; }
ul.bindings { margin: 0; padding-left: 1rem; }
ul.bindings .method { color: var(--muted); font-size: 12px; }
ul.bindings li.flagged { color: var(--warn); }
#cancel-run:disabled { opacity: .4; }
.tree input.bindable { cursor: grab; }
.viewer.drop-target { box-shadow: 0 0 0 3px var(--ok); outline: 3px dashed #fff; outline-offset: -8px; }

ul.bindings li.unmatched code { color: #cf222e; }
ul.bindings button.unbind { margin-left: .4rem; border: none; background: none; color: #cf222e; cursor: pointer;
                            font-size: 13px; padding: 0 .2rem; }
#control-actions button.action { margin-left: .4rem; }
#control-actions button.action:disabled { opacity: .45; cursor: default; }
ul.bindings .mapped { color: var(--muted); }

.picker-select { width: 100%; font: inherit; padding: .25rem; }
.picker-row { display: flex; gap: .4rem; margin-top: .4rem; }
.picker-detail { margin-top: .3rem; font-size: 12px; color: var(--muted); word-break: break-all; }
.json-bar { display: flex; gap: .4rem; margin-bottom: .4rem; }
.json-bar select { flex: 1; min-width: 0; font: inherit; }
textarea.json { width: 100%; font: 12px/1.4 ui-monospace, monospace; border: 1px solid var(--line); border-radius: 4px;
                padding: .3rem .4rem; resize: vertical; }
.json-status { font-size: 12px; color: var(--muted); min-height: 1.2em; }
.json-status.bad { color: var(--bad); }
img.capture { display: block; max-width: 100%; max-height: 22rem; object-fit: contain; object-position: top;
              border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.capture-caption { font-size: 12px; color: var(--muted); margin-top: .2rem; }
pre.text { max-height: 16rem; overflow: auto; }
.panel-body.question { display: flex; flex-direction: column; gap: .8rem; max-width: 40rem; }
.panel-question { margin: .6rem 0 0; font-size: 15px; }
.panel-answers { display: flex; flex-direction: column; gap: .5rem; }
.panel-answers button.answer { text-align: left; display: flex; flex-direction: column; gap: .15rem; padding: .5rem .8rem; }
.panel-answers button.answer .detail { font-size: 12px; opacity: .8; }
input.viewer-url { font: 12px ui-monospace, monospace; color: var(--muted); background: #f6f8fa; }
h3.foldable { cursor: pointer; user-select: none; }
h3.foldable::before { content: "▾ "; }
.widget.folded h3.foldable::before { content: "▸ "; }
.widget.folded > div > :not(h3) { display: none !important; }
.widget.folded h3 { margin: 0; }