/* CSS Cog: active_character_banner.css */
/* ================================================================
   ACTIVE CHARACTER BANNER (v1.0.0)
   Author: Steven J. Cook
   Date:   2026-04-27
   Time:   20:10 UTC
   Model:  Claude Opus 4.7
   Chat:   Abyssal Engine Web App Development
   Pairs with: control.js v5.11.0, crafting_manager.js v1.1.0
   Sits inline in the page flow between #app and the site footer.
   Hidden via inline style="display:none" when no active character
   is set; control.js flips display='' when populating.
   ================================================================ */

.active-char-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin: 1em auto;
  padding: 0.55em 1.2em;
  max-width: max-content;
  background: rgba(237, 66, 69, 0.08);
  border: 1px solid var(--accent-red);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.9em;
  letter-spacing: 0.04em;
  color: var(--accent-red);
  box-shadow: 0 0 12px rgba(237, 66, 69, 0.15);
  transition: background 0.15s, box-shadow 0.15s;
}

.active-char-banner-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
}

.active-char-banner-label:hover {
  color: var(--text-primary);
}

.active-char-banner-label strong {
  color: var(--text-primary);
  font-weight: 700;
}

.active-char-banner-label i {
  color: var(--accent-red);
  font-size: 0.95em;
}

.active-char-banner-clear {
  background: transparent;
  border: 1px solid transparent;
  color: var(--accent-red);
  font-size: 0.85em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
}

.active-char-banner-clear:hover {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
}

/* Sheet-side helpers used by the v5.11.0 changes in control.js
   and skills.js. Kept in this cog so the active-character work
   travels in one CSS file rather than fragmenting across
   sheet.css and skills.css. */

.sheet-crafting-jump {
  margin: 0.75em 0;
  text-align: center;
}

.skill-crafting-note {
  margin-top: 0.6em;
  padding: 0.5em 0.75em;
  background: rgba(0, 180, 216, 0.06);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.skill-crafting-note:hover {
  background: rgba(0, 180, 216, 0.12);
  color: var(--text-primary);
}

.skill-crafting-note i {
  color: var(--accent-cyan);
  margin-right: 0.4em;
}

.skill-crafting-note strong {
  color: var(--accent-cyan);
}

/* Skill granted tag (v5.10.0/2.2.0). Stays here rather than
   duplicating across multiple CSS cogs. */
.skill-granted-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-code);
  font-size: 0.65em;
  color: var(--accent-blue);
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.3);
  border-radius: 3px;
  padding: 0.15em 0.45em;
  margin-left: 0.4em;
}