/* ==========================================================================
   MyStats / Nukleus – Bausteine, Version 2 (Stil des H.E.R.O. Interface)
   Verwendet ausschließlich var(--…) aus tokens.css. Keine festen Farbwerte.
   Reihenfolge einbinden: fonts/fonts.css, tokens.css, components.css
   Bausteine: .wordmark  .card  .level  .progress  .chip  .button  .field  .collapse
   ========================================================================== */

/* ---- Grundlage ---- */
:root,
[data-theme] {
  color-scheme: var(--scheme);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Seite: dunkle Fläche mit zwei weichen Lichtflecken (Cyan links oben, Gold rechts oben)
   und einem feinen Punktraster. Alles aus Tokens, nichts bewegt sich. */
body,
.theme-scope {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(1100px 560px at 8% -8%, var(--color-bg-glow-1), var(--color-clear) 62%),
    radial-gradient(900px 480px at 100% 0%, var(--color-bg-glow-2), var(--color-clear) 58%),
    radial-gradient(var(--color-bg-dot) 1px, var(--color-clear) 1.4px);
  background-size: auto, auto, var(--size-dot-grid) var(--size-dot-grid);
  background-repeat: no-repeat, no-repeat, repeat;
}

/* Die Lichtflecken werden auf die Größe der Seite gezogen. Auch kurze Seiten (Anmeldung, Startseite)
   füllen deshalb mindestens den Bildschirm, sonst würde der Hintergrund unten abgeschnitten. */
html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading);
}

::selection {
  background: var(--color-fx-glow-cyan);
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* ==========================================================================
   Wortmarke (die einzige Stelle für Orbitron neben dem Level-Badge)
   <h1 class="wordmark">MyStats</h1>
   ========================================================================== */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--color-gold-text);
  text-shadow: 0 0 14px var(--color-fx-wordmark-glow);
}

/* ==========================================================================
   Karte (Panel)
   <section class="card">
     <header class="card__head"><h2 class="card__title">Titel</h2><span class="card__hint">Hinweis</span></header>
     …Inhalt…
   </section>
   Akzente: Eckklammern links oben und rechts unten (::before, ::after), im Kopf eine
   Goldraute vor dem Titel und eine auslaufende Linie dahinter.
   ========================================================================== */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-deep));
  color: var(--color-text);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: inset 0 1px 0 var(--color-panel-highlight), var(--shadow-card);
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  width: var(--size-bracket);
  height: var(--size-bracket);
  border: var(--focus-width) solid var(--color-fx-bracket);
  opacity: .75;
  pointer-events: none;
  filter: drop-shadow(0 0 5px var(--color-fx-glow-cyan));
}

.card::before {
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: var(--radius-lg);
}

.card::after {
  right: calc(-1 * var(--border-width));
  bottom: calc(-1 * var(--border-width));
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: var(--radius-lg);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  color: var(--color-blue);
}

.card__title::before {
  content: "";
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  background: var(--color-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--color-fx-glow);
}

.card__title::after {
  content: "";
  flex: 1 1 var(--space-6);
  min-width: var(--space-6);
  height: var(--border-width);
  background: linear-gradient(90deg, var(--color-fx-hairline), var(--color-clear));
}

.card__hint {
  flex: none;
  font-size: var(--text-sm);
  color: var(--color-text-3);
}

/* ==========================================================================
   Level-Ring mit Badge
   <div class="level" style="--level: 68" role="img" aria-label="Level 68 Prozent">
     <svg viewBox="0 0 120 120" aria-hidden="true">
       <circle class="level__ticks" cx="60" cy="60" r="55" pathLength="120"/>   Skalenstriche
       <circle class="level__track" cx="60" cy="60" r="46"/>
       <circle class="level__face"  cx="60" cy="60" r="37"/>
       <circle class="level__person" cx="60" cy="53" r="11"/>
       <path   class="level__person" d="M35.8 88C38 73 48 66 60 66s22 7 24.2 22A37 37 0 0 1 35.8 88Z"/>
     </svg>
     <svg class="level__arc" viewBox="0 0 120 120" aria-hidden="true">          Goldring mit Leuchten
       <circle class="level__value" cx="60" cy="60" r="46" pathLength="100"/>
     </svg>
     <span class="level__badge">68&nbsp;%</span>
   </div>
   --level ist eine Zahl von 0 bis 100.
   ========================================================================== */
.level {
  position: relative;
  flex: none;
  width: var(--size-level);
  aspect-ratio: 1;
}

.level svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.level__ticks {
  fill: none;
  stroke: var(--color-fx-tick);
  stroke-width: 5;
  stroke-dasharray: 0.28 1.72;
}

