/*
 * ============================================================
 * LEFT FOR THE VULTURES — Component Styles
 * Deimos Infinitum Publishing / Phase II Publishing
 * ============================================================
 *
 * All component styles are expressed using tokens from tokens.css.
 * Import order: tokens.css → components.css → page-specific
 *
 * Table of Contents:
 *   1.  Base Reset & Global
 *   2.  Texture & Grain Utilities
 *   3.  Typography Utilities
 *   4.  Step Navigation (Tab Bar)
 *   5.  Layout — Two-Zone Split Panel
 *   6.  Layout — Slide-Out Panel
 *   7.  Layout — Persistent Stat Bar
 *   8.  Buttons
 *   9.  Cards — Selection Grid
 *  10.  Cards — Trait / Feature Cards
 *  11.  Badges
 *  12.  Modals — Two-Panel Picker
 *  13.  Stat Displays
 *  14.  Choices Panel — Stacked Sections
 *  15.  Accordions
 *  16.  Form Elements (Inputs, Selects, Checkboxes, Radios)
 *  17.  Tooltips / Rule Summaries
 *  18.  Warning Banners
 *  19.  Progress Indicator
 *  20.  Scrollbars
 *  21.  Utility Classes
 * ============================================================
 */

/* ────────────────────────────────────────────────────────
 * 1. BASE RESET & GLOBAL
 * ──────────────────────────────────────────────────────── */

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

html {
  color-scheme: dark;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  min-height: 100vh;

  /* Grain texture overlay via pseudo-element — see .texture-grain utility */
  position: relative;
}

/* Global noise overlay on body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-tooltip);
  opacity: var(--texture-noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.90' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* Vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-below);
  background: radial-gradient(
    ellipse at 50% 40%,
    transparent 40%,
    rgba(8, 8, 8, var(--texture-vignette-opacity)) 100%
  );
}

/* SVG filter definitions — rendered invisibly, referenced by CSS */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: var(--transition-color);
}
a:hover {
  color: var(--color-text-active);
}

/* ────────────────────────────────────────────────────────
 * 2. TEXTURE & GRAIN UTILITIES
 * Apply to panels that should feel like aged parchment or stone.
 * ──────────────────────────────────────────────────────── */

/* Grain texture for parchment-feel panels */
.texture-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: var(--z-raised);
  opacity: var(--texture-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* Panels with this class get a faint top highlight (like catching light at an angle) */
.texture-surface {
  position: relative;
  background-image:
    linear-gradient(
      to bottom,
      rgba(240, 234, 221, 0.03) 0%,
      transparent 40%
    );
}

/* Worn edges — a subtle inner shadow that eats into the corners */
.texture-worn {
  box-shadow:
    var(--shadow-inset-sm),
    inset 1px 0 0 rgba(240, 234, 221, 0.02),
    inset -1px 0 0 rgba(0, 0, 0, 0.30);
}

/* ────────────────────────────────────────────────────────
 * 3. TYPOGRAPHY UTILITIES
 * ──────────────────────────────────────────────────────── */

.font-display   { font-family: var(--font-display); }
.font-heading   { font-family: var(--font-heading); }
.font-body      { font-family: var(--font-body); }
.font-mono      { font-family: var(--font-mono); }

.text-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
}

.text-section-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-faint);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.text-lore {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  font-style: italic;
}

.text-rules {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-text-primary);
}

.text-rules strong, .text-rules b {
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
  font-style: normal;
}

/* Mechanical keyword — inline highlight for rules terms */
.keyword {
  font-family: var(--font-heading);
  font-size: 0.9em;
  font-weight: var(--weight-semibold);
  color: var(--color-bronze-bright);
  letter-spacing: var(--tracking-wide);
}

/* Flavor quote — italicized lore pull-quote */
.flavor-quote {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-text-secondary);
  border-left: 2px solid var(--color-border-dim);
  padding-left: var(--space-4);
  margin: var(--space-4) 0;
  line-height: var(--leading-relaxed);
}

