/* CIM tab (public/cim.js). Uses the page's colour tokens from index.html. */
/* ---------- CIM gate ---------- */
.cim-drop{display:grid;justify-items:center;text-align:center;gap:6px;border:1.5px dashed var(--line-2);border-radius:12px;padding:24px 14px;background:var(--paper);cursor:pointer;transition:border-color .2s,background-color .2s}
.cim-drop:hover,.cim-drop:focus-visible,.cim-drop.over{border-color:var(--ink);background:var(--wash);outline:none}
.cim-drop svg{width:30px;height:36px;color:var(--muted)}
.cim-drop b{font:600 17px/1.2 var(--serif)}
.cim-drop span{font-size:12.5px;color:var(--faint)}
.cim-paste{margin-top:12px}
.cim-paste summary{cursor:pointer;font-size:13px;color:var(--muted);font-weight:600}
.cim-paste textarea{width:100%;min-height:130px;margin-top:8px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:9px 10px;font:13px/1.45 var(--mono);resize:vertical}
.cg-text{border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:7px 9px;min-width:0}
.cg-doc{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:7px;background:var(--surface)}
.cg-doc .t{font:600 15px/1.3 var(--serif);overflow-wrap:anywhere}
.cg-doc .t small{display:block;font:500 12px/1.3 var(--sans);color:var(--muted)}
.cg-doc .m{display:flex;flex-wrap:wrap;gap:5px}
.cg-doc .chip{white-space:normal;overflow-wrap:anywhere}
.cg-doc.cg-err{border-color:var(--bad);background:var(--bad-wash)}
.cg-doc.cg-err span{font-size:13px}
.cg-prog{height:4px;background:var(--code);border-radius:2px;overflow:hidden}
.cg-prog i{display:block;height:100%;background:var(--ink);transition:width .2s}
.cg-num{display:grid;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}
.cg-num:first-child{padding-top:0}
.cg-num-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cg-num-h label{font-weight:600}
.cg-in{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:0 9px;font:600 15px/1 var(--mono);color:var(--muted);min-width:0}
.cg-in input{width:7ch;min-width:0;border:0;background:transparent;padding:8px 2px;font:inherit;color:var(--ink);text-align:right;outline:none}
.cg-in:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--wash)}
.cg-src{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.cg-src q,.cg-q q{color:var(--ink)}
.cg-alts{display:flex;flex-wrap:wrap;gap:5px}
.cg-alts button{border:1px solid var(--line-2);background:var(--paper);border-radius:999px;padding:4px 9px;font:500 11.5px/1.2 var(--mono);color:var(--muted)}
.cg-alts button:hover{border-color:var(--ink)}
.cg-alts button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cg-margin{margin:10px 0 0;font:500 12px var(--mono);color:var(--faint)}
.linkish{border:0;background:none;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font:inherit;font-weight:600}
.cg-verdict{display:grid;gap:3px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--paper)}
.cg-verdict b{font:600 26px/1.1 var(--serif);letter-spacing:-.01em}
.cg-verdict span:not(.kicker){font-size:14px}
.cg-verdict small{font-size:12.5px;color:var(--muted)}
.cg-verdict.v-advance{background:var(--good-wash);border-color:var(--good)}
.cg-verdict.v-advance b{color:var(--good)}
.cg-verdict.v-review{background:var(--wash);border-color:var(--yellow)}
.cg-verdict.v-decline{background:var(--bad-wash);border-color:var(--bad)}
.cg-verdict.v-decline b{color:var(--bad)}
.cg-gates{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.cg-gate{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.cg-gate.open{border-color:var(--line-2);box-shadow:var(--shadow)}
.cg-gate>button{width:100%;border:0;background:transparent;text-align:left;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"st name val" "st meter meter";gap:7px 11px;align-items:center;padding:10px 12px;border-radius:10px}
.cg-gate>button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cg-st{grid-area:st;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font:700 14px/1 var(--mono);background:var(--code);color:var(--faint)}
.g-pass .cg-st{background:var(--good-wash);color:var(--good)}
.g-review .cg-st{background:var(--wash);color:var(--ink);box-shadow:inset 0 0 0 1px var(--yellow)}
.g-fail .cg-st{background:var(--bad-wash);color:var(--bad)}
.cg-name{grid-area:name;font-weight:600;font-size:14px;min-width:0}
.cg-name small{display:block;font:500 11px/1.3 var(--mono);color:var(--faint);margin-top:1px}
.cg-val{grid-area:val;font:600 13px/1.2 var(--mono);text-align:right;max-width:17ch;overflow-wrap:anywhere}
.cg-meter{grid-area:meter;position:relative;height:6px;border-radius:3px;background:var(--code);--v:0;--t:0;--t2:0;--a:0;--b:0}
.cg-meter .cg-f{position:absolute;top:0;bottom:0;left:0;width:calc(var(--v) * 100%);border-radius:3px;background:var(--muted)}
.g-pass .cg-meter .cg-f{background:var(--good)}
.g-review .cg-meter .cg-f{background:var(--yellow)}
.g-fail .cg-meter .cg-f{background:var(--bad)}
.cg-meter i{display:block;font-style:normal}
.cg-meter .cg-t,.cg-meter .cg-t2{position:absolute;top:-3px;bottom:-3px;width:2px;left:calc(var(--t) * 100% - 1px);background:var(--ink);border-radius:1px}
.cg-meter .cg-t2{left:calc(var(--t2) * 100% - 1px);background:var(--faint)}
.cg-meter .cg-band{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);background:var(--good-wash);box-shadow:inset 0 0 0 1px var(--good);border-radius:3px}
.cg-meter .cg-dot{position:absolute;top:50%;left:calc(var(--v) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);border:2px solid var(--surface)}
.cg-why{padding:0 12px 12px 53px;font-size:13px;color:var(--muted)}
.cg-why p{margin:0 0 8px}
.cg-bars{display:grid;gap:4px}
.cg-bars div{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr) 3.2em;gap:8px;align-items:center;font-size:12px}
.cg-bars span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-bars i{height:7px;border-radius:4px;background:linear-gradient(to right,var(--muted) calc(var(--p) * 100%),var(--code) 0)}
.cg-bars .on i{background:linear-gradient(to right,var(--ink) calc(var(--p) * 100%),var(--code) 0)}
.cg-bars .on span{color:var(--ink);font-weight:600}
.cg-bars b{font:500 11.5px var(--mono);text-align:right}
.cg-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cg-secs{display:flex;flex-wrap:wrap;gap:5px}
.cg-secs button{border:1px solid var(--line-2);background:var(--paper);border-radius:999px;padding:5px 10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.cg-secs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cg-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cg-two label{display:grid;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.cg-two .cg-in{width:100%}
.cg-two .cg-in input{width:100%}
.rule-h output,.cg-two output{font:600 12.5px var(--mono);color:var(--ink)}
.cg-ex>summary{cursor:pointer;list-style:none}
.cg-ex>summary::-webkit-details-marker{display:none}
.cg-ex>summary h2::after{content:"+";font:500 15px var(--mono);color:var(--faint);margin-left:4px}
.cg-ex[open]>summary h2::after{content:"−"}
.cg-ex:not([open])>summary{border-bottom:0}
.cg-state{max-height:320px;overflow:auto;margin:10px 0 0;padding:10px 12px;background:var(--code);border:1px solid var(--line);border-radius:8px;font:12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.cg-qs{margin:0;padding-left:18px;display:grid;gap:7px;font-size:12.5px;color:var(--muted)}
.cg-qs span:last-child{display:block;margin-top:2px}
.cg-qs code{font:600 12px var(--mono);color:var(--ink)}
.cg-q{margin:0;font-size:12.5px}
.cg-contents{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.cg-contents b{font-weight:600;color:var(--ink)}
.cg-contents .n9{display:inline-flex;gap:3px;flex-wrap:wrap}
.cg-contents .n9 span{width:19px;height:19px;border-radius:5px;display:grid;place-items:center;font:600 10.5px/1 var(--mono);background:var(--code);color:var(--faint);border:1px solid var(--line)}
.cg-contents .n9 span.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cg-seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--code);border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:8px}
.cg-seg button{flex:1 1 auto;border:0;background:transparent;border-radius:7px;padding:7px 8px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.cg-seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(17,17,16,.14),0 0 0 1px var(--line-2)}
.cg-step{display:grid;gap:6px;padding:10px 0;border-top:1px solid var(--line)}
.cg-need+.cg-step,.cg-step:first-child,.hint+.cg-step{border-top:0}
.cg-step>b{display:flex;align-items:center;gap:8px;font-size:13.5px}
.cg-step>b i{font:600 11px/1 var(--mono);font-style:normal;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:var(--yellow);color:var(--on-yellow);flex:none}
.cg-step p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.cg-step p code,.cg-need code{font:500 11.5px var(--mono);background:var(--code);padding:1px 4px;border-radius:4px;color:var(--ink)}
.cg-code{position:relative}
.cg-code pre{margin:0;padding:10px 70px 10px 12px;background:var(--bar);color:var(--bar-ink);border-radius:8px;font:12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto}
.cg-code .btn{position:absolute;top:6px;right:6px;padding:4px 9px;font-size:11.5px}
.cg-need{margin:0 0 4px;font-size:13px;background:var(--wash);border-radius:8px;padding:8px 10px}
@media (max-width:420px){.cg-why{padding-left:12px}.cg-val{max-width:11ch}.cg-two{grid-template-columns:minmax(0,1fr)}}
.cg-from{margin:-6px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted);background:var(--paper);border:1px dashed var(--line-2);border-radius:8px;padding:8px 10px}
.cg-from b{color:var(--ink);font-weight:600}
.cg-from .linkish{font-size:12.5px}