/* Das Ideenbrett - Gestaltung zu public/devideen.js.

   Arbeitet ausschliesslich mit den Werten aus styles.css: Farben ueber
   var(--...), Schriftgroessen ueber --fs-xs..--fs-xl, Radien 8/12px,
   Abstaende in 4/8/12/16px. Keine neuen Farben, keine neuen Groessen.
   Alle Klassen tragen das Praefix di-.

   DIE ENTSCHEIDUNG, DIE HIER SICHTBAR WIRD

   Der Stand einer Idee wird auf DREI Wegen gleichzeitig gezeigt:
     1. ein Satz ("1 von 2 Zustimmungen. Es fehlt noch 1."),
     2. ein Balken aus so vielen Feldern, wie es Zustimmungen braucht,
     3. eine farbige Kante links an der Karte.
   Farbe allein taete es nicht: Sie ueberlebt weder Farbenblindheit noch eine
   Vorlesehilfe noch einen Schwarzweissausdruck. Und an dieser Unterscheidung
   haengt die teuerste Frage des ganzen Werkzeugs - darf daran gearbeitet
   werden oder nicht. Der Balken traegt darum zusaetzlich ein aria-label mit
   demselben Satz; wer ihn nicht sieht, hoert ihn.

   WARUM DIE ABLEHNUNG DIE LAUTESTE FARBE HAT und nicht die Zustimmung: Eine
   Zustimmung braucht niemanden mehr, sie traegt die Idee weiter. Eine
   begruendete Ablehnung ist die einzige Zeile, die jemand LESEN muss, damit
   es weitergeht.

   Geladen in index.html nach styles.css. */

/* ====================================================== Das Fach */

.di-fach {
  display: flex;
  flex-direction: column;
  gap: var(--luft-block, 16px);
  font-size: var(--fs-md);
  color: var(--text-primary);
}

.di-kopfzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.di-kopfzeile h3 {
  margin: 0;
  font-size: var(--fs-lg);
}

.di-neu {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--accent-fg);
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
}

.di-neu:hover { background: var(--accent-soft); }

.di-neu:focus-visible,
.di-knopf:focus-visible,
.di-knopf-still:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Die Regel steht fest und laesst sich nicht wegklicken - sie ist der ganze
   Grund fuer dieses Fach. */
.di-regel {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Nur ein Adminkonto: Dann kann keine Idee je abgesegnet werden. Das ist
   keine Fehlermeldung, aber auch keine Nebenbemerkung. */
.di-allein {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--warning-ink, var(--text-primary));
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
  border-radius: 8px;
  padding: 12px;
}

.di-lage {
  margin: 0;
  min-height: 1em;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.di-lage-fehler {
  color: var(--critical-ink, var(--critical));
  background: color-mix(in srgb, var(--critical) 10%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--critical) 35%, var(--border));
  border-radius: 8px;
  padding: 8px 12px;
}

.di-leer {
  margin: 0;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 16px;
  font-size: var(--fs-sm);
}

/* ====================================================== Formulare */

