/* ============================================================
   🧠 Hindsight-Gedächtnis (js/hindsight.js renderSettings) — Abschnitt
   in ⚙️ KI-Einstellungen: Schalter, Bridge, Dienst-Zustand, Besitzer-
   Verwaltung, Risiko-Hinweis mit „Verstanden", Übernahme, Testfrage.
   PS1-Retro: nur Farb-Tokens, harte Kanten, Hard-Shadows, keine Gradients.
   ============================================================ */

.hsx { border: 2px solid var(--line); background: var(--surface); box-shadow: 4px 4px 0 var(--shadow-c); padding: 12px; margin: 14px 0; }
.hsx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hsx-head h3 { margin: 0; font-size: 1rem; }
.hsx-head h3 small { font-weight: 400; color: var(--muted); font-size: .8rem; }
.hsx-switch { display: inline-flex; align-items: center; gap: 6px; font-family: var(--px); font-size: .62rem; text-transform: uppercase; cursor: pointer; }
.hsx-help { color: var(--muted); font-size: .85rem; line-height: 1.5; margin: 8px 0; }
.hsx-help b, .hsx-risk b { color: var(--text); }
.hsx-note { font-size: .85rem; line-height: 1.45; margin: 8px 0; padding: 8px 10px; border: 2px dashed var(--border); background: var(--bg); }
.hsx-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: .85rem; }
.hsx-row select { flex: 1 1 auto; min-width: 0; }
.hsx-status { margin: 8px 0; padding: 8px 10px; background: var(--surface-2); border: 2px solid var(--border); font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; }
.hsx-status code, .hsx code { font-family: var(--mono); font-size: .8em; }
.hsx-dot { display: inline-block; min-width: 1.2em; }
.hsx-sub { display: block; color: var(--muted); font-size: .78rem; margin-top: 4px; line-height: 1.4; }
.hsx-err { color: var(--danger); }
.hsx-owner { margin: 10px 0; padding: 10px; border: 2px solid var(--accent); box-shadow: 3px 3px 0 var(--accent-soft); background: var(--bg); }
.hsx-lbl { font-family: var(--px); font-size: .58rem; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.hsx-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hsx-model { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 10px; }
.hsx-model label { flex: 1 1 240px; min-width: 0; font-size: .8rem; }
.hsx-model input { width: 100%; }
.hsx-share { margin-top: 10px; }
.hsx-risk { margin: 10px 0; padding: 10px 12px; border: 2px solid var(--danger); background: var(--surface-2); box-shadow: 3px 3px 0 var(--shadow-c); font-size: .85rem; line-height: 1.45; }
.hsx-risk-h { font-family: var(--px); font-size: .62rem; font-weight: 700; text-transform: uppercase; color: var(--danger); margin-bottom: 8px; }
.hsx-risk ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.hsx-risk li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: 6px; }
.hsx-risk p { margin: 0 0 8px; }
.hsx-ack { display: inline-flex; align-items: center; gap: 6px; margin: 4px 12px 8px 0; cursor: pointer; font-size: .85rem; }
.hsx-tools { display: grid; gap: 8px; margin-top: 10px; }
.hsx-tools > .btn { justify-self: start; }
.hsx-ask { display: flex; gap: 8px; flex-wrap: wrap; }
.hsx-ask input { flex: 1 1 220px; min-width: 0; }
.hsx-answer { white-space: pre-wrap; padding: 8px 10px; border-left: 4px solid var(--accent); background: var(--surface-2); font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.hsx-msg { font-size: .85rem; margin: 8px 0 0; color: var(--text); }
@media (max-width: 560px) {
  .hsx { padding: 10px; }
  .hsx-row { flex-direction: column; align-items: stretch; }
}