/* SAGE Legend - Magic Items Library styles. Phase 4 (Rome 2026-05-15).
   Used inside the Mystic / Magic Items sub-tab and the Armor/Weapons
   -> Magic filter views. Matches the violet/lavender magic axis from
   Phase 1's chip + Phase 3's editor. */

.mil-root { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.mil-summary {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
  padding: 8px 12px; background: rgba(180, 160, 240, 0.06);
  border: 1px dashed rgba(180, 160, 240, 0.30); border-radius: 4px;
}
.mil-summary-count { font-weight: 600; color: rgba(220, 210, 250, 0.95); font-size: 0.85rem; }
.mil-summary-hint  { color: rgba(200, 190, 170, 0.65); font-size: 0.78rem; }
.mil-empty { padding: 20px; text-align: center; color: rgba(200, 190, 170, 0.60); font-style: italic; font-size: 0.9rem; }

.mil-section { display: flex; flex-direction: column; gap: 6px; }
.mil-section-head { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px dashed rgba(180, 160, 240, 0.25); }
.mil-section-num   { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.78rem; color: rgba(180, 160, 240, 0.75); font-weight: 600; }
.mil-section-label { font-size: 0.95rem; font-weight: 600; color: rgba(232, 220, 250, 0.95); }
.mil-section-count { margin-left: auto; font-size: 0.75rem; color: rgba(200, 190, 170, 0.55); }

.mil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; align-items: start; }

.mil-card {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(180, 160, 240, 0.35);
  border-radius: 5px; border-left: 3px solid rgba(180, 160, 240, 0.55);
  transition: border-color 0.15s;
}
.mil-card.band-trivial       { border-left-color: rgba(140, 200, 200, 0.65); }
.mil-card.band-bind-or-spend { border-left-color: rgba(212, 175, 55,  0.75); }
.mil-card.band-bind-or-relic { border-left-color: rgba(220, 100, 120, 0.75); }
.mil-card.band-empty         { border-left-color: rgba(160, 160, 160, 0.45); }
.mil-card:hover { border-color: rgba(200, 180, 255, 0.55); }
.mil-card.staged { background: rgba(180, 160, 240, 0.10); border-color: rgba(200, 180, 255, 0.60); }

.mil-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.mil-card-name   { font-weight: 600; font-size: 0.95rem; color: rgba(232, 220, 250, 0.97); line-height: 1.3; }
.mil-card-status { font-size: 0.85rem; cursor: help; user-select: none; }
.mil-card-status.status-matched  { color: rgba(140, 220, 180, 0.85); }
.mil-card-status.status-mismatch { color: rgba(232, 200, 120, 0.85); }
.mil-card-status.status-unparsed { color: rgba(180, 170, 240, 0.70); }

.mil-card-base { font-size: 0.78rem; color: rgba(200, 190, 170, 0.70); font-style: italic; line-height: 1.3; }

.mil-card-stats {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  margin-top: 4px; padding: 4px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
.mil-stat-q {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8rem; font-weight: 600;
  padding: 1px 7px; border-radius: 8px;
  background: rgba(180, 160, 240, 0.15); border: 1px solid rgba(180, 160, 240, 0.40);
  color: rgba(220, 210, 250, 0.95);
}
.mil-stat-q.band-trivial       { background: rgba(140, 200, 200, 0.15); border-color: rgba(140, 200, 200, 0.45); color: #b8e0e0; }
.mil-stat-q.band-bind-or-spend { background: rgba(212, 175, 55,  0.18); border-color: rgba(212, 175, 55,  0.50); color: #e8c878; }
.mil-stat-q.band-bind-or-relic { background: rgba(220, 100, 120, 0.18); border-color: rgba(220, 100, 120, 0.50); color: #f0b8c0; }
.mil-stat-legend { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.78rem; color: rgba(220, 210, 180, 0.85); }
.mil-stat-band { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; }
.mil-stat-band.band-trivial       { background: rgba(140, 200, 200, 0.15); color: #b8e0e0; border: 1px solid rgba(140, 200, 200, 0.45); }
.mil-stat-band.band-bind-or-spend { background: rgba(212, 175, 55,  0.18); color: #e8c878; border: 1px solid rgba(212, 175, 55,  0.50); }
.mil-stat-band.band-bind-or-relic { background: rgba(220, 100, 120, 0.18); color: #f0b8c0; border: 1px solid rgba(220, 100, 120, 0.50); }
.mil-stat-sp { margin-left: auto; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.78rem; font-weight: 600; color: rgba(220, 210, 200, 0.88); }

.mil-card-powers { font-size: 0.78rem; color: rgba(220, 220, 200, 0.85); line-height: 1.4; }
.mil-card-act {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.73rem;
  color: rgba(200, 190, 170, 0.78);
  background: rgba(0, 0, 0, 0.18); padding: 3px 7px; border-radius: 3px;
}

/* Flavor — the in-fiction description. Italic, muted. Full text, no truncation. */
.mil-card-flavor {
  font-size: 0.78rem; color: rgba(220, 210, 180, 0.82); font-style: italic;
  line-height: 1.45; margin-top: 4px; padding: 4px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
/* Mechanics — the rule text. Non-italic, slightly brighter, set off
   with a left accent so it reads as "what the item DOES" vs the
   flavor's "what it IS". */
.mil-card-mechanics {
  font-size: 0.78rem; color: rgba(232, 220, 200, 0.92);
  line-height: 1.45; margin-top: 4px; padding: 6px 8px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 2px solid rgba(180, 160, 240, 0.35);
  border-radius: 0 3px 3px 0;
}

.mil-card-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.07); }
.mil-btn {
  padding: 4px 12px;
  background: rgba(180, 160, 240, 0.18);
  border: 1px solid rgba(180, 160, 240, 0.55);
  border-radius: 3px;
  color: rgba(232, 220, 250, 0.95);
  font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s ease; font-family: inherit;
}
.mil-btn:hover { background: rgba(180, 160, 240, 0.32); border-color: rgba(200, 180, 255, 0.85); }
.mil-btn-staged { background: rgba(180, 160, 240, 0.10); color: rgba(220, 210, 250, 0.65); cursor: default; }
/* Gift — Sage drop / loot. Amber on transparent, distinct from Stage. */
.mil-btn-gift { background: transparent; border: 1px solid rgba(212, 175, 55, 0.45); color: rgba(232, 200, 120, 0.90); }
.mil-btn-gift:hover { background: rgba(212, 175, 55, 0.15); border-color: rgba(232, 200, 120, 0.75); color: #f0d888; }