/* cf-anlern.css — Ansicht "Anlernen" (Elite Club). Nur Ergaenzungen zum bx-Baukasten
 * aus cf-abx.css; alle Farben/Radien aus den Konsolen-Token (kein zweites Farbsystem). */

/* Herkunftszeile: sagt IMMER, woher die Zahlen kommen (gemessen / nicht erreichbar). */
.al-src{font-size:.875rem;color:var(--ink-faint);margin:14px 2px 6px}
.al-src.warn{color:var(--warn)}

/* Formular */
.al-form{margin-top:14px}
.al-zeile{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-top:12px}
.al-feld{display:flex;flex-direction:column;gap:6px;flex:1 1 16rem;min-width:0}
.al-feld>span{font-size:.875rem;color:var(--ink-soft)}
.al-feld input{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);padding:10px 12px;font:inherit;min-height:44px}
.al-feld input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.al-feld-schmal{flex:0 0 auto}
.al-maxwahl{display:flex;gap:6px}
.al-max{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink-soft);padding:10px 14px;min-height:44px;min-width:44px;cursor:pointer;font:inherit;white-space:nowrap}
.al-max.on{background:var(--lime);color:var(--on-lime);border-color:var(--lime);font-weight:600}
.al-max:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.al-formnote{min-height:1.2em;font-size:.875rem;color:var(--ink-soft);margin-top:8px}

/* Lauf-Karte: Phasenkette + Kandidaten */
.al-lauf{margin-top:12px}
.al-kopfchip{font-size:.875rem;color:var(--ink-faint);border:1px solid var(--line);
  border-radius:999px;padding:2px 10px;white-space:nowrap}
.al-phasen{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.al-ph{font-size:.875rem;border:1px solid var(--line);border-radius:999px;padding:4px 10px;
  color:var(--ink-faint);background:var(--surface)}
.al-ph b{font-weight:600;color:var(--ink-soft);margin-right:4px}
.al-ph.laeuft{border-color:var(--info);color:var(--info)}
.al-ph.fertig{border-color:var(--good);color:var(--good)}
.al-ph.fehler{border-color:var(--bad);color:var(--bad)}
.al-ph.unbekannt{border-color:var(--warn);color:var(--warn)}
.al-kand{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px;display:flex;
  flex-wrap:wrap;gap:8px;align-items:center}
.al-kand-t{flex:1 1 100%;font-size:.875rem;color:var(--ink-soft)}
.al-ts{font-size:.875rem;color:var(--ink-faint);margin-left:auto}

/* Leerer Zustand + Skelett (gleiche Hoehe wie eine Lauf-Karte — kein Springen) */
.al-leer{border:1px dashed var(--line);border-radius:var(--r);padding:22px;margin-top:12px;
  color:var(--ink-soft);font-size:.9rem}
.al-skel{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.al-skel div{height:6rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  animation:al-puls 1.2s ease-in-out infinite}
@keyframes al-puls{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.al-skel div{animation-duration:.01ms}}

/* Skill-Skript */
.al-skript{margin-top:12px}
.al-pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.875rem;line-height:1.5;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px;max-height:24rem;overflow:auto;color:var(--ink-soft)}

/* Rechte-Ampel: die Farbe ist NIE die einzige Information (R28d) — jede
   Einstufung traegt ihren Text, und darunter steht der Grund. */
.al-ampel{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.al-amp{font-size:.875rem;border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;color:var(--ink-soft);background:var(--surface);white-space:nowrap}
.al-amp b{font-weight:700;margin-right:4px}
.al-amp.gut{border-color:var(--good);color:var(--good)}
.al-amp.info{border-color:var(--info);color:var(--info)}
.al-amp.warn{border-color:var(--warn);color:var(--warn)}
.al-amp.bad{border-color:var(--bad);color:var(--bad)}

/* Quellen-Register */
.al-qliste{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.al-quelle{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--surface)}
.al-qkopf{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.al-qkopf b{font-weight:600;color:var(--ink)}
.al-qart{font-size:.875rem;color:var(--ink-faint);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px}
.al-qgrund{font-size:.875rem;color:var(--ink-soft);margin-top:6px}
.al-qfuss{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.al-qurl{font-size:.875rem;color:var(--ink-faint);overflow-wrap:anywhere;flex:1 1 12rem;min-width:0}
.al-anker{font-size:.875rem;color:var(--ink-soft);margin-top:8px}
.al-anker.warn{color:var(--warn)}

/* Upload: das Dateifeld liegt unsichtbar im Etikett — der Knopf ist das Etikett,
   damit die Bedienung dieselbe Form hat wie die uebrigen Schaltflaechen. */
.al-upload{cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
.al-upload:focus-within{outline:2px solid var(--lime);outline-offset:2px}