/* Infektionsdynamiken.de / infectiondynamics.eu · coach-chips.css
   Author: B. D. Rausch
   License: CC BY 4.0
   Version: v3.2.0
   Created: 2025-09-11
   Last Review: 2025-09-18
   Last Change: 2025-09-18

   Purpose:
   Austauschbares Increment für Coach-Chips & Coins:
   - Hint-Chips (Merke, Warnung, Video, Takehome, Summary, Replay)
   - Coach-Coins (mini & large) mit Avatar und Badge
   - Autark: nutzt globale Tokens, hat aber Fallbacks (--ct-*)
   - Keine globalen Overrides, vollständig entkoppelt
*/

@charset "UTF-8";

/* --------------------------- Fallback-Tokens (nur lokal) ----------------- */
:root{
  --ct-bg:#0b0c10; --ct-ink:#121826; --ct-ink-strong:#0e1726;
  --ct-muted:#4b5563; --ct-panel:#18344f; --ct-panel-2:#1d3c59;
  --ct-surface:#ffffff; --ct-surface-alt:#f6f8fb;
  --ct-border:#2a4a68; --ct-brand:#00C6FF;
  --ct-ok:#00FF85; --ct-warn:#FFD27A; --ct-danger:#FF7D7D;
}

/* Mode-Mapping nur für Fallbacks */
html[data-mode="school"]{     --ct-brand:#2EC27E; --ct-ok:#2EC27E; }
html[data-mode="university"]{ --ct-brand:#00C6FF; }

/* --------------------------- Overlay-Lock -------------------------------- */
html.ct-open{ overflow:hidden; }

/* --------------------------- Hint-Chip ----------------------------------- */
.hint-chip{
  --case: var(--brand, var(--ct-brand));
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--border, var(--ct-border)) 70%, var(--panel, var(--ct-panel)));
  background: var(--panel, var(--ct-panel));
  color: var(--ink, var(--ct-ink));
  transition: transform .06s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hint-chip:hover{ transform: translateY(-1px); }
.hint-chip:active{ transform: translateY(0); }
.hint-chip:focus-visible{
  outline: 3px solid color-mix(in oklab, currentColor 35%, #fff);
  outline-offset: 2px;
}

.hc-ava{
  position:relative; width:24px; height:24px; border-radius:999px; flex:0 0 24px;
  background: center/cover no-repeat var(--img, var(--panel-2, var(--ct-panel-2)));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--case) 50%, var(--panel, var(--ct-panel)));
}
.hc-badge{
  position:absolute; right:-2px; top:-2px;
  width:12px; height:12px; border-radius:999px;
  background: var(--case); color:#061018; display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--case) 30%, var(--border, var(--ct-border)));
}
.hc-badge svg{ width:8px; height:8px; display:block; }
.hc-label{ white-space:nowrap; }

.hint-chip.compact .hc-label{ display:none; }
@keyframes hc-pulse{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--case) 45%, transparent); }
  100%{ box-shadow: 0 0 0 12px transparent; }
}
.hint-chip.is-new .hc-ava::after{
  content:""; position:absolute; inset:0; border-radius:inherit; animation: hc-pulse 900ms ease-out 2;
}
@media (prefers-reduced-motion: reduce){
  .hint-chip.is-new .hc-ava::after{ animation:none; }
}
.hint-chip.is-seen{
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--case) 14%, var(--panel, var(--ct-panel)));
}

/* Case-Varianten */
.hint-chip.is-info, .hint-chip.is-merke{ --case: var(--brand, var(--ct-brand)); }
.hint-chip.is-summary{ --case: color-mix(in srgb, var(--brand, var(--ct-brand)) 30%, var(--muted, var(--ct-muted))); }
.hint-chip.is-takehome{ --case: var(--ok, var(--ct-ok)); }
.hint-chip.is-warn{ --case: color-mix(in srgb, var(--danger, var(--ct-danger)) 80%, var(--warn, var(--ct-warn))); }
.hint-chip.is-video{ --case: var(--brand, var(--ct-brand)); }

.hint-chip:hover .hc-ava{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--case) 55%, var(--panel, var(--ct-panel)));
}

/* Replay-Variante */
.hint-chip.is-replay{ box-shadow:none; }
.hint-chip.is-replay .hc-ava.is-icon{
  width:24px; height:24px; border-radius:999px; display:grid; place-items:center; flex:0 0 24px;
  background: var(--panel-2, var(--ct-panel-2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--case, var(--brand, var(--ct-brand))) 50%, var(--panel, var(--ct-panel)));
}
.hint-chip.is-replay .ic{ display:inline-block; line-height:1; transition:transform .4s ease; }
.hint-chip.is-replay:hover .ic{ transform:rotate(360deg); }
.hint-chip.is-replay .meta{
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  transition:max-width .35s ease, opacity .25s ease, transform .25s ease;
  transform:translateX(-4px);
}
.hint-chip.is-replay:hover .meta{ max-width:var(--meta-w,96px); opacity:1; transform:translateX(0); }

/* --------------------------- Mini-Coins ---------------------------------- */
.coach-coin{
  --coin-size: 40px;
  --coin-border: #2563eb; /* nur lokaler Fallback */
  --coin-badge: #22c55e;
  display:inline-flex; width:var(--coin-size); height:var(--coin-size);
  border-radius:50%; position:relative; cursor:pointer;
  border:2px solid var(--coin-border);
  background-size:cover; background-position:center;
}
.coach-coin .coin-badge{
  position:absolute; top:-2px; right:-2px;
  width:14px; height:14px; border-radius:50%;
  border:2px solid #fff; background:var(--coin-badge);
}