/* ────────────────────────────────────────────────────────
 * 4. STEP NAVIGATION (Tab Bar)
 * Horizontal wizard tabs. From UX analysis: Forgesteel's guided
 * tabs with progress status labels are the strongest pattern.
 * ──────────────────────────────────────────────────────── */

.step-nav {
  display: flex;
  align-items: stretch;
  height: var(--tab-nav-height);
  background: var(--color-bg-panel);
  border-bottom: 1px solid var(--color-border-faint);
  position: sticky;
  top: var(--topbar-height);
  z-index: var(--z-sticky);
  overflow-x: auto;
  scrollbar-width: none;
}
.step-nav::-webkit-scrollbar { display: none; }

.step-nav__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 100px;
  padding: 0 var(--space-4);
  cursor: pointer;
  border: none;
  background: var(--tab-bg);
  border-bottom: 2px solid transparent;
  border-right: 1px solid var(--tab-border);
  gap: var(--space-1);
  position: relative;
  transition: var(--transition-all);

  /* Remove last right border */
  &:last-child { border-right: none; }
}

.step-nav__tab:hover {
  background: var(--tab-bg-hover);
  box-shadow: var(--shadow-ember-sm);
}

.step-nav__tab--active {
  background: var(--tab-bg-active);
  border-bottom-color: var(--color-border-accent);
  box-shadow: var(--shadow-bronze-sm);
}

.step-nav__tab--active .step-nav__name {
  color: var(--tab-text-active);
}

.step-nav__name {
  font-family: var(--tab-font);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--tab-text);
  letter-spacing: var(--tab-tracking);
  text-transform: uppercase;
  transition: var(--transition-color);
}

.step-nav__tab:hover .step-nav__name {
  color: var(--tab-text-hover);
}

.step-nav__status {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.step-nav__status--not-started  { color: var(--color-text-faint); }
.step-nav__status--in-progress  { color: var(--color-bronze-bright); }
.step-nav__status--complete     { color: var(--color-sage-text); }
.step-nav__status--optional     { color: var(--color-ash); }

/* Active tab top accent bar */
.step-nav__tab--active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-border-accent),
    transparent
  );
}

/* ────────────────────────────────────────────────────────
 * 5. LAYOUT — TWO-ZONE SPLIT PANEL
 * Left: lore/description. Right: active choices.
 * Forgesteel's strongest structural pattern.
 * ──────────────────────────────────────────────────────── */

.builder-layout {
  display: grid;
  grid-template-columns: 1fr var(--choices-width);
  min-height: calc(100vh - var(--topbar-height) - var(--tab-nav-height));
  position: relative;
}

/* Left panel — description, lore, features reference */
.panel-desc {
  background: var(--panel-desc-bg);
  border-right: 1px solid var(--panel-border);
  padding: var(--panel-padding);
  overflow-y: auto;
  position: relative;
}

/* Right panel — choices, CTAs, active decisions */
.panel-choices {
  background: var(--panel-choices-bg);
  padding: var(--panel-padding);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Sub-tab bar within description panel (Overview / Features / Abilities / Subclasses) */
.panel-subtabs {
  display: flex;
  border-bottom: 1px solid var(--color-border-faint);
  margin-bottom: var(--space-6);
  gap: 0;
}

.panel-subtab {
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition-color);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  text-transform: uppercase;
}

.panel-subtab:hover {
  color: var(--color-text-secondary);
}

.panel-subtab--active {
  color: var(--color-text-active);
  border-bottom-color: var(--color-border-accent);
}

/* ────────────────────────────────────────────────────────
 * 6. LAYOUT — SLIDE-OUT PANEL
 * Trait cards, feature lists. Slides in from the right
 * over the choices panel. Max z-index within the builder.
 * ──────────────────────────────────────────────────────── */

.slideout {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--slideout-width);
  background: var(--slideout-bg);
  border-left: 1px solid var(--slideout-border);
  box-shadow: var(--slideout-shadow);
  z-index: var(--z-slideout);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-slide);
  overflow: hidden;
}

.slideout--open {
  transform: translateX(0);
}

