/* self-hosted IBM Plex (site/assets/fonts, OFL) — no external requests */
@font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-Variable.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}


/* ── D1 tokens — byte-identical to foundations/colors.html + components/registry-editor.html (LOCKED). Append-only. ── */
:root{
  --ground:#EEF0EE; --paper:#F8F9F7; --card:#FFFFFF; --line:#E2E5E1; --ink:#1B242D; --muted:#5C6670;
  --deep:#1D3E5E; --blueprint:#2C5F8A; --tint:#DCE7F0; --on-tint:#1D3E5E; --redline:#C7402D;
  --ok:#2A4F3A; --ok-bg:#EFF6F1; --ok-line:#CFE3D4; --err:#8B2F1F; --err-bg:#FBEEEB; --err-line:#EBCBC4;
  --focus:rgba(44,95,138,.10); --kbd:#CBD1CB;
  --on-deep:#F8F9F7; /* completed: text on --deep — = --paper in light; D1 dark has no safe value (paper goes near-black) */
  /* completed from the existing language (editor.css repeats the literal font stacks 8×) */
  --font-sans:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  /* radii — measured in editor.css as running (see tokens card §4 for the registry-editor-card delta) */
  --r-chip:5px; --r-row:6px; --r-fam:7px; --r-btn:8px; --r-input:10px; --r-msg:12px; --r-panel:14px; --r-pill:999px;
  /* shell — measured */
  --bar-h:52px; --pane-side:320px; --shell-gap:16px; --shell-pad:16px;
  --shadow-pop:0 10px 30px rgba(27,36,45,.16);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ground:#0B1015; --paper:#10161B; --card:#182029; --line:#29323B; --ink:#E8ECEA; --muted:#97A3AD;
  --deep:#2C5F8A; --blueprint:#6BA3D0; --tint:#1E3752; --on-tint:#A9C6DE; --redline:#E06A54;
  --ok:#8FCBA5; --ok-bg:#16281E; --ok-line:#24402F; --err:#E8A091; --err-bg:#2A1714; --err-line:#452420;
  --focus:rgba(107,163,208,.18); --kbd:#3A444E; --on-deep:#E8ECEA; --shadow-pop:0 10px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}


/* ── editor vocabulary, as built (editor.css + openbeam.css), hard-codes mapped to D1 ── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.6}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.wm{font-family:var(--font-mono);font-weight:500;font-size:19px;letter-spacing:-.6px;color:var(--ink);text-decoration:none}
.wm i{font-style:normal;color:var(--redline)}
.tok{font-family:var(--font-mono);font-size:12px;color:var(--blueprint);background:var(--tint);border-radius:6px;padding:4px 10px;display:inline-block}

.toolbar{display:flex;align-items:center;gap:12px;height:var(--bar-h);flex:0 0 var(--bar-h);padding:0 14px;background:var(--card);border-bottom:1px solid var(--line)}
.toolbar .wm{font-size:15px}
.toolbar .tag{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-chip);padding:2px 7px}
.toolbar .bmeta{font-size:11.5px;color:var(--muted)}
.toolbar .status-pill{margin-left:auto}

.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-btn);padding:8px 13px;font-size:12.5px;cursor:pointer;font-family:inherit;line-height:normal;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--blueprint);background:var(--tint)}
.btn.pri{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
/* completed: */
.btn.pri:hover{background:var(--blueprint);border-color:var(--blueprint)}
.btn:focus-visible{outline:2px solid var(--blueprint);outline-offset:1px}
.btn[disabled],.btn.busy{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn .ico{width:14px;height:14px;flex-shrink:0}
.icb{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--card);border-radius:var(--r-fam);color:var(--muted);cursor:pointer;flex-shrink:0}
.icb svg{width:14px;height:14px}
.icb:hover{border-color:var(--blueprint);background:var(--tint);color:var(--on-tint)}
.icb:focus-visible{outline:2px solid var(--blueprint);outline-offset:1px}
.icb.done{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}

.status-pill{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:4px 10px;font-family:var(--font-mono);font-size:11px;background:var(--tint);color:var(--on-tint)}
.status-pill.ok{background:var(--ok-bg);color:var(--ok)}
.status-pill.error{background:var(--err-bg);color:var(--err)}
.status-pill.neutral{background:var(--ground);color:var(--muted)}
.status-pill.dirty{background:var(--tint);color:var(--on-tint)}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.sidebar-panel{padding:16px;gap:2px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.panel-head h2{font-size:16px;margin:0;font-weight:600;line-height:1.3}
.field-label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.text-input,.text-area{width:100%;border:1px solid var(--line);border-radius:var(--r-input);background:var(--card);color:var(--ink);padding:11px 12px;font:inherit}
.text-area{resize:vertical;line-height:1.45}
.text-input:focus,.text-area:focus{outline:none;border-color:var(--blueprint);box-shadow:0 0 0 3px var(--focus)}
.text-input[readonly],.text-area[readonly]{background:var(--paper);color:var(--muted);cursor:not-allowed}
/* completed: */
.text-input[disabled],.text-area[disabled]{background:var(--paper);color:var(--muted);opacity:.6;cursor:not-allowed}
.text-input[aria-invalid="true"],.text-area[aria-invalid="true"]{border-color:var(--err)}
.text-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--err-bg)}
select.text-input{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.field-hint{font-size:10.5px;color:var(--muted);margin-top:5px}
.tree-hint{margin:8px 0 10px;font-size:12px;color:var(--muted)}
.field-group{min-width:0}

.tree{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;overflow:auto;padding-right:2px}
.fam,.ctx,.leaf{flex:0 0 auto}
.fam{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:var(--r-fam);padding:7px 8px;cursor:pointer;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink);min-height:32px}
.fam:hover{background:var(--tint)}
.ctx{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:var(--r-row);padding:5px 8px;cursor:pointer;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);min-height:28px}
.ctx:hover{background:var(--tint);color:var(--ink)}
.leaf{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:var(--r-row);padding:6px 8px;cursor:pointer;font-family:var(--font-mono);font-size:12px;color:var(--ink);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leaf:hover{background:var(--tint)}
.leaf[aria-current="true"]{background:var(--deep);color:var(--on-deep)}
.fam:focus-visible,.ctx:focus-visible,.leaf:focus-visible{outline:2px solid var(--blueprint);outline-offset:1px}
.car{display:inline-block;width:9px;flex-shrink:0;color:var(--muted);transition:transform .12s ease}
.fam[aria-expanded="false"] .car,.ctx[aria-expanded="false"] .car{transform:rotate(-90deg)}
.fam-label,.ctx-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fam .n,.ctx .n{margin-left:auto;font-size:10.5px;font-weight:400;color:var(--muted);flex-shrink:0}
.kids{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 10px;padding-left:10px;border-left:1px solid var(--line)}
.kids.collapsed{display:none}
.token-empty{border:1px dashed var(--line);border-radius:var(--r-input);padding:12px;font-size:12px;color:var(--muted);background:var(--paper)}

.editor-panel{padding:0}
.editor-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px}
.msg-dock{flex:0 0 auto;padding:12px 16px;border-top:1px solid var(--line);background:var(--card)}
.msg-dock .message-box{margin-bottom:0}
.selected-actions{display:flex;gap:8px;flex-wrap:wrap}
.editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field-group.full-width{grid-column:1/-1}
.raw-area{min-height:320px;font-size:12px}

