/* =====================================================================================
   Account-Dropdown "Mein Konto" (MMORPG-Anzeige, Etappe E1) -- 20.09.2026
   ---------------------------------------------------------------------------------------
   Ausbaustufe von #paxanAcctLink in der hub.html-eigenen Nav -- siehe den ausfuehrlich
   kommentierten Markup-Block #paxanAcctPanel direkt unter der Topbar in hub.html fuer die
   volle Begruendung (auth.js-Modal fuer Gaeste bleibt unveraendert, dieses Dropdown ist
   NUR fuer eingeloggte Nutzer:innen). Positionierung passiert per JS (position:fixed, an
   #paxanAcctLink verankert, siehe assets/js/account-panel.js) -- die Nav-Flexbox selbst
   bleibt unangetastet.

   Klassen-Praefix .acct- , additiv, eigene Datei, NUR ueber hub.html eingebunden.
   Marken-Tokens (siehe PAXAN_BRAIN.md §1) mit Hex-Fallback fuer den Fall, dass diese Datei
   je ohne die :root-Variablen aus hub.html geladen wird. Bewusst Flexbox statt CSS-Grid
   (PAXAN_BRAIN.md §1, Baumeister-Regel). Touch-Ziele durchgaengig >=44px Hoehe. */

.acct-panel{
  position:fixed;z-index:9000;width:min(340px,calc(100vw - 24px));
  background:var(--paper,#F5F3EE);border:1px solid var(--line,rgba(10,10,10,.14));
  border-radius:10px;box-shadow:0 16px 40px rgba(10,10,10,.2);
  padding:16px 18px 14px;font-family:var(--f-b,'Archivo',Helvetica,Arial,sans-serif);
  opacity:0;transform:translateY(-6px);
  transition:opacity .18s ease-out,transform .18s ease-out;
}
.acct-panel[hidden]{display:none}
.acct-panel.acct-open{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .acct-panel{transition:none}
}

.acct-panel-head{
  border-bottom:1px solid var(--line,rgba(10,10,10,.12));padding-bottom:10px;margin-bottom:12px;
  display:flex;flex-direction:column;gap:3px;
}
.acct-kicker{
  font-family:var(--f-m,'JetBrains Mono','Courier New',monospace);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim,#6A655C);
}
.acct-name{
  font-family:var(--f-d,'Unbounded','Arial Black',sans-serif);font-size:1.05rem;
  font-weight:700;color:var(--ink,#0A0A0A);
}

.acct-panel-body{display:flex;flex-direction:column;gap:14px;max-height:52vh;overflow-y:auto}
.acct-section h4{
  margin:0 0 6px;font-family:var(--f-m,'JetBrains Mono','Courier New',monospace);
  font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim,#6A655C);
}
/* Bewusst leer in diesem Durchgang (siehe hub.html-Kommentar) -- min-height verhindert nur,
   dass die Sektion optisch auf 0 zusammenklappt, bevor ein Folge-Durchgang sie befuellt. */
.acct-placeholder{min-height:18px;font-size:.82rem;color:var(--dim,#6A655C)}

/* ---- Charakter-Stats-Meter (Etappe E2/E3, siehe PAXAN_CHARAKTER_DROPDOWN_SPEC.md) ------
   Gleiche Balken-Optik wie das bestehende XP-/Lernpfad-Muster in hub.html (.xpbar/.path .bar):
   goldener Farbverlauf auf paper2-Track, 7px hoch, durchgehende Ampel-freie Farbe (Spec §2). */
.acct-group-kicker{
  font-family:var(--f-m,'JetBrains Mono','Courier New',monospace);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim,#6A655C);
  margin:0 0 6px;
}
.acct-group-kicker + .acct-group-kicker{margin-top:0}
.acct-meter + .acct-group-kicker{margin-top:12px}
.acct-meter{margin-bottom:10px}
.acct-meter:last-child{margin-bottom:0}
.acct-meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.acct-meter-label{font-size:.82rem;color:var(--ink,#0A0A0A)}
.acct-meter-value{
  font-family:var(--f-m,'JetBrains Mono','Courier New',monospace);font-size:.74rem;
  color:var(--dim,#6A655C);
}
.acct-meter-bar{height:7px;background:var(--paper2,#EFEBE2);border-radius:100px;overflow:hidden}
.acct-meter-fill{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep,#8A6E1B),var(--gold-hi,#E0B848));border-radius:100px}
.acct-meter-sub{margin-top:3px;font-size:.72rem;line-height:1.35;color:var(--dim,#6A655C)}

/* ---- Status-Zeilen Programm/Tagesaufgabe (schlichter Text, kein eigener Balken) --------- */
.acct-status-line{font-size:.82rem;color:var(--ink,#0A0A0A);line-height:1.4}

/* ---- Leitfaden (statischer Text, D) ------------------------------------------------------ */
.acct-guide p{margin:0 0 8px;font-size:.78rem;line-height:1.45;color:var(--dim,#6A655C)}
.acct-guide p:last-child{margin-bottom:0}

.acct-panel-foot{
  display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line,rgba(10,10,10,.12));
}
.acct-settings-btn,.acct-logout-btn{
  all:unset;box-sizing:border-box;display:block;width:100%;text-align:center;min-height:44px;
  line-height:44px;border-radius:6px;font-family:var(--f-m,'JetBrains Mono','Courier New',monospace);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.acct-settings-btn{border:1px solid var(--line,rgba(10,10,10,.2));color:var(--ink,#0A0A0A)}
.acct-settings-btn:hover,.acct-settings-btn:focus-visible{border-color:var(--gold,#C9A227);color:var(--gold-deep,#8A6E1B)}
.acct-logout-btn{border:1px solid rgba(166,64,46,.4);color:#A6402E}
.acct-logout-btn:hover,.acct-logout-btn:focus-visible{background:#A6402E;color:#fff}
.acct-settings-btn:focus-visible,.acct-logout-btn:focus-visible{outline:2px solid var(--gold,#C9A227);outline-offset:2px}

/* Unterhalb der Nav-Breakpoint-Grenze ist #paxanAcctLink selbst unsichtbar (hub.html:
   .nav .links{display:none} ab max-width:1180px, Burger-Menue mit eigenem, zweitem
   .js-auth-cta-Link uebernimmt) -- das Dropdown kann dort nie ueber die Nav geoeffnet
   werden. Trotzdem hart ausgeblendet, falls es waehrend eines Fenster-Resizes offen war
   (account-panel.js schliesst es beim Unterschreiten der Grenze zusaetzlich per JS). */
@media(max-width:1180px){.acct-panel{display:none!important}}