.slideout__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.slideout__title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.slideout__close {
  background: none;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  padding: var(--space-1);
  font-size: var(--text-lg);
  line-height: 1;
  transition: var(--transition-color);
}
.slideout__close:hover { color: var(--color-text-primary); }

.slideout__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ────────────────────────────────────────────────────────
 * 7. LAYOUT — PERSISTENT STAT BAR
 * Always visible at top. Updates live as choices are made.
 * Shows the character in its current (incomplete) state.
 * ──────────────────────────────────────────────────────── */

.stat-bar {
  height: var(--stat-block-height);
  background: var(--stat-bg);
  border-bottom: 1px solid var(--color-border-faint);
  display: flex;
  align-items: stretch;
  position: sticky;
  top: var(--topbar-height);
  z-index: var(--z-sticky);
  overflow: hidden;
}

.stat-bar__identity {
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--color-border-faint);
  min-width: 200px;
}

.stat-bar__name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-wide);
}

.stat-bar__class-line {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.03em;
}

.stat-bar__stats {
  display: flex;
  align-items: stretch;
  flex: 1;
}

.stat-bar__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  border-right: 1px solid var(--color-border-faint);
  min-width: 64px;
  gap: var(--space-1);
}

.stat-bar__stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-stat);
  line-height: 1;
}

.stat-bar__stat-label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Completion counter in stat bar */
.stat-bar__progress {
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────
 * 8. BUTTONS
 * Heavy, deliberate. Not playful. Hover = ember reaction.
 * ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height-md);
  padding: 0 var(--btn-padding-x-md);
  font-family: var(--btn-font);
  font-size: var(--btn-font-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--transition-all), var(--transition-glow);
  position: relative;
  overflow: hidden;
  user-select: none;
  width: 100%; /* Buttons in choices panel span full width by default */
}

/* Scratched highlight on the top edge — catches light like engraved metal */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(240, 234, 221, 0.12);
  pointer-events: none;
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — the main "Choose an option" CTA */
.btn--primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-shadow), var(--shadow-inset-sm);
}
.btn--primary:hover {
  background: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-primary-shadow-hover), var(--shadow-inset-sm);
}
.btn--primary:active {
  background: var(--btn-primary-bg-active);
  box-shadow: var(--shadow-inset-md);
  transform: translateY(1px);
}

/* Secondary */
.btn--secondary {
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-text);
  box-shadow: var(--shadow-sm), var(--shadow-inset-sm);
}
.btn--secondary:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
  color: var(--btn-secondary-text-hover);
  box-shadow: var(--shadow-md), var(--shadow-ember-sm);
}

/* Ghost */
.btn--ghost {
  background: var(--btn-ghost-bg);
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-text);
  width: auto;
}
.btn--ghost:hover {
  background: var(--btn-ghost-bg-hover);
  border-color: var(--btn-ghost-border-hover);
  color: var(--btn-ghost-text-hover);
}

/* Danger */
.btn--danger {
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--btn-danger-text);
  box-shadow: var(--shadow-inset-sm);
}
.btn--danger:hover {
  background: var(--btn-danger-bg-hover);
  box-shadow: var(--btn-danger-shadow-hover), var(--shadow-inset-sm);
}

/* Size variants */
.btn--sm {
  height: var(--btn-height-sm);
  padding: 0 var(--btn-padding-x-sm);
  font-size: 0.65rem;
}
.btn--lg {
  height: var(--btn-height-lg);
  padding: 0 var(--btn-padding-x-lg);
  font-size: var(--text-base);
}
.btn--auto { width: auto; } /* Override full-width default */

/* ────────────────────────────────────────────────────────
 * 9. CARDS — SELECTION GRID
 * Used for class/ancestry selection. Text-first, no clutter.
 * Each card should feel like a worn character dossier.
 * ──────────────────────────────────────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  padding: var(--space-6);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--card-shadow);
  transition: var(--transition-all), var(--transition-glow),
              border-color var(--duration-fast) var(--ease-ember);
}

.card:hover {
  background: var(--card-bg-hover);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}

.card--selected {
  background: var(--card-bg-selected);
  border-color: var(--card-border-selected);
  box-shadow: var(--card-shadow-selected);
}

/* Worn top edge — like a torn document corner */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 5%,
    var(--color-border-dim) 20%,
    var(--color-border-dim) 80%,
    transparent 95%
  );
}