.di-formular {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.di-formular h4 {
  margin: 0;
  font-size: var(--fs-md);
}

.di-feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.di-feld > span {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.di-feld input,
.di-feld textarea,
.di-grund-feld {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  resize: vertical;
}

/* Die mehrzeiligen Felder tragen zusaetzlich diese Klasse. Sie waere ueber
   `.di-feld textarea` entbehrlich - aber ein Klassenname, den das Skript
   setzt und den kein Stylesheet kennt, ist ein Verweis ohne Definition, und
   genau davon lebt das Halbfertig-Verbot dieses Projekts. */
.di-feld-lang { min-height: 4.5em; }

.di-feld input:focus-visible,
.di-feld textarea:focus-visible,
.di-grund-feld:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ====================================================== Abschnitte */

.di-abschnitt {
  display: block;
  margin-top: var(--luft-block, 16px);
}

.di-abschnitt-kopf {
  margin: 0 0 4px;
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: default;
}

/* Als <summary> ist derselbe Kopf ein Schalter - dann darf er auch so
   aussehen. */
details.di-abschnitt > .di-abschnitt-kopf {
  cursor: pointer;
  color: var(--text-secondary);
}

details.di-abschnitt > .di-abschnitt-kopf:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.di-liste {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ====================================================== Die Karte */

.di-karte {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Angepinnt ist der offene Fall - er wartet auf eine Entscheidung. */
.di-karte[data-zustand="angepinnt"] { border-left-color: var(--warning); }
.di-karte[data-zustand="wunsch"] { border-left-color: var(--good); }
.di-karte[data-zustand="zurueckgezogen"] { border-left-color: var(--border); }

.di-kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.di-titel {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.di-wer {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.di-wann {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.di-fassung {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

.di-marke {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--surface-2);
}

.di-karte[data-zustand="angepinnt"] .di-marke {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-1));
  color: var(--warning-ink, var(--text-primary));
}

.di-karte[data-zustand="wunsch"] .di-marke {
  border-color: color-mix(in srgb, var(--good) 40%, var(--border));
  background: color-mix(in srgb, var(--good) 10%, var(--surface-1));
  color: var(--good-ink, var(--text-secondary));
}

.di-text {
  margin: 0;
  white-space: pre-wrap;
}

.di-warum {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.di-erledigt {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Eine Idee, um die sich seit Wochen niemand kuemmert. Sichtbar und nicht
   klein und grau: Ein Stapel, den niemand mehr liest, ist schlimmer als kein
   Stapel. */
.di-mahnung {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--warning-ink, var(--text-primary));
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-1));
  border-left: 3px solid var(--warning);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
}

/* ------------------------------------------------------ Der Stand */

.di-stand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--surface-sunken);
  border-radius: 8px;
  padding: 8px 12px;
}

.di-stand p {
  margin: 0;
  font-size: var(--fs-sm);
  flex: 1 1 12em;
}

.di-balken {
  display: flex;
  gap: 4px;
  flex: none;
}

.di-balken > span {
  width: 28px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
}

.di-balken > .di-balken-voll {
  background: var(--good);
  border-color: var(--good);
}

/* ------------------------------------------------------ Die Stimmen */

.di-stimmen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.di-stimme {
  font-size: var(--fs-sm);
  border-left: 3px solid var(--border);
  padding: 4px 0 4px 12px;
  color: var(--text-secondary);
}

.di-stimme-dafuer { border-left-color: var(--good); }

/* Die lauteste Zeile der Karte - siehe Kopf dieser Datei. */
.di-stimme-dagegen {
  border-left-width: 5px;
  border-left-color: var(--critical);
  background: color-mix(in srgb, var(--critical) 8%, var(--surface-1));
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  color: var(--text-primary);
}

.di-stimme-grund {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.di-zaehlt-nicht {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ------------------------------------------------------ Knoepfe */

.di-knoepfe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.di-knopf {
  flex: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.di-knopf:hover { filter: brightness(1.08); }

.di-knopf:disabled,
.di-knopf-still:disabled {
  background: var(--border-strong);
  color: var(--text-muted);
  cursor: default;
  filter: none;
}

.di-knopf-still {
  flex: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.di-knopf-still:hover { background: var(--surface-2); }

/* ------------------------------------------------------ Grund und Nachfrage */

.di-grund {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: color-mix(in srgb, var(--critical) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--critical) 30%, var(--border));
  border-radius: 12px;
  padding: 12px;
}

.di-grund > label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

/* Die Nachfrage steht NEBEN dem Knopf und nicht in einem Dialog: Das Projekt
   kommt von confirm() weg, und eine Ansicht, die als Einzige wieder eines
   aufmacht, ist die, die man beim naechsten Umbau vergisst. */
.di-nachfrage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 12px;
}

/* ====================================================== Schmale Schirme */

/* In der Konsole ist die Spalte oft nur gut 320px breit. Dann kostet die
   Marke am rechten Rand mehr, als sie ordnet. */
@media (max-width: 520px) {
  .di-marke { margin-left: 0; }

  .di-stand { align-items: flex-start; }

  .di-knoepfe > .di-knopf,
  .di-knoepfe > .di-knopf-still {
    flex: 1 1 auto;
  }
}