/* io-search-gui styles: responsive, no external resources */
:root{--bg:#f4f6f8;--card:#fff;--fg:#1c2530;--muted:#66727f;--acc:#1f5fa8;--bd:#d6dde4;--err:#b3261e;--ok:#1b7f3b;--warn:#a15c00}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg)}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--bd)}
h1{font-size:1.25rem;margin:0}h2{font-size:1.1rem;margin:.2em 0}h3{font-size:1rem;margin:.6em 0 .2em}
nav{display:flex;gap:6px;align-items:center}nav form{margin:0}
main{max-width:980px;margin:0 auto;padding:12px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:12px;margin:10px 0}
.narrow{max-width:360px;margin:12vh auto}
.row{display:flex;gap:8px}.row.wrap{flex-wrap:wrap;align-items:center;margin-top:8px}
input,select,button{font:inherit;padding:8px 10px;border:1px solid var(--bd);border-radius:8px;background:#fff;color:var(--fg)}
input[type=search],input#q{flex:1;min-width:0}
label{display:flex;flex-direction:column;gap:3px;font-size:.85rem;color:var(--muted)}
label.inline{flex-direction:row;align-items:center;gap:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}
button{cursor:pointer;background:var(--acc);color:#fff;border-color:var(--acc)}
button:disabled{opacity:.6;cursor:wait}
button.secondary{background:#fff;color:var(--acc)}
button.link,button.tab{background:transparent;color:var(--acc);border-color:transparent}
button.tab.active{border-bottom:2px solid var(--acc);border-radius:0}
.muted{color:var(--muted);font-size:.9rem}.err{color:var(--err)}
.banner{margin:10px 12px;padding:10px;border-radius:8px;background:#fdecea;color:var(--err);border:1px solid #f3b8b3}
.hit{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:10px 12px;margin:8px 0}
.hit h3 a,.hit h3 button.link{padding:0;text-align:left;font-weight:600;font-size:1rem;word-break:break-word}
.meta{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;margin:4px 0}
.chip{background:#eaf1f8;color:#25476b;border-radius:999px;padding:1px 9px}
.chip.warn{background:#fff1dc;color:var(--warn)}.chip.ok{background:#e4f4e8;color:var(--ok)}.chip.bad{background:#fdecea;color:var(--err)}
.snip{white-space:pre-wrap;word-break:break-word;background:#f8fafb;border-left:3px solid var(--bd);padding:6px 8px;font-size:.9rem;max-height:9.5em;overflow:auto}
.src{font-size:.82rem;word-break:break-all}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);overflow:auto;z-index:10}
.modal-box{background:#fff;max-width:900px;margin:3vh auto;padding:14px;border-radius:10px;position:relative}
.close{position:absolute;right:8px;top:6px;background:transparent;color:var(--fg);border:0;font-size:1.6rem}
.doctext{white-space:pre-wrap;word-break:break-word;background:#f8fafb;border:1px solid var(--bd);padding:8px;max-height:55vh;overflow:auto;font-size:.9rem}
table{border-collapse:collapse;width:100%;font-size:.9rem}th,td{border-bottom:1px solid var(--bd);padding:5px 6px;text-align:left;vertical-align:top}
.tablewrap{overflow-x:auto}
@media(max-width:600px){main{padding:8px}.row{flex-direction:column}.row.wrap{flex-direction:row}header{padding:8px 10px}}

.hint{background:#fff6dd;border-left:4px solid #e0a800;padding:6px 10px;margin:6px 0}
.laufzeit{font-size:.85em}
details.steps{margin:8px 0}

#answer .snip{max-height:32em}