/* Shared by the engine's tools: /instruction-check/, /assistant-builder/, /workflow-planner/, /prompt-lint/,
   /library-audit/ and /agent-brief/. Status colours follow th.css: green kept, red broken, gold to read. */
.eng{--st-kept:var(--good); --st-broken:var(--bad); --st-unclear:var(--hi); --st-added:var(--hi)}
.eng-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.2rem; align-items:start}
@media (max-width:64rem){ .eng-grid{grid-template-columns:minmax(0,1fr)} }
.eng-ta{width:100%; border:0; border-radius:0; background:transparent; padding:.9rem 1.1rem; font:400 .98rem/1.6 var(--f-serif); resize:vertical; box-shadow:none; min-height:10rem}
.eng-ta.mono{font:400 .86rem/1.55 var(--f-mono)}
.eng-ta:focus{outline:none; box-shadow:inset 0 0 0 2px var(--accent-wash)}
.eng .panel-body{padding:0}
.eng-go{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:1rem 0 0}
.eng-privacy{display:flex; gap:.45rem; align-items:flex-start; font:400 var(--t-sm)/1.45 var(--f-ui); color:var(--ink-3); max-width:46rem}
.eng-privacy svg{flex:none; width:1rem; height:1rem; margin-top:.1rem; color:var(--good)}
.eng-privacy a{color:var(--accent)}
.eng-out{margin-top:1.6rem}
.eng-out:empty{display:none}
.eng-busy{display:flex; align-items:center; gap:.7rem; padding:1.2rem; color:var(--ink-2); font:500 var(--t-sm)/1.4 var(--f-ui)}

/* ── the verdict: a ring of rules and a sentence ────────────────────── */
.eng-verdict{display:flex; align-items:center; gap:1.2rem 1.6rem; flex-wrap:wrap; padding:1.1rem 1.2rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl)}
.eng-dial{position:relative; flex:none; width:132px; height:132px}
.eng-dial b{position:absolute; inset:0; display:grid; place-content:center; text-align:center; font:300 2.2rem/1 var(--f-head); color:var(--ink); font-variant-numeric:tabular-nums}
.eng-dial b small{display:block; font:500 var(--t-2xs)/1.2 var(--f-ui); color:var(--ink-3); margin-top:.3rem}
.eng-ring{display:block; overflow:visible}
.eng-ring-base{fill:none; stroke:var(--bg-2); stroke-width:12}
.eng-ring-seg{fill:none; stroke-width:12; stroke-linecap:butt; stroke:var(--ink-4); transition:stroke-width .15s; animation:eng-in .5s var(--d,0ms) both ease-out}
.eng-ring-seg[data-st="kept"]{stroke:var(--st-kept)}
.eng-ring-seg[data-st="broken"]{stroke:var(--st-broken)}
.eng-ring-seg[data-st="unclear"]{stroke:var(--st-unclear)}
.eng-ring-seg.on{stroke-width:17}
@keyframes eng-in{from{opacity:0; stroke-width:2}}
@media (prefers-reduced-motion:reduce){ .eng-ring-seg{animation:none} }
.eng-verdict-text{flex:1 1 18rem; min-width:0}
.eng-verdict-text h2{font:400 1.5rem/1.2 var(--f-head); color:var(--ink); margin:0}
.eng-verdict-text h2 em{font-style:italic}
.eng-verdict-text p{font:400 1rem/1.5 var(--f-serif); color:var(--ink-2); margin-top:.4rem}
.eng-stats{display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-top:.6rem; font:500 var(--t-sm)/1.3 var(--f-ui); color:var(--ink-2)}
.eng-stats span{display:inline-flex; align-items:center; gap:.35rem}
.eng-stats i{width:.6rem; height:.6rem; border-radius:50%; background:var(--ink-4)}
.eng-stats [data-st="kept"] i{background:var(--st-kept)} .eng-stats [data-st="broken"] i{background:var(--st-broken)} .eng-stats [data-st="unclear"] i,.eng-stats [data-st="added"] i{background:var(--st-unclear)}

/* ── status tags ───────────────────────────────────────────────────── */
.eng-st{--c:var(--ink-3); display:inline-flex; align-items:center; gap:.35rem; font:600 var(--t-2xs)/1 var(--f-ui); color:var(--ink-2); padding:.32rem .55rem; border-radius:999px; background:color-mix(in srgb, var(--c) 13%, transparent); white-space:nowrap}
.eng-st i{width:.5rem; height:.5rem; border-radius:50%; background:var(--c)}
.eng-st[data-st="kept"]{--c:var(--st-kept)} .eng-st[data-st="broken"]{--c:var(--st-broken)} .eng-st[data-st="unclear"],.eng-st[data-st="added"]{--c:var(--st-unclear)}

