/* ==========================================================
   SEORCH Kontrast – Backend-Ergebnisse der Tool-Seiten (gemeinsam)
   Zustände (Laden/Fehler/leer), Aktionsleiste, Legacy-Raster der
   PHP-Fragmente, Status-Töne. Benötigt base.css, pages.css, tools.css
   ========================================================== */

/* ---------- Zustände ---------- */
.kit-loader { border-radius: 14px; background: var(--glass); border: 1px solid var(--stroke); text-align: center; }
.kit-loader b { color: var(--text); font-size: 18px; }
.kit-loader span { font-size: 14px; }
.kit-state { max-width: 760px; margin-inline: auto; }
.kit-state--err { border-color: color-mix(in srgb, var(--c1) 40%, transparent); background: color-mix(in srgb, var(--c1) 5%, var(--glass-2)); }
.kit-state__detail { max-width: 100%; overflow-wrap: anywhere; font-size: 12px; color: var(--text-2); }
.kit-state .btn { margin-top: 6px; }
.kit-spin { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c3) 25%, transparent); border-top-color: var(--c3); animation: rot .8s linear infinite; vertical-align: -2px; }
.kit-hint-err { color: var(--c1); }
.kit-inline-load::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--stroke-2); border-top-color: var(--text); animation: rot .8s linear infinite; vertical-align: -1px; }

/* ---------- Ergebniscontainer ---------- */
#result [hidden] { display: none !important; }
#result .btn { text-decoration: none; }
.kit-result { display: grid; gap: 20px; min-width: 0; }
.kit-result > * { margin-block: 0; min-width: 0; }
.kit-result h1 { margin: 0; overflow-wrap: anywhere; }
.kit-result h1:focus { outline: none; }
.kit-result h2 { margin: 12px 0 0; }
.kit-result h3 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.kit-result .box > :first-child { margin-top: 0; }
.kit-result .box > :last-child { margin-bottom: 0; }
.kit-result .box p { color: var(--text-2); }
.kit-result .grid_1 { display: grid; gap: 20px; }
.kit-result .grid_3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kit-result .grid_3_67 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.kit-result .center { text-align: center; }
.kit-result code { overflow-wrap: anywhere; }

/* Aktionsleiste (ehem. ul.subnav) */
.kit-result ul.kit-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; width: auto; list-style: none; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.kit-result ul.kit-actions a.btn { height: auto; padding: 6px 14px; color: var(--text); background: var(--glass-2); }
.kit-result ul.kit-actions a.btn--dark, #result .kit-result a.btn--dark { background: var(--text); color: var(--bg); }
.kit-result ul.kit-actions a.btn:hover { background: var(--glass-2); }
#result .kit-result a.btn--dark:hover { background: var(--text); color: var(--bg); }
.kit-result ul.kit-actions a[aria-busy="true"] { opacity: .6; cursor: progress; }
.kit-result ul.kit-actions a.is-failed { color: var(--muted); border-style: dashed; }
.kit-result ul.kit-actions li:first-child a { color: var(--text-2); }

/* Tabellen in Fragmenten */
.kit-result .kit-scroll { background: var(--glass-2); }
.kit-result .box .kit-scroll { border-radius: var(--r); }
.kit-result .kit-scroll table { min-width: 100%; }
.kit-result .kit-scroll:focus-visible { outline-offset: 2px; }
.kit-result table td { overflow-wrap: anywhere; }
.kit-result thead td { font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--bg-2) 60%, transparent); }

/* Status-Töne (aus Inline-Farben der PHP-Ausgaben) */
.tone--err { color: var(--c1); }
.tone--ok { color: var(--c4); }
.tone--info { color: var(--c3); }
.tone--wait { color: var(--c3); }
.tone--muted { color: var(--muted); }
:is(td, th, tr, div).tone { color: inherit; }
td.tone--err, td.red { background: color-mix(in srgb, var(--c1) 8%, transparent); color: var(--text); }
td.tone--ok { background: color-mix(in srgb, var(--c4) 8%, transparent); }
td.tone--info, td.tone--warn { background: color-mix(in srgb, var(--c3) 9%, transparent); }
tr.tone--muted { color: var(--muted); background: color-mix(in srgb, var(--gray) 10%, transparent); }
tr.tone--muted a { color: var(--muted); text-decoration: line-through; }
span.red, b.red, h3.red, h4 .red { color: var(--c1); }

/* letzte Abfragen */
ul.kit-lastview { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
ul.kit-lastview li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 10px; border-radius: 6px; transition: background .2s; }
ul.kit-lastview li:hover { background: var(--glass-2); }
ul.kit-lastview small { font: 600 11px var(--mono); color: var(--muted); letter-spacing: .02em; min-width: 8.5em; }
ul.kit-lastview a { font-weight: 600; text-decoration-color: var(--red); text-underline-offset: 3px; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .kit-result .grid_3, .kit-result .grid_3_67 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .kit-result { gap: 16px; }
  .kit-result .box { padding: 16px; }
  .kit-result h1 { font-size: 28px; }
}