/* --------------------------- Large Coin (aus Library übernommen) --------- */
.coach-coin.lg{
  position: relative;
  width:72px; height:72px; border-radius:999px;
  box-shadow: 0 0 0 2px var(--border, var(--ct-border)), 0 6px 14px rgba(0,0,0,.2);
  cursor:pointer;
}
.coach-coin.lg::after{
  content:""; position:absolute; top:4px; right:4px;
  width:18px; height:18px; border-radius:999px;
  background:url("media/video-camera.svg") center/cover no-repeat;
}

/* --------------------------- Avatar-Kontext ------------------------------ */
:root{
  --coach-img-ben:    url("../media/ben-small.png");
  --coach-img-chloe:  url("../media/chloe-small.png");
  --coach-img-mila:   url("../media/mila-small.png");
  --coach-img-archer: url("../media/archer-small.png");
}
html[lang="de"][data-mode="school"]      { --coach-img: var(--coach-img-ben); }
html[lang="en"][data-mode="school"]      { --coach-img: var(--coach-img-chloe); }
html[lang="de"][data-mode="university"]  { --coach-img: var(--coach-img-mila); }
html[lang="en"][data-mode="university"]  { --coach-img: var(--coach-img-archer); }

html[data-coach="ben"]    { --coach-img: var(--coach-img-ben); }
html[data-coach="chloe"]  { --coach-img: var(--coach-img-chloe); }
html[data-coach="mila"]   { --coach-img: var(--coach-img-mila); }
html[data-coach="archer"] { --coach-img: var(--coach-img-archer); }

.hint-chip[data-coach="ben"],
.coach-coin[data-coach="ben"]{ --coach-img: var(--coach-img-ben); }
.hint-chip[data-coach="chloe"],
.coach-coin[data-coach="chloe"]{ --coach-img: var(--coach-img-chloe); }
.hint-chip[data-coach="mila"],
.coach-coin[data-coach="mila"]{ --coach-img: var(--coach-img-mila); }
.hint-chip[data-coach="archer"],
.coach-coin[data-coach="archer"]{ --coach-img: var(--coach-img-archer); }

.hint-chip .hc-ava{ background-image: var(--coach-img); background-position:center; background-repeat:no-repeat; background-size:cover; }
.coach-coin{ background-image: var(--coach-img); background-position:center; background-repeat:no-repeat; background-size:cover; }

/* --------------------------- Scaling & Row ------------------------------- */
.coach-row { --chip-scale: 1.0; }
.coach-row.is-lg { --chip-scale: 1.2; }

.coach-row .hint-chip{
  font-size: calc(1rem * var(--chip-scale));
  padding: calc(0.55rem * var(--chip-scale)) calc(1.0rem * var(--chip-scale));
  border-radius: 999px;
  line-height: 1.25;
  gap: calc(0.6rem * var(--chip-scale));
}
.coach-row .hint-chip .hc-label{
  font-size: inherit;
  line-height: inherit;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* ---------------- Typ-Mapping (Farben & Masken) -------------------------- */
.hint-chip.is-info     { --type: #0b6bcb; --mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="11" y="10" width="2" height="7"/><rect x="11" y="6" width="2" height="2"/></svg>'); }
.hint-chip.is-merke    { --type: #2b8a3e; --mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 3h10v18l-5-3-5 3z"/></svg>'); }
.hint-chip.is-summary  { --type: #635bff; --mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h12v2H4z"/></svg>'); }
.hint-chip.is-takehome { --type: #14866d; --mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4 1.5 1.5L11 16 7.5 12.5z"/></svg>'); }
.hint-chip.is-warn     { --type: #d64545; --mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21z"/><rect x="11" y="9" width="2" height="6"/><rect x="11" y="16" width="2" height="2"/></svg>'); }
.hint-chip.is-video    { --type: #0f8bd3; --mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5h8v14H8zM16 12l6-4v8z"/></svg>'); }

/* ---------------- Style-Varianten (umschaltbar) -------------------------- */
.coach-row.style-avatar-ring .hint-chip .hc-ava{
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--type) 80%, #fff),
    inset 0 0 0 1px rgba(255,255,255,.9);
}
.coach-row.style-inline-icon .hint-chip .hc-label::before{
  content:"";
  display:inline-block; vertical-align:-2px;
  width: calc(14px * var(--chip-scale)); height: calc(14px * var(--chip-scale));
  margin-right: calc(8px * var(--chip-scale));
  border-radius: 999px;
  background: color-mix(in oklab, var(--type) 95%, #fff);
  -webkit-mask: var(--mask) center / 70% 70% no-repeat;
  mask: var(--mask) center / 70% 70% no-repeat;
}
.coach-row.style-dot .hint-chip .hc-label::after{
  content:"";
  display:inline-block; vertical-align:middle;
  width: calc(8px * var(--chip-scale)); height: calc(8px * var(--chip-scale));
  margin-left: calc(10px * var(--chip-scale));
  border-radius: 999px; background: var(--type);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--type) 25%, #fff);
}

/* ---------------- Lesbarkeit in den Modi ------------------------------ */
html[data-mode="school"] .hint-chip{
  color:#0e1726; background:#f6f8fb; border:1px solid #dfe6ee;
}
html[data-mode="university"] .hint-chip{
  color:#eaf5ff; background:#132b41; border:1px solid #244763;
}