/* ============================================================================
 * UI 2.0 — komponenty bazowe (sw-*)
 * Wymaga ui/tokens.css. design/gdd/ui-2.0-proposal.md §4.2/§4.5.
 *
 * Komponenty: .sw-panel, .sw-panel-title, .sw-tabs, .sw-slot, .sw-bar,
 *             .sw-btn, .sw-tooltip, .sw-toast, .sw-kbd, hub scaffold.
 * Zakaz: kolorów spoza tokenów, emoji, dropshadow (inner-glow zamiast).
 * ========================================================================== */

/* ── Panel: jedna ramka dla całego UI ───────────────────────────────────── */
.sw-panel {
  background: color-mix(in srgb, var(--sw-panel) calc(var(--sw-panel-alpha) * 100%), transparent);
  backdrop-filter: blur(var(--sw-panel-blur));
  border: 1px solid var(--sw-ash);
  border-radius: var(--sw-radius);
  color: var(--sw-bone);
  font-family: var(--sw-font-body);
  font-size: var(--sw-fs-body);
  position: relative;
}
/* Mikro-sygil w narożniku (wstrzykiwany przez components.js wg frakcji) */
.sw-panel > .sw-corner {
  position: absolute; top: -1px; left: -1px;
  width: 12px; height: 12px; opacity: 0.65;
  color: var(--sw-gold-dim);
  pointer-events: none;
}

.sw-panel-title {
  font-family: var(--sw-font-display);
  font-size: var(--sw-fs-title);
  letter-spacing: var(--sw-tracking-title);
  text-transform: uppercase;
  color: var(--sw-bone);
  padding: var(--sw-s3) var(--sw-s4);
  border-bottom: 1px solid var(--sw-ash);
  display: flex; align-items: center; gap: var(--sw-s2);
}
.sw-panel-title .sw-glyph { color: var(--sw-gold); }

/* ── Taby ───────────────────────────────────────────────────────────────── */
.sw-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--sw-ash); }
.sw-tab {
  padding: var(--sw-s2) var(--sw-s4);
  color: var(--sw-bone-dim);
  font-size: var(--sw-fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0; background: none;
  border-bottom: 2px solid transparent;
  transition: color var(--sw-t-fast), border-color var(--sw-t-fast);
}
.sw-tab:hover { color: var(--sw-bone); }
.sw-tab[aria-selected="true"] {
  color: var(--sw-gold);
  border-bottom-color: var(--sw-gold);
}

/* ── Slot (hotbar / ekwipunek / frazy) ──────────────────────────────────── */
.sw-slot {
  width: calc(var(--sw-slot-size) * var(--sw-hud-scale));
  height: calc(var(--sw-slot-size) * var(--sw-hud-scale));
  background: var(--sw-well);
  border: 1px solid var(--sw-ash);
  border-radius: var(--sw-radius);
  position: relative;
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color var(--sw-t-fast), box-shadow var(--sw-t-fast);
}
.sw-slot:hover, .sw-slot:focus-visible {
  border-color: var(--sw-gold-dim);
  box-shadow: inset 0 0 8px var(--sw-gold-glow);
  outline: none;
}
.sw-slot.is-active {
  border-color: var(--sw-gold);
  box-shadow: inset 0 0 10px var(--sw-gold-glow);
}
.sw-slot.is-empty { opacity: 0.55; cursor: default; }
.sw-slot .sw-keybind {
  position: absolute; top: 2px; left: 4px;
  font-family: var(--sw-font-mono);
  font-size: var(--sw-fs-small);
  color: var(--sw-bone-dim);
}
.sw-slot .sw-count {
  position: absolute; bottom: 2px; right: 4px;
  font-family: var(--sw-font-mono);
  font-size: var(--sw-fs-small);
  color: var(--sw-bone);
}
/* Cooldown: radial wipe sterowany --cd (0..1) z JS */
.sw-slot .sw-cooldown {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg,
              rgba(11, 13, 18, 0.82) calc(var(--cd, 0) * 360deg),
              transparent 0deg);
  pointer-events: none;
  border-radius: inherit;
}

/* ── Paski (HP / Esencja / stamina / boss / cast) ───────────────────────── */
.sw-bar {
  height: 14px;
  background: var(--sw-well);
  border: 1px solid var(--sw-ash);
  border-radius: var(--sw-radius);
  position: relative; overflow: hidden;
}
.sw-bar > .sw-bar-fill {
  height: 100%;
  width: calc(var(--val, 0) * 100%);
  transition: width var(--sw-t-med);
}
.sw-bar.hp      > .sw-bar-fill { background: var(--sw-hp); }
.sw-bar.essence > .sw-bar-fill { background: var(--sw-essence); }
.sw-bar.stamina > .sw-bar-fill { background: var(--sw-stamina); }
.sw-bar.xp      > .sw-bar-fill { background: var(--sw-xp); }
.sw-bar.boss    > .sw-bar-fill { background: var(--sw-hp); }
.sw-bar > .sw-bar-text {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--sw-font-mono);
  font-size: var(--sw-fs-small);
  color: var(--sw-bone);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ── Przyciski ──────────────────────────────────────────────────────────── */