.level__track {
  fill: none;
  stroke: var(--color-track);
  stroke-width: 8;
}

.level__face {
  fill: var(--color-blue-soft);
  stroke: var(--color-fx-tick);
  stroke-width: 1;
}

.level__person {
  fill: var(--color-blue);
  filter: drop-shadow(0 0 3px var(--color-fx-glow-cyan));
}

.level__arc {
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 var(--size-glow) var(--color-fx-glow));
}

.level__value {
  fill: none;
  stroke: var(--color-gold-graphic);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--level, 0));
  opacity: min(var(--level, 0), 1);
  transition: stroke-dashoffset var(--transition-slow);
}

.level__badge {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--space-2));
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-4);
  border: var(--border-width) solid var(--color-gold);
  border-radius: var(--radius-pill);
  background: var(--color-surface-deep);
  color: var(--color-gold-text);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 0 16px var(--color-fx-glow);
}

/* ==========================================================================
   Fortschrittsbalken
   <div class="progress__meta"><span>Python</span><span class="progress__value">75&nbsp;%</span></div>
   <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" style="--value: 75">
     <span class="progress__bar"></span>
   </div>
   ========================================================================== */
.progress {
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-track);
  overflow: hidden;
}

.progress__bar {
  display: block;
  height: 100%;
  width: calc(var(--value, 0) * 1%);
  border-radius: inherit;
  background: var(--color-gold-graphic);
  box-shadow: 0 0 10px var(--color-fx-glow);
  transition: width var(--transition-slow);
}

.progress__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.progress__value {
  font-weight: var(--weight-bold);
  color: var(--color-gold-text);
}

/* ==========================================================================
   Chip / Tag
   <span class="chip">Neutral</span>  .chip--gold  .chip--blue  .chip--green
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-text-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.7;
  white-space: nowrap;
}

.chip--gold {
  border-color: var(--color-gold);
  background: var(--color-gold-soft);
  color: var(--color-gold-text);
}

.chip--blue {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.chip--green {
  border-color: var(--color-green-text);
  background: var(--color-green-soft);
  color: var(--color-green-text);
}

/* ==========================================================================
   Button
   <button class="button button--primary">Speichern</button>
   <button class="button">Abbrechen</button>
   <button class="button button--quiet">Später</button>
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-control);
  padding: 0 var(--space-5);
  border: var(--border-width) solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-blue);
  font: inherit;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.button:hover {
  border-color: var(--color-blue);
  box-shadow: 0 0 16px var(--color-fx-glow-cyan);
}

.button--primary {
  border-color: var(--color-gold);
  background: var(--color-gold-soft);
  color: var(--color-gold-text);
}

.button--primary:hover {
  border-color: var(--color-gold-hover);
  box-shadow: 0 0 20px var(--color-fx-glow);
}

.button--quiet {
  border-color: var(--color-clear);
  background: var(--color-clear);
  color: var(--color-blue);
}

.button--quiet:hover {
  border-color: var(--color-clear);
  background: var(--color-blue-soft);
  box-shadow: none;
}

.button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

/* ==========================================================================
   Eingabefeld
   <label class="field">
     <span class="field__label">Name</span>
     <input class="field__input" type="text" placeholder="Neuer Skill">
     <span class="field__hint">Hinweis</span>
   </label>
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-2);
}

.field__input {
  width: 100%;
  min-height: var(--size-control);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--weight-semibold);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field__input::placeholder {
  color: var(--color-text-3);
  font-weight: var(--weight-normal);
}

.field__input:hover {
  border-color: var(--color-blue);
}

.field__input:focus-visible {
  border-color: var(--color-blue);
  outline-offset: 0;
  box-shadow: 0 0 12px var(--color-fx-glow-cyan);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

/* ==========================================================================
   Einklappbarer Bereich (standardmäßig zu, ohne Skript)
   <details class="collapse">
     <summary class="collapse__summary">Details</summary>
     <div class="collapse__body">Inhalt</div>
   </details>
   ========================================================================== */
.collapse {
  border-top: var(--border-width) solid var(--color-line);
}

.collapse__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  list-style: none;
  cursor: pointer;
  font-weight: var(--weight-semibold);
}

.collapse__summary::-webkit-details-marker {
  display: none;
}

.collapse__summary::after {
  content: "";
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  margin-right: var(--space-1);
  border-right: var(--focus-width) solid var(--color-blue);
  border-bottom: var(--focus-width) solid var(--color-blue);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.collapse[open] > .collapse__summary::after {
  transform: rotate(-135deg);
}

.collapse__body {
  padding: 0 0 var(--space-4);
  color: var(--color-text-2);
}