/* Selected state top glow */
.card--selected::before {
  background: linear-gradient(
    to right,
    transparent 5%,
    var(--color-border-accent) 20%,
    var(--color-bronze-bright) 50%,
    var(--color-border-accent) 80%,
    transparent 95%
  );
}

.card__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
}

.card__tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-rust-bright);
  font-style: italic;
  line-height: var(--leading-snug);
}

.card__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
  flex: 1;
}

.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-faint);
}

/* ────────────────────────────────────────────────────────
 * 10. CARDS — TRAIT / FEATURE CARDS
 * Used inside the slide-out panel for point-buy selection.
 * More compact than selection cards. Cost badge is prominent.
 * ──────────────────────────────────────────────────────── */

.trait-card {
  background: var(--trait-card-bg);
  border: 1px solid var(--trait-card-border);
  border-radius: var(--trait-card-radius);
  padding: var(--trait-card-padding);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  transition: var(--transition-all), var(--transition-glow);
}

.trait-card:hover {
  background: var(--trait-card-bg-hover);
  border-color: var(--trait-card-border-hover);
  box-shadow: var(--shadow-ember-sm);
}

.trait-card--selected {
  border-color: var(--color-border-accent);
  background: var(--color-bg-overlay);
  box-shadow: var(--shadow-bronze-sm);
}

.trait-card--disabled {
  opacity: 0.40;
  cursor: not-allowed;
}

.trait-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.trait-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  flex: 1;
}

.trait-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.trait-card__effect {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-bronze-bright);
  font-weight: var(--weight-medium);
}

/* Check mark for selected state */
.trait-card--selected .trait-card__name::after {
  content: ' ✓';
  color: var(--color-sage-text);
  font-family: var(--font-mono);
}

/* ────────────────────────────────────────────────────────
 * 11. BADGES
 * Cost badges, rarity tags, status indicators.
 * ──────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  height: 20px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  border-radius: var(--badge-cost-radius);
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Cost badge — "2 pts" */
.badge--cost {
  background: var(--badge-cost-bg);
  border-color: var(--badge-cost-border);
  color: var(--badge-cost-text);
  min-width: 36px;
}

/* Status badges */
.badge--complete {
  background: var(--color-sage-dim);
  border-color: var(--color-sage);
  color: var(--color-sage-text);
}
.badge--incomplete {
  background: var(--color-blood-dim);
  border-color: var(--color-blood-mid);
  color: var(--color-blood-bright);
}
.badge--optional {
  background: var(--color-ash-dim);
  border-color: var(--color-ash);
  color: var(--color-ash-bright);
}
.badge--active {
  background: var(--color-bronze-dim);
  border-color: var(--color-bronze);
  color: var(--color-bronze-bright);
}

/* Rarity badges */
.badge--common   { background: var(--badge-common-bg);   border-color: var(--color-border-dim);     color: var(--badge-common-text); }
.badge--uncommon { background: var(--badge-uncommon-bg); border-color: #4a6028;                     color: var(--badge-uncommon-text); }
.badge--rare     { background: var(--badge-rare-bg);     border-color: #2a3e6a;                     color: var(--badge-rare-text); }
.badge--unique   { background: var(--badge-unique-bg);   border-color: #4a2e6a;                     color: var(--badge-unique-text); }

/* ────────────────────────────────────────────────────────
 * 12. MODALS — TWO-PANEL PICKER
 * Left: filterable list. Right: detail preview.
 * Accept / Cancel / Rules Reference at the bottom.
 * ──────────────────────────────────────────────────────── */

.modal-scrim {
  position: fixed;
  inset: 0;
  background: var(--color-scrim);
  z-index: var(--z-scrim);
  animation: fadeIn var(--duration-base) var(--ease-fade);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--modal-max-width), calc(100vw - var(--space-8)));
  max-height: calc(100vh - var(--space-16));
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp var(--duration-slow) var(--ease-slide);
}

.modal__filter-tabs {
  display: flex;
  background: var(--color-bg-panel);
  border-bottom: 1px solid var(--color-border-faint);
  flex-shrink: 0;
  padding: 0 var(--space-4);
  gap: 0;
}

.modal__filter-tab {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-faint);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  transition: var(--transition-color);
}
.modal__filter-tab:hover { color: var(--color-text-secondary); }
.modal__filter-tab--active {
  color: var(--color-text-active);
  border-bottom-color: var(--color-border-accent);
}

