/* Chat Tower Companion -- pages/help.css
 * P6-Kette Glied 6/8 (web-241). Reine Verschiebung aus web/public/style.css.
 * Scope: /help (Spiel-Guide & FAQ). Keine Kaskaden-Abhaengigkeit zu anderen
 * pages/*.css-Dateien bekannt (kein geteilter Selektor gefunden, s.
 * web-241-Ticket Cross-File-Sweep). */


/* ===== Help-Seite ===== */

.help-page { padding: 1em 0 3em; }
.help-header { margin-bottom: 2em; }
.help-header h1 {
  font-size: 2em;
  margin: 0 0 0.3em;
  color: var(--text);
  text-shadow: 0 0 12px rgba(56, 225, 255, 0.25);
}
.help-header h1::before {
  content: '⚙ ';
  color: var(--cyan);
}
.help-lead { color: var(--muted); line-height: 1.5; max-width: 720px; margin: 0; }

.help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 1em;
  margin-bottom: 2em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.help-toc a {
  font-size: 0.9em;
  padding: 0.3em 0.7em;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  color: var(--muted);
}
.help-toc a:hover {
  text-decoration: none;
  color: var(--cyan);
  border-color: var(--cyan);
}

.help-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.4em 1.6em;
  margin-bottom: 1.2em;
  scroll-margin-top: 1em;
}
.help-section h2 {
  color: var(--cyan);
  font-size: 1.25em;
  margin: 0 0 0.7em;
  letter-spacing: 0.01em;
}
.help-section p {
  line-height: 1.6;
  margin: 0 0 0.8em;
  color: var(--text);
}
.help-section p:last-child { margin-bottom: 0; }
.help-section strong { color: var(--magenta); }
.help-section em { color: var(--yellow); font-style: normal; }
.help-section ul { line-height: 1.7; padding-left: 1.3em; margin: 0 0 0.8em; }
.help-section ul li { color: var(--text); }
/* web-136: h3 mit Top-Abstand nach vorangehendem Block (statt inline-Style) */
.help-section .h3-gap { margin-top: 18px; }
/* ui-215 DL-6: Inline-Code-Formeln (<code>) in Help umbrechen statt Viewport zu sprengen.
   overflow-wrap:anywhere erlaubt Umbruch auch mitten in Formel-Strings. */
.help-section code { overflow-wrap: anywhere; }

.help-hint {
  color: var(--muted);
  font-size: 0.9em;
  line-height: 1.5;
  margin: 0 0 1em !important;
}

.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}
.help-table th, .help-table td {
  text-align: left;
  padding: 0.5em 0.7em;
  border-bottom: 1px solid var(--line);
}
.help-table th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.help-table td:first-child { width: 8em; }
.help-table tr:last-child td { border-bottom: none; }
/* ui-215 DL-6: Help-Tabellen-Zellen umbrechen statt horizontal zu scrollen.
   overflow-wrap:anywhere erlaubt Zeilenumbruch auch mitten in langen Wörtern/Strings. */
.help-table td { white-space: normal; overflow-wrap: anywhere; }

/* Catalog (Effekt-/Waffen-Karten) — ui-265 DL-5 Proof-Surface B: fluide Type-/Space-Skala */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* IST 0.7em=10.5px vs. --sp-s-max 8px — bewusste Skalen-Angleichung (ui-265) */
  gap: var(--sp-s);
}
/* .catalog-card padding: IST 0.7em/0.9em=10.5px/13.5px vs. --sp-s/--sp-m-max 8px/12px —
   bewusste Skalen-Angleichung (ui-265) */
.catalog-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: var(--sp-s) var(--sp-m);
}
.catalog-card.weapon-catalog-card {
  border-color: rgba(255, 216, 74, 0.25);
}
.catalog-card.weapon-catalog-card.is-default {
  border-color: rgba(94, 255, 138, 0.35);
  background: rgba(94, 255, 138, 0.04);
}

/* ui-143: Meta-Progression-Pillars — je eine Rollenfarbe (Hexa/Tech-Tree/Achievements).
   Analog zur .weapon-catalog-card.is-default-Logik: Border-/BG-Tint + farbiges Symbol. */