.tagbox{border:1px solid var(--line);border-radius:var(--r-input);padding:2px 10px;background:var(--card)}
.tagrow{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.tagrow:last-child{border-bottom:0}
.tagrow .bucket{flex:0 0 92px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:6px}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-width:0}
.tag2{display:inline-flex;align-items:center;gap:6px;background:var(--tint);color:var(--on-tint);border-radius:var(--r-row);padding:3px 5px 3px 9px;font-family:var(--font-mono);font-size:11.5px}
.tag2 button{border:0;background:transparent;color:var(--blueprint);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.tag2 button:hover{color:var(--on-tint)}
.tagin{border:1px dashed var(--line);border-radius:var(--r-row);background:transparent;padding:4px 9px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink);min-width:120px;flex:1 1 120px}
.tagin:focus{outline:none;border-color:var(--blueprint);border-style:solid}
.empty{font-size:11.5px;color:var(--muted);font-style:italic;padding-top:4px}

.message-box{border-radius:var(--r-msg);padding:14px 16px;font-size:13px;line-height:1.5;border:1px solid var(--line)}
.message-box.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.message-box.error{background:var(--err-bg);color:var(--err);border-color:var(--err-line)}
.message-box.neutral{background:var(--paper);color:var(--muted)}
.paths{display:grid;gap:8px;font-size:11px;margin-top:18px}
.paths div{display:grid;gap:4px}
.paths span{color:var(--muted)}
.paths code{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-btn);padding:8px 10px;overflow:auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
kbd{font-family:var(--font-mono);font-size:10.5px;border:1px solid var(--kbd);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--muted);background:var(--card)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ── app shell: the tool-shell card's full-bleed frame (bar + panes on --ground; body never scrolls, panes scroll inside) ── */
body{background:var(--ground)}
.shell{display:flex;flex-direction:column;background:var(--ground);height:100vh;height:100dvh;overflow:hidden}
/* small helpers replacing the cards' inline style attributes (CSP forbids inline style) */
.bucket.blk{display:block;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.field-label.flush{margin:0}
.field-hint.flush{margin:0}
.tree.spaced{margin-top:10px}
.err-text{color:var(--err)}
.token-empty b.ink{font-weight:600;color:var(--ink)}
.gap-top{margin-top:10px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

a{color:var(--blueprint)}
/* ── login composition: the shell's ground + ONE panel, 400px, centred — a tool door, not a hero ── */
.login-ground{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:var(--shell-pad)}
.login-panel{width:400px;max-width:100%;padding:16px;gap:14px}
.login-panel .panel-head{margin-bottom:0}
.login-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.login-actions .spacer{margin-right:auto;font-size:10.5px;color:var(--muted)}
.code-input{letter-spacing:.3em;font-size:18px;padding:9px 12px}
.foot-note{font-size:10.5px;color:var(--muted);text-align:center;padding:8px 0 0}

/* ── expert-feedback v2 — the journey: four question cards. Shell, bar, list and mic frames carried from round B; every new rule says what it is completed from ── */
.lk-layout{display:grid;grid-template-columns:var(--pane-side) minmax(0,1fr);gap:var(--shell-gap);flex:1;min-height:0;padding:var(--shell-pad)}
.toolbar .btn{margin-left:auto}                                   /* bar action slot (tool-shell card: actions sit right) */
.toolbar .bmeta b{font-weight:600;color:var(--ink)}               /* the reviewed count — ink, the rest muted */
/* list row = round B, unchanged: the tree leaf, two lines + a 14px state mark (ring --kbd = not reviewed · check --ok = reviewed) */
.res{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:var(--r-row);padding:6px 8px;cursor:pointer;color:var(--ink);min-height:44px;flex:0 0 auto;font-family:inherit}
.res:hover{background:var(--tint)}
.res[aria-current="true"]{background:var(--deep);color:var(--on-deep)}
.res[aria-current="true"] .res-id{color:var(--on-deep);opacity:.8}
.res:focus-visible{outline:2px solid var(--blueprint);outline-offset:1px}
.res-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.res-name{font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-id{font-family:var(--font-mono);font-size:11px;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.res-st{width:14px;height:14px;flex-shrink:0;color:var(--kbd)}
.res-st.ok{color:var(--ok)}
.res[aria-current="true"] .res-st{color:var(--on-deep)}
.tree-hint.sep{margin:10px 0 4px;padding:0 8px}
.tree-hint.sep:first-child{margin-top:0}
/* ── the journey ── */
.jo{display:grid;gap:14px}                                         /* = .sheet gap */
.intro{font-size:13px;line-height:1.5;color:var(--muted);max-width:70ch}   /* = .message-box.neutral type, no box */
/* question card = the message box's radius + padding, one tint each; two prose sizes per card: the question (16/600 = panel title) and the body */
.qc{border:1px solid var(--line);border-radius:var(--r-msg);padding:16px;display:grid;gap:12px;align-content:start}
.qc>.field-label{margin:0}                                        /* category kicker = the field label atom */
.qc h3{font-size:16px;font-weight:600;line-height:1.3;margin:0;color:var(--ink);max-width:70ch}
.qc p{font-size:15px;line-height:1.5;max-width:70ch;margin:0}      /* card 1: body 15 = page body */
.qc .line{font-size:13px;line-height:1.5;max-width:70ch}           /* cards 2–4: line 13 = message-box body */
.qc-1{background:var(--paper)}                                     /* quietest: paper on card */
.qc-2{background:var(--tint);border-color:var(--blueprint);border-left-width:4px}   /* most present: tint + the hover/focus stroke + the site callout's 4px left rule, in --blueprint */
.qc-3{background:var(--ok-bg);border-color:var(--ok-line)}         /* = .message-box.ok surface */
.qc-4{background:var(--ground);border-color:var(--kbd)}            /* D1 has no warm tint → ground + the kbd stroke (open question Q11) */
.tk{display:grid;gap:2px}
.tk b{font-size:15px;font-weight:600;line-height:1.4}
.tk code{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}   /* = .res-id */
.ans{display:flex;gap:8px;flex-wrap:wrap}
.btn[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}   /* chosen answer = the selected-row treatment (.leaf[aria-current]) */
.qc .tagrow{border-bottom:0;padding:3px 0;gap:8px}                 /* name rows: the tagbox rows without their rule or box */
.qc .tagrow .bucket{flex:0 0 64px;padding-top:5px}
.qc-2 .tag2{background:var(--card);border:1px solid var(--line)}   /* chips on tint need their own face: card + line */
.tag2 .x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 2px;font-family:inherit}   /* "nobody says this" = the chip × in --muted, not blueprint, never red */
.tag2 .x:hover{color:var(--on-tint)}
.tag2 .x:focus-visible{outline:2px solid var(--blueprint);outline-offset:1px;border-radius:3px}
.tag2.mine{border-color:var(--blueprint)!important;background:var(--card)}   /* the expert's own chip: card face + blueprint stroke */
.tag2 .mk{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blueprint)}   /* = .cmp, inline */
.tag2.no{background:var(--ground)!important;border:1px dashed var(--line)!important;color:var(--muted);text-decoration:line-through}   /* struck by the expert: ground + dashed line (the empty-state stroke); × becomes undo */
.tag2.no .x{text-decoration:none}
.addrow{display:flex;gap:8px;align-items:center;max-width:70ch}
.addrow .text-input{font-size:13px;padding:8px 12px;flex:1;min-width:0}
.bl{list-style:none;margin:0;padding:0;max-width:70ch}
.bl li{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--ok-line);font-size:13px;line-height:1.45}
.bl li .t{flex:1;min-width:0}
.bl li .mono{font-size:11.5px;color:var(--blueprint)}
.bl li .tg{display:inline-flex;gap:4px;flex-shrink:0}
.icb[aria-pressed="true"]{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}        /* ✓ pressed = .icb.done */
.icb.no[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}   /* ✗ pressed = the selected treatment — the mark we most want, never red */
.more{border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;padding:0;font-family:inherit;justify-self:start}   /* = .tree-hint text + the tree caret */
.more:hover{color:var(--ink)}
.more:focus-visible{outline:2px solid var(--blueprint);outline-offset:2px;border-radius:3px}
.more .car{font-size:10px}
.more[aria-expanded="false"] .car{transform:rotate(-90deg)}
.nb{display:grid;gap:8px;max-width:70ch}                           /* the reveal = round B's one field, rows 2, no Send (the note goes with Done) */
.nb .text-area{font-size:13px}
.fb-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.jo-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap;padding-top:2px}
.jo-actions .hint{margin-right:auto;font-size:10.5px;color:var(--muted)}
.rec{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
.rec:hover{background:var(--blueprint);border-color:var(--blueprint)}
.rec .dot{width:8px;height:8px;border-radius:50%;background:var(--on-deep);display:inline-block;animation:recpulse 1.2s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.35}}
.rec .t{font-family:var(--font-mono);font-variant-numeric:tabular-nums;min-width:3.2em;text-align:left}
.focus-shown{outline:2px solid var(--blueprint);outline-offset:1px}  /* static render of :focus-visible */
/* motion (Done): the finished pane leaves to the left, the next arrives from the right — the tree caret's .12s ease, lengthened */
.jo.leaving{opacity:0;transform:translateX(-24px);transition:opacity .12s ease-in,transform .12s ease-in}
.jo.arriving{animation:join .18s ease-out}
@keyframes join{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
/* ── breakpoints: ≤980 the panes stack and the page scrolls; ≤620 the bar wraps (tool-shell card; = the cards' 390px frame) ── */
@media (max-width:980px){
.shell{height:auto;min-height:100vh;overflow:visible}
.lk-layout{grid-template-columns:1fr}
.sidebar-panel .tree{max-height:280px}
}
@media (max-width:620px){
.shell .toolbar{flex:0 0 auto;flex-wrap:wrap;height:auto;min-height:52px;padding:8px 14px}
.shell .toolbar .status-pill{margin-left:0}
.shell .lk-layout{grid-template-columns:1fr}
.shell .sidebar-panel .tree{max-height:280px}
.shell .qc{padding:14px}
.shell .qc .tagrow{flex-direction:column;gap:4px}
.shell .qc .tagrow .bucket{padding-top:0;flex:0 0 auto}   /* column direction: the 64px basis would become height */
.shell .bl li{flex-wrap:wrap}
.shell .jo-actions .hint{flex-basis:100%}
}