.modal__body {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.modal__list {
  background: var(--modal-list-bg);
  border-right: 1px solid var(--color-border-faint);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal__list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 1px solid var(--color-border-faint);
  text-align: left;
  transition: var(--transition-color), background-color var(--duration-fast) var(--ease-ember);
}
.modal__list-item:hover {
  background: var(--color-bg-raised);
}
.modal__list-item--active {
  background: var(--color-bg-overlay);
  border-left: 2px solid var(--color-border-accent);
}
.modal__list-item--active .modal__item-name {
  color: var(--color-text-active);
}

.modal__item-name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  flex: 1;
  transition: var(--transition-color);
}

.modal__detail {
  background: var(--modal-detail-bg);
  padding: var(--space-6);
  overflow-y: auto;
}

.modal__detail-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.modal__detail-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.modal__detail-desc {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  font-style: italic;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-faint);
}

.modal__detail-section {
  margin-bottom: var(--space-4);
}

.modal__detail-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-rust-bright);
  margin-bottom: var(--space-1);
}

.modal__detail-value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.modal__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-faint);
  background: var(--color-bg-panel);
  flex-shrink: 0;
}

.modal__footer .btn--primary { width: auto; }
.modal__footer .btn--secondary { width: auto; }

.modal__rules-link {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-left: auto;
  transition: var(--transition-color);
}
.modal__rules-link:hover { color: var(--color-text-link); }

@keyframes slideUp {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ────────────────────────────────────────────────────────
 * 13. STAT DISPLAYS
 * For the persistent stat bar and the character sheet view.
 * Numbers should feel engraved, not printed.
 * ──────────────────────────────────────────────────────── */

/* Characteristic block — large number with label below */
.stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--stat-bg);
  border: 1px solid var(--stat-border);
  border-radius: var(--radius-xs);
  min-width: 72px;
  box-shadow: var(--shadow-inset-sm);
}

.stat-block__value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-stat);
  line-height: 1;
}

.stat-block__label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Modifier display — positive/negative modifier inline */
.mod {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-stat);
}
.mod--positive { color: var(--color-sage-text); }
.mod--negative { color: var(--color-blood-bright); }
.mod--zero     { color: var(--color-text-faint); }

/* Resource row — horizontal strip of stat blocks */
.stat-row {
  display: flex;
  align-items: stretch;
  background: var(--stat-bg);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.stat-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-right: 1px solid var(--color-border-faint);
  gap: var(--space-1);
  flex: 1;
}
.stat-row__item:last-child { border-right: none; }

.stat-row__value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-stat);
  line-height: 1;
}

.stat-row__label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ────────────────────────────────────────────────────────
 * 14. CHOICES PANEL — STACKED SECTIONS
 * Each choice type (Skills, Traits, Abilities) is a named
 * section within the right panel. Visual hierarchy via
 * section headers with separator lines.
 * ──────────────────────────────────────────────────────── */

.choice-section {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.choice-section__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-panel);
}

.choice-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.choice-section__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Points budget indicator */
.points-budget {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.points-budget__pips {
  display: flex;
  gap: var(--space-1);
}

.points-budget__pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: transparent;
}
.points-budget__pip--filled {
  background: var(--color-bronze-bright);
  border-color: var(--color-bronze-bright);
  box-shadow: 0 0 4px var(--glow-bronze-mid);
}