/* ── a ledger of findings ──────────────────────────────────────────── */
.eng-sec{margin-top:1.6rem}
.eng-sec > h3{font:400 1.25rem/1.25 var(--f-head); color:var(--ink); margin:0 0 .3rem}
.eng-sec > p.hint{margin:0 0 .8rem}
.eng-ledger{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.eng-row{--c:var(--ink-4); display:grid; grid-template-columns:auto minmax(0,1fr); gap:.2rem .8rem; padding:.8rem .4rem .8rem .9rem; border-bottom:1px solid var(--line); box-shadow:inset 3px 0 0 var(--c); cursor:default}
.eng-row[data-st="kept"]{--c:var(--st-kept)} .eng-row[data-st="broken"]{--c:var(--st-broken)} .eng-row[data-st="unclear"]{--c:var(--st-unclear)}
.eng-row.on,.eng-row:focus-visible{background:color-mix(in srgb, var(--c) 7%, transparent); outline:none}
.eng-row > .eng-st{grid-row:1 / span 2; align-self:start; margin-top:.15rem}
.eng-row-t{font:600 1rem/1.35 var(--f-ui); color:var(--ink)}
.eng-row-d{font:400 .98rem/1.5 var(--f-serif); color:var(--ink-2)}
.eng-row-q{grid-column:2; font:italic 400 var(--t-sm)/1.45 var(--f-serif); color:var(--ink-3)}
.eng-row-q::before{content:"From the prompt: "; font-style:normal; font-family:var(--f-ui); font-weight:500}
.eng-row-q.expert::before{content:"From the expert prompt: "}
.eng-fix{grid-column:2; margin-top:.4rem; padding:.6rem .75rem; border-radius:var(--r); background:var(--bg-2); font:400 var(--t-sm)/1.5 var(--f-ui); color:var(--ink-2)}
.eng-fix b{display:block; font-weight:600; color:var(--ink); margin-bottom:.15rem}
.eng-fix code{display:block; margin-top:.35rem; font:400 .84rem/1.5 var(--f-mono); color:var(--ink); white-space:pre-wrap}

/* ── text with marks ───────────────────────────────────────────────── */
.eng-text{white-space:pre-wrap; overflow-wrap:anywhere; font:400 .98rem/1.65 var(--f-serif); color:var(--ink); padding:1rem 1.15rem; max-height:34rem; overflow:auto}
.eng-text.mono{font:400 .85rem/1.6 var(--f-mono)}
.eng-m{--c:var(--ink-3); background:color-mix(in srgb, var(--c) 16%, transparent); color:inherit; border-radius:3px; box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--c) 70%, transparent); padding:0 .04em; transition:background .15s}
.eng-m[data-st="kept"]{--c:var(--st-kept)} .eng-m[data-st="broken"]{--c:var(--st-broken)} .eng-m[data-st="unclear"],.eng-m[data-st="added"]{--c:var(--st-unclear)}
.eng-m.on{background:color-mix(in srgb, var(--c) 34%, transparent)}

/* ── chips of details ──────────────────────────────────────────────── */
.eng-chips{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.35rem}
.eng-chip{font:500 var(--t-xs)/1 var(--f-ui); padding:.4rem .6rem; border-radius:999px; background:var(--hi-wash); color:var(--ink); border:1px solid color-mix(in srgb, var(--hi) 35%, transparent); cursor:pointer}
.eng-chip:hover,.eng-chip.on{border-color:var(--hi)}
.eng-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.9rem 1.4rem}
.eng-facts h4{font:600 var(--t-sm)/1.3 var(--f-ui); color:var(--ink); margin:0}

/* ── the repaired prompt and actions ───────────────────────────────── */
.eng-pre{margin:0; white-space:pre-wrap; overflow-wrap:anywhere; max-height:22rem; overflow:auto}
.eng-pre ins{text-decoration:none; background:var(--good-wash); box-shadow:inset 2px 0 0 var(--good)}
.eng-acts{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.7rem}
.eng-note{font:400 var(--t-sm)/1.5 var(--f-ui); color:var(--ink-3); margin-top:.6rem}
.eng-steps{counter-reset:s}
.eng-faq details{border-top:1px solid var(--line); padding:.8rem 0}
.eng-faq summary{cursor:pointer; font:600 1rem/1.4 var(--f-ui); color:var(--ink)}
.eng-faq p{margin-top:.5rem}

/* ── questions, written by build.mjs from <!-- @faq --> (site.css styles them on site pages) ── */
.toolinfo .gd-faq{margin-top:2.2rem}
.toolinfo .gd-faq h2{font:400 1.5rem/1.2 var(--f-head); margin:0 0 .6rem}
.toolinfo .faq-list{border-top:1px solid var(--ink)}
.toolinfo .faq-list details{border-bottom:1px solid var(--line)}
.toolinfo .faq-list summary{cursor:pointer; list-style:none; padding:1rem 2.4rem 1rem 0; font:400 1.15rem/1.3 var(--f-head); position:relative; color:var(--ink)}
.toolinfo .faq-list summary::-webkit-details-marker{display:none}
.toolinfo .faq-list summary::after{content:"+"; position:absolute; right:.3rem; top:.85rem; font:300 1.5rem/1 var(--f-head); color:var(--ink-3); transition:transform .2s}
.toolinfo .faq-list details[open] summary::after{transform:rotate(45deg)}
.toolinfo .faq-list p{font:400 1.02rem/1.6 var(--f-serif); color:var(--ink-2); padding:0 0 1.1rem; max-width:62ch}

/* radio segments (role="radio"), which may wrap on a phone */
.eng .seg{flex-wrap:wrap}
.eng .seg button[aria-checked="true"]{background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(20,26,23,.12), 0 0 0 1px var(--line-2)}
.eng-row[data-st="info"]{--c:var(--accent)}