.sw-btn {
  font-family: var(--sw-font-body);
  font-size: var(--sw-fs-body);
  letter-spacing: 0.06em;
  color: var(--sw-bone);
  background: var(--sw-well);
  border: 1px solid var(--sw-ash);
  border-radius: var(--sw-radius);
  padding: var(--sw-s2) var(--sw-s4);
  cursor: pointer;
  transition: border-color var(--sw-t-fast), color var(--sw-t-fast),
              box-shadow var(--sw-t-fast);
}
.sw-btn:hover, .sw-btn:focus-visible {
  border-color: var(--sw-gold-dim);
  color: var(--sw-gold);
  box-shadow: inset 0 0 8px var(--sw-gold-glow);
  outline: none;
}
.sw-btn.primary { border-color: var(--sw-gold-dim); color: var(--sw-gold); }
.sw-btn.danger:hover { border-color: var(--sw-danger); color: var(--sw-danger); }

/* ── Tooltip ────────────────────────────────────────────────────────────── */
.sw-tooltip {
  position: fixed;
  z-index: var(--sw-z-toast);
  max-width: 320px;
  padding: var(--sw-s3) var(--sw-s4);
  background: color-mix(in srgb, var(--sw-obsidian) 96%, transparent);
  border: 1px solid var(--sw-ash-strong);
  border-radius: var(--sw-radius);
  color: var(--sw-bone);
  font-size: var(--sw-fs-small);
  line-height: 1.5;
  pointer-events: none;
}
.sw-tooltip .sw-tooltip-title {
  font-family: var(--sw-font-display);
  color: var(--sw-gold);
  letter-spacing: 0.08em;
  margin-bottom: var(--sw-s1);
}

/* ── Toast (powiadomienia, prawy górny róg, max 3) ──────────────────────── */
#sw-toasts {
  position: fixed; top: var(--sw-s4); right: var(--sw-s4);
  z-index: var(--sw-z-toast);
  display: flex; flex-direction: column; gap: var(--sw-s2);
  pointer-events: none;
}
.sw-toast {
  min-width: 240px; max-width: 360px;
  padding: var(--sw-s3) var(--sw-s4);
  background: color-mix(in srgb, var(--sw-panel) 95%, transparent);
  border: 1px solid var(--sw-ash);
  border-left: 2px solid var(--sw-gold);
  border-radius: var(--sw-radius);
  color: var(--sw-bone);
  font-size: var(--sw-fs-small);
  animation: sw-toast-in var(--sw-t-med);
}
.sw-toast.danger  { border-left-color: var(--sw-danger); }
.sw-toast.success { border-left-color: var(--sw-success); }
@keyframes sw-toast-in {
  from { transform: translateX(12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── Klawisz (pomoc / etykiety skrótów) ─────────────────────────────────── */
.sw-kbd {
  font-family: var(--sw-font-mono);
  font-size: var(--sw-fs-small);
  color: var(--sw-bone);
  background: var(--sw-well);
  border: 1px solid var(--sw-ash-strong);
  border-bottom-width: 2px;
  border-radius: var(--sw-radius);
  padding: 0 var(--sw-s2);
}

/* ── Hub scaffold (okno pełnoekranowe — księga) ─────────────────────────── */
.sw-hub {
  position: fixed; inset: 0;
  z-index: var(--sw-z-hub);
  display: none;
  place-items: center;
  background: rgba(11, 13, 18, 0.72);
}
.sw-hub.is-open { display: grid; }
.sw-hub > .sw-hub-window {
  width: min(1100px, 92vw);
  height: min(720px, 88vh);
  display: flex; flex-direction: column;
}
.sw-hub .sw-hub-body { flex: 1; overflow: auto; padding: var(--sw-s4); }
.sw-hub .sw-hub-close {
  margin-left: auto;
  color: var(--sw-bone-dim);
  background: none; border: 0; cursor: pointer;
  font-size: var(--sw-fs-title);
}
.sw-hub .sw-hub-close:hover { color: var(--sw-gold); }

/* ── Scrollbar w stylu ──────────────────────────────────────────────────── */
.sw-panel ::-webkit-scrollbar, .sw-hub ::-webkit-scrollbar { width: 8px; }
.sw-panel ::-webkit-scrollbar-thumb, .sw-hub ::-webkit-scrollbar-thumb {
  background: var(--sw-ash); border-radius: 4px;
}
.sw-panel ::-webkit-scrollbar-thumb:hover { background: var(--sw-ash-strong); }

/* ── U3: legacy panel wcielony do zakładki huba ─────────────────────────── */
.sw-hub-pane { flex: 1; overflow: auto; padding: var(--sw-s3) 0 0 0; }
.sw-hub-embed {
  display: block !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  z-index: auto !important;
}