.catalog-card--hexa {
  border-color: rgba(255, 69, 181, 0.30);
  background: rgba(255, 69, 181, 0.04);
}
.catalog-card--hexa .catalog-symbol {
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(255, 69, 181, 0.4);
}
.catalog-card--tree {
  border-color: rgba(56, 225, 255, 0.30);
  background: rgba(56, 225, 255, 0.04);
}
.catalog-card--tree .catalog-symbol {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(56, 225, 255, 0.4);
}
.catalog-card--ach {
  border-color: rgba(255, 216, 74, 0.30);
  background: rgba(255, 216, 74, 0.04);
}
.catalog-card--ach .catalog-symbol {
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 216, 74, 0.4);
}
/* Inline-Währungs-Glyphen im Fließtext (Tech-Tree / Meta-Progression) */
.g-hexa  { color: var(--cur-hexa); }  /* ui-623: SSOT-Token-Alias, Wert unverändert */
.g-skill { color: var(--cur-skill); } /* ui-623: vormals Magenta (identisch zu Hexa) */
.g-wp    { color: var(--yellow); }
.g-cyan  { color: var(--cyan); }

/* .catalog-head gap/margin-bottom: IST 0.5em/0.3em=7.5px/4.5px vs. --sp-xs/--sp-2xs-max
   6px/4px — bewusste Skalen-Angleichung (ui-265) */
.catalog-head {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-2xs);
}
/* .catalog-symbol: IST 1.25em=18.75px vs. --fs-h3-max 16.5px — bewusste Skalen-Angleichung (ui-265) */
.catalog-symbol {
  color: var(--yellow);
  font-size: var(--fs-h3);
  min-width: 1.4em;
  text-align: center;
}
.catalog-symbol.weapon-symbol { color: var(--yellow); text-shadow: 0 0 8px rgba(255, 216, 74, 0.4); }

/* In der Catalog-Card-Symbol-Zelle ist die Schriftgröße 1.25em — Icon soll
   das gleiche optische Gewicht haben wie die anderen Glyphen ⚔ ⏱ ✦ … */
.catalog-symbol .credit-icon { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
/* ui-585 (AK6): `.draw-result .reveal-symbol .credit-icon` entfernt — die
   Klasse `.reveal-symbol` wird von keinem Konsumenten mehr gebaut (weder
   dashboard.js/shop.js/help.js noch app.js/draw-stack.js), tote Regel. */

.draw-btn svg.draw-icon {
  vertical-align: -0.28em;
  margin-right: 0.35em;
}

.catalog-label { font-weight: 600; color: var(--text); flex: 1; font-size: var(--fs-body); }
.catalog-tag {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green);
  background: rgba(94, 255, 138, 0.08);
  padding: 0.15em 0.5em;
  border-radius: 10px;
}
/* .catalog-desc: IST 0.88em=13.2px vs. --fs-small-max 12.75px — bewusste Skalen-Angleichung (ui-265) */
.catalog-desc {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* Build-Karten */
.build-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.8em;
}
.build-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.9em 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.build-name {
  color: var(--magenta);
  font-weight: 600;
  font-size: 1.05em;
  text-shadow: 0 0 8px rgba(255, 69, 181, 0.25);
}
.build-meta { font-size: 0.85em; color: var(--muted); }
.build-weapon { color: var(--yellow); }
.build-sockets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}
.build-sockets li {
  background: rgba(56, 225, 255, 0.06);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 0.2em 0.6em;
  font-size: 0.85em;
  color: var(--text);
}
.build-sym { color: var(--yellow); margin-right: 0.2em; }
.build-note {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 0.88em !important;
  line-height: 1.45;
}

/* FAQ */
.faq-list { margin: 0; }
.faq-list dt {
  color: var(--cyan);
  font-weight: 600;
  margin: 0 0 0.3em;
}
.faq-list dt::before {
  content: '› ';
  color: var(--magenta);
}
.faq-list dd {
  margin: 0 0 1.2em;
  padding-left: 1em;
  color: var(--text);
  line-height: 1.5;
  border-left: 2px solid var(--line);
}
.faq-list dd:last-child { margin-bottom: 0; }

.help-foot {
  text-align: center;
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
}

/* ui-214: 600px beibehalten (s. Kanon-Kommentar in der Mobile-Sektion). Help-Seite:
   Tabellen-Komprimierung und ToC-Stack greifen sinnvoll bei Phablets/kleinen Tablets. */
@media (max-width: 600px) {
  .help-toc { flex-direction: column; }
  .help-toc a { text-align: center; }
  .help-table { font-size: 0.85em; }
  .help-table th, .help-table td { padding: 0.4em 0.5em; }
  .help-table td:first-child { width: auto; }
}