.choice-section__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.choice-section__hint {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-style: italic;
  line-height: var(--leading-normal);
}

/* Selected choice tag (shows a picked option) */
.choice-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-dim);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.choice-tag__remove {
  background: none;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: 1;
  padding: 0;
  transition: var(--transition-color);
}
.choice-tag__remove:hover { color: var(--color-blood-bright); }

/* ────────────────────────────────────────────────────────
 * 15. ACCORDIONS
 * Level-by-level feature previews. Collapsed by default.
 * ──────────────────────────────────────────────────────── */

.accordion {
  border: 1px solid var(--accordion-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.accordion__item {
  border-bottom: 1px solid var(--accordion-border);
}
.accordion__item:last-child { border-bottom: none; }

.accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--accordion-bg);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-ember);
}
.accordion__trigger:hover { background: var(--accordion-bg-hover); }

.accordion__level-label {
  font-family: var(--accordion-header-font);
  font-size: var(--accordion-header-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--accordion-header-tracking);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.accordion__features-preview {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.accordion__chevron {
  color: var(--color-text-faint);
  flex-shrink: 0;
  font-size: var(--text-xs);
  transition: transform var(--duration-fast) var(--ease-ember);
}
.accordion__item--open .accordion__chevron {
  transform: rotate(90deg);
}

.accordion__body {
  padding: var(--space-4);
  background: var(--color-bg-raised);
  border-top: 1px solid var(--color-border-faint);
  display: none;
}
.accordion__item--open .accordion__body {
  display: block;
}

/* ────────────────────────────────────────────────────────
 * 16. FORM ELEMENTS
 * Text inputs, selects, checkboxes, radio groups.
 * Should feel like filling out a military requisition form.
 * ──────────────────────────────────────────────────────── */

.input {
  display: block;
  width: 100%;
  height: var(--btn-height-md);
  padding: 0 var(--space-4);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  color: var(--input-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: var(--transition-all), var(--transition-glow);
  box-shadow: var(--shadow-inset-sm);
}

.input::placeholder {
  color: var(--input-placeholder);
  font-style: italic;
}

.input:focus {
  outline: none;
  background: var(--input-bg-focus);
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus), var(--shadow-inset-sm);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a5c48' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

.select:focus {
  border-color: var(--select-border-focus);
  box-shadow: var(--select-shadow-focus), var(--shadow-inset-sm);
}

/* Radio group — characteristic array selection */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition-all), var(--transition-glow);
}
.radio-option:hover {
  border-color: var(--color-border-dim);
  background: var(--color-bg-hover);
}
.radio-option--selected {
  border-color: var(--color-border-accent);
  background: var(--color-bg-overlay);
  box-shadow: var(--shadow-bronze-sm);
}

.radio-option__indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-panel);
  flex-shrink: 0;
  position: relative;
}
.radio-option--selected .radio-option__indicator {
  border-color: var(--color-bronze-bright);
  background: var(--color-bronze-dim);
  box-shadow: 0 0 6px var(--glow-bronze-mid);
}
.radio-option--selected .radio-option__indicator::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-bronze-bright);
}

.radio-option__content {
  flex: 1;
}

.radio-option__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.radio-option__sublabel {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
}

/* Checkbox */
.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.checkbox-option__box {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-bg-panel);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-all);
}
.checkbox-option--checked .checkbox-option__box {
  background: var(--color-rust);
  border-color: var(--color-rust-bright);
  box-shadow: var(--shadow-ember-sm);
}
.checkbox-option__box::after {
  content: '';
  display: none;
  width: 4px;
  height: 8px;
  border: 1.5px solid #eadfd3;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.checkbox-option--checked .checkbox-option__box::after {
  display: block;
}

/* Toggle switch */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.toggle__track {
  width: 36px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-dim);
  position: relative;
  transition: var(--transition-color), var(--transition-glow);
}
.toggle--on .toggle__track {
  background: var(--color-rust);
  border-color: var(--color-rust-bright);
  box-shadow: var(--shadow-ember-sm);
}

.toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-ash);
  transition: transform var(--duration-base) var(--ease-ember),
              background-color var(--duration-base) var(--ease-ember);
}
.toggle--on .toggle__thumb {
  transform: translateX(16px);
  background: #eadfd3;
}

.toggle__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ────────────────────────────────────────────────────────
 * 17. TOOLTIPS / RULE SUMMARIES
 * Appear on hover over mechanical keywords, rules terms.
 * Feel like a margin annotation on a worn rulebook.
 * ──────────────────────────────────────────────────────── */

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  width: var(--tooltip-max-width);
  background: var(--tooltip-bg);
  border: 1px solid var(--tooltip-border);
  border-radius: var(--tooltip-radius);
  box-shadow: var(--tooltip-shadow);
  padding: var(--space-4);
  z-index: var(--z-tooltip);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  transition: opacity var(--duration-fast) var(--ease-fade),
              transform var(--duration-fast) var(--ease-fade);
}

.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus-within .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Notch pointing down */
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--tooltip-border);
}

.tooltip__label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-rust-bright);
  margin-bottom: var(--space-2);
}

.tooltip__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-loose);
}

/* Inline rule summary — expandable drawer within text */
.rule-summary {
  background: var(--color-bg-raised);
  border-left: 2px solid var(--color-border-accent);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  margin: var(--space-3) 0;
}

.rule-summary__trigger {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-text-link);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  letter-spacing: var(--tracking-wide);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: var(--transition-color);
}
.rule-summary__trigger:hover { color: var(--color-text-active); }

.rule-summary__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
  margin-top: var(--space-2);
}

/* ────────────────────────────────────────────────────────
 * 18. WARNING BANNERS
 * Explicit, unignorable. Red for danger, amber for warning.
 * Positioned within context — not as floating toasts.
 * ──────────────────────────────────────────────────────── */

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xs);
  border: 1px solid;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.banner__icon {
  flex-shrink: 0;
  font-size: var(--text-base);
  margin-top: 1px;
}

.banner__body {
  flex: 1;
}

.banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}

.banner--warning {
  background: var(--banner-warning-bg);
  border-color: var(--banner-warning-border);
  color: var(--banner-warning-text);
}

.banner--danger {
  background: var(--banner-danger-bg);
  border-color: var(--banner-danger-border);
  color: var(--banner-danger-text);
}

.banner--success {
  background: var(--banner-success-bg);
  border-color: var(--banner-success-border);
  color: var(--banner-success-text);
}

/* ────────────────────────────────────────────────────────
 * 19. PROGRESS INDICATOR
 * "X of Y choices complete" — shown in stat bar.
 * ──────────────────────────────────────────────────────── */

.progress-counter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.progress-counter__label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.progress-counter__fraction {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.progress-track {
  width: 80px;
  height: var(--progress-height);
  background: var(--progress-track-bg);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--progress-fill-bg);
  border-radius: var(--radius-pill);
  transition: width var(--duration-slow) var(--ease-standard);
  box-shadow: 0 0 4px var(--glow-sage-mid);
}

/* ────────────────────────────────────────────────────────
 * 20. SCROLLBARS
 * Thin, dark, unobtrusive. Matches the overall aesthetic.
 * ──────────────────────────────────────────────────────── */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ────────────────────────────────────────────────────────
 * 21. UTILITY CLASSES
 * ──────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.divider {
  border: none;
  border-top: 1px solid var(--color-border-faint);
  margin: var(--space-4) 0;
}

.divider--dim   { border-top-color: var(--color-border-dim); }
.divider--strong{ border-top-color: var(--color-border-strong); }

/* Spacing */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }

/* Flex utils */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }
.flex-1       { flex: 1; }

/* Text */
.text-faint   { color: var(--color-text-faint); }
.text-secondary { color: var(--color-text-secondary); }
.text-heading { color: var(--color-text-heading); }
.text-danger  { color: var(--color-text-danger); }
.text-success { color: var(--color-text-success); }

/* Opacity */
.opacity-50 { opacity: 0.50; }
.opacity-40 { opacity: 0.40; }