/* Vanilla-HTML/CSS translations of the history.digital reference components
   (_input/design_handoff_design_system/components/**). Behaviour/states match the .jsx
   source 1:1; markup uses real <input> elements under <label> so keyboard/AT support is native. */

/* ---------- Button ---------- */
.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  padding: 14px 28px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.btn:hover:not(:disabled) { transform: translateY(-2px); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--sm { padding: 8px 18px; font-size: var(--text-xs); }
.btn--lg { padding: 18px 36px; font-size: var(--text-md); }

.btn--primary { background: var(--accent); color: var(--ink-on-accent); }
.btn--primary:hover:not(:disabled) { background: color-mix(in oklch, var(--accent) 95%, black); color: var(--ink-on-accent); }

.btn--secondary { background: var(--ink); color: var(--bg); }
.btn--secondary:hover:not(:disabled) { background: oklch(28% 0.002 0); color: var(--bg); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--outline:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); }

/* ---------- Field label / hint ---------- */
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.field__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.field__hint { font-size: var(--text-2xs); color: var(--ink-faint); }

/* ---------- Input / Select / Textarea ---------- */
.input, .select, .textarea {
  font: inherit;
  font-size: var(--text-sm);
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-standard), outline var(--duration-fast) var(--ease-standard);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 3px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}
.textarea { min-height: 120px; resize: vertical; }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* ---------- Checkbox ---------- */
.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
}
.checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checkbox__box {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.checkbox__box svg { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.checkbox__box svg path, .chip__box svg path { fill: none; stroke: var(--ink-on-accent); }
.checkbox input:checked + .checkbox__box {
  background: var(--accent);
  border-color: var(--accent);
}
.checkbox input:checked + .checkbox__box svg { opacity: 1; }
.checkbox input:focus-visible + .checkbox__box {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* ---------- Radio ---------- */
.radio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
  padding-block: 2px;
}
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio__dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.radio__dot::after {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.radio input:checked + .radio__dot { border-color: var(--accent); }
.radio input:checked + .radio__dot::after { transform: scale(1); }
.radio input:focus-visible + .radio__dot {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.radio-group { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Slider ----------
   Value-Anzeige sitzt unterhalb des Reglers, horizontal an der aktuellen Reglerposition
   ausgerichtet (per JS als left:calc(...)-Wert gesetzt, unter Berücksichtigung des
   Thumb-Radius, siehe syncSliderValuePosition in chat-engine.js) statt daneben —
   .slider-track reserviert dafür Platz unter der Spur und ist der Positionierungs-
   Bezugsrahmen. Keine transition auf left: die Anzeige muss dem Finger/Cursor 1:1 folgen,
   eine Animation läuft beim schnellen Ziehen sichtbar hinterher. */
.slider-field { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* .slider-value hängt als absolut positioniertes Element unterhalb der Spur und zählt
     dadurch nicht zur Zeilenhöhe - Reserveplatz kommt bewusst über margin-bottom auf der
     ganzen Zeile, nicht über padding auf .slider-track (das würde die Zeile aufblähen und
     die Endlabels aus der Mitte drücken, siehe Feedback "Slider höher als row__end"). */
  margin-bottom: 32px;
}
.slider-row__end {
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  width: 148px;
  flex-shrink: 0;
  line-height: var(--leading-snug);
}
.slider-row__end--right { text-align: right; }

.slider-track {
  position: relative;
  flex: 1;
}

.slider {
  width: 100%;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.slider--untouched::-webkit-slider-thumb { background: var(--border-strong); border-color: var(--border-strong); }
.slider--untouched::-moz-range-thumb { background: var(--border-strong); border-color: var(--border-strong); }

/* Kurzes "Pop" am Thumb beim Loslassen des Reglers (is-releasing wird per JS in
   popOnRelease() gesetzt, siehe chat-engine.js) - rein dekoratives Feedback, kein
   State. box-shadow kehrt nach der Animation automatisch zur Basisregel oben zurück. */
@keyframes slider-thumb-pop {
  0% { transform: scale(1); box-shadow: var(--shadow-sm); }
  40% { transform: scale(1.45); box-shadow: 0 0 0 8px color-mix(in oklch, var(--accent) 30%, transparent); }
  100% { transform: scale(1); box-shadow: var(--shadow-sm); }
}
.slider.is-releasing::-webkit-slider-thumb { animation: slider-thumb-pop var(--duration-slow) var(--ease-standard); }
.slider.is-releasing::-moz-range-thumb { animation: slider-thumb-pop var(--duration-slow) var(--ease-standard); }

.slider-value {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
  text-align: center;
  white-space: nowrap;
  color: var(--accent-strong);
}
.slider-value--empty { color: var(--ink-faint); }

/* Textstufen-Variante für scale-slider (z.B. "Eher unwichtig" statt einer Zahl) */
.slider-value--wide {
  white-space: normal;
  width: max-content;
  max-width: 160px;
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--leading-snug);
}

/* Ausweich-Optionen neben einem scale-slider ("Weiss nicht", Filteroption) */
.escape-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.escape-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.escape-btn:hover { background: var(--surface-sunken); }
.escape-btn.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

/* ---------- Chip (checkbox-styled selection card, epochs/themes/options) ---------- */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .chip-grid { grid-template-columns: 1fr; }
}
.chip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.chip:hover { background: var(--surface-sunken); box-shadow: var(--shadow-md); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip__box {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.chip__box svg { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.chip input:checked + .chip__box { background: var(--accent); border-color: var(--accent); }
.chip input:checked + .chip__box svg { opacity: 1; }
.chip:has(input:checked), .chip.is-selected { border-color: var(--accent); background: var(--accent-softer); }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.chip__text { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); color: var(--ink); }
.chip__kurz { font-size: var(--text-2xs); color: var(--ink-muted); line-height: var(--leading-snug); }

.chip--disabled { opacity: 0.45; cursor: not-allowed; }
.chip--disabled:hover { background: var(--surface); }

@keyframes chip-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.chip--limit-shake { animation: chip-shake var(--duration-slow) var(--ease-standard); border-color: var(--alert-strong); }

.chip-limit {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.chip-limit--reached { color: var(--accent-strong); }

/* ---------- Matrix (Interesse/Zustimmung) ----------
   Ein einziger DOM-Baum (keine doppelten Inputs für Desktop/Mobile): Zeilen sind CSS-Grid
   auf breiten Screens (Zeilenlabel + 4 Skalenspalten, Header nennt die Stufen einmal oben)
   und werden unter 640px zu gestapelten Karten je Zeile, wobei jede Zelle ihr Label selbst
   mitträgt (auf Desktop per Spaltenüberschrift redundant, daher dort visuell versteckt). */
.matrix { display: flex; flex-direction: column; }
.matrix__header {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 2px solid var(--ink);
}
.matrix__header span { font-size: var(--text-2xs); font-weight: 600; color: var(--ink-muted); text-align: center; }
.matrix__header span:first-child { text-align: left; }

.matrix__row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.matrix__rowlabel {
  font-size: var(--text-sm);
  font-weight: 600;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.matrix__kurz { display: block; font-size: var(--text-2xs); font-weight: 400; color: var(--ink-muted); margin-top: 3px; }
.matrix__cell { display: flex; justify-content: center; cursor: pointer; }
.matrix__cell-label { display: none; }

@media (max-width: 640px) {
  .matrix__header { display: none; }
  .matrix__row {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
  }
  .matrix__cell {
    justify-content: flex-start;
    gap: 12px;
    padding-block: 7px;
  }
  .matrix__cell-label { display: inline; font-size: var(--text-sm); }
}

/* ---------- Badge / Tag ---------- */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.badge--accent { background: var(--accent-soft); color: var(--accent-strong); }
.badge--alert { background: var(--alert-soft); color: var(--alert-strong); }
.badge--dark { background: var(--ink); color: var(--bg); }

/* ---------- Progress / step indicator ---------- */
.stepper { display: flex; flex-direction: column; gap: 10px; }
.stepper__row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
}
.stepper__label { color: var(--ink-faint); text-transform: uppercase; }
.stepper__count { color: var(--ink); font-weight: 600; }
.stepper__track { height: 6px; border-radius: var(--radius-full); background: var(--border); overflow: hidden; }
.stepper__fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width var(--duration-normal) var(--ease-standard); }