/* sage_gear_ui.css — styles for the SageGearUI module.
 *
 * Extracted 2026-04-29 from sage_character_sheet.css. Imported by both
 * sage_character_sheet.html and sage_character_generator.html so the
 * gear UI renders identically on both surfaces.
 */

/* Phase Status (Rome 2026-05-16) — Clothing meta pills (slot / layer /
   status) and Status-tier section headers for the For Sale → Clothing
   grouped list. */
.gp-list-pill {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 3px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-family: var(--font-body, inherit);
  line-height: 1.4;
  vertical-align: baseline;
}
.gp-pill-slot {
  background: rgba(120, 160, 220, 0.14);
  border: 1px solid rgba(140, 180, 240, 0.40);
  color: #bcd0f0;
}
.gp-pill-layer {
  background: rgba(170, 140, 220, 0.12);
  border: 1px solid rgba(190, 160, 240, 0.36);
  color: #d0bcf0;
  font-style: italic;
}
.gp-pill-status {
  font-weight: 600;
}
.gp-pill-status-neg {
  background: rgba(180, 100, 80, 0.18);
  border: 1px solid rgba(220, 130, 110, 0.45);
  color: #f0c0a8;
}
.gp-pill-status-zero {
  background: rgba(180, 180, 180, 0.10);
  border: 1px solid rgba(200, 200, 200, 0.30);
  color: rgba(220, 220, 220, 0.85);
}
.gp-pill-status-pos {
  background: rgba(232, 200, 120, 0.16);
  border: 1px solid rgba(240, 200, 120, 0.55);
  color: #f0d098;
}

/* Phase Status W3 (Rome 2026-05-17): each tier is wrapped in its own
   collapsible div. Header is clickable; chevron rotates with state.
   Default state: closed. */
.gp-status-tier {
  margin: 8px 0;
}
.gp-status-tier-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 6px 10px;
  background: rgba(232, 200, 120, 0.06);
  border-left: 3px solid rgba(232, 200, 120, 0.55);
  border-radius: 3px;
}
.gp-status-tier-head.clickable {
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
}
.gp-status-tier-head.clickable:hover {
  background: rgba(232, 200, 120, 0.12);
}
.gp-status-tier-chevron {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(232, 200, 120, 0.75);
  transition: transform 0.12s ease;
}
.gp-status-tier-body {
  padding: 4px 0 8px;
}
/* ─── Adornment manager (D-2026-05-16-Adornment-Status) ─── */
.gp-adornment-mgr {
  margin: 8px 0 14px;
  padding: 8px 10px 10px;
  background: rgba(40, 30, 60, 0.45);
  border: 1px solid rgba(180, 150, 220, 0.35);
  border-radius: 6px;
}
.gp-adornment-mgr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.gp-adornment-mgr-title {
  font-weight: 600;
  color: rgba(220, 200, 240, 0.95);
}
.gp-adornment-mgr-count {
  color: rgba(220, 200, 240, 0.55);
  font-weight: 400;
  margin-left: 4px;
}
.gp-adornment-empty {
  color: rgba(220, 200, 240, 0.6);
  font-style: italic;
  padding: 6px 4px;
  font-size: 0.9em;
}
.gp-adornment-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gp-adorn-row {
  background: rgba(20, 15, 30, 0.4);
  border: 1px solid rgba(150, 130, 180, 0.2);
  border-radius: 4px;
  padding: 5px 8px;
}
.gp-adorn-row.is-active {
  border-color: rgba(232, 200, 120, 0.55);
  background: rgba(40, 30, 50, 0.5);
}
.gp-adorn-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gp-adorn-name {
  flex: 1;
  font-weight: 500;
}
.gp-adorn-active { color: rgba(232, 200, 120, 1); }
.gp-adorn-inactive { color: rgba(220, 200, 240, 0.35); }
.gp-adorn-status {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(60, 50, 80, 0.5);
  min-width: 28px;
  text-align: center;
}
.gp-adorn-status.up { color: rgba(180, 230, 180, 0.95); }
.gp-adorn-status.down { color: rgba(230, 180, 180, 0.95); }
.gp-adorn-kind {
  font-size: 0.78em;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(80, 60, 110, 0.55);
  color: rgba(220, 200, 240, 0.85);
}
.gp-adorn-kind-jewelry { background: rgba(120, 90, 50, 0.55); color: rgba(255, 220, 160, 0.95); }
.gp-adorn-kind-attached { background: rgba(60, 90, 120, 0.55); color: rgba(180, 220, 255, 0.95); }
.gp-adorn-gift {
  font-size: 0.78em;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(50, 100, 60, 0.5);
  color: rgba(200, 240, 200, 0.95);
}
.gp-adorn-delete {
  background: transparent;
  color: rgba(220, 180, 180, 0.6);
  border: 1px solid rgba(220, 180, 180, 0.3);
  border-radius: 3px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.gp-adorn-delete:hover {
  background: rgba(150, 60, 60, 0.3);
  color: rgba(255, 220, 220, 0.95);
}
.gp-adorn-row-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.88em;
  color: rgba(220, 200, 240, 0.75);
}
.gp-adorn-worn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.gp-adorn-host-pick select {
  background: rgba(20, 15, 30, 0.85);
  color: rgba(220, 200, 240, 0.95);
  border: 1px solid rgba(150, 130, 180, 0.4);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.9em;
}
.gp-recvd-form {
  margin: 6px 0 8px;
  padding: 8px 10px;
  background: rgba(30, 25, 50, 0.65);
  border: 1px dashed rgba(180, 150, 220, 0.55);
  border-radius: 5px;
}
.gp-recvd-form-head {
  font-weight: 600;
  margin-bottom: 6px;
  color: rgba(230, 210, 250, 0.95);
}
.gp-recvd-form-hint {
  font-weight: 400;
  font-size: 0.82em;
  color: rgba(220, 200, 240, 0.6);
  margin-left: 4px;
}
.gp-recvd-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.gp-recvd-form-row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9em;
}
.gp-recvd-form-row input[type="text"],
.gp-recvd-form-row select {
  background: rgba(15, 10, 25, 0.85);
  color: rgba(230, 220, 250, 0.95);
  border: 1px solid rgba(150, 130, 180, 0.45);
  border-radius: 3px;
  padding: 2px 5px;
}
.gp-recvd-form-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.gp-btn-cancel {
  background: rgba(50, 40, 60, 0.5);
  color: rgba(220, 200, 240, 0.7);
}
/* Collapsed state — the body isn't rendered at all when closed (see JS),
   but if a future change keeps it in the DOM, this hides it gracefully. */
.gp-status-tier.collapsed .gp-status-tier-body {
  display: none;
}
.gp-status-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  font-family: var(--font-title, var(--font-body, inherit));
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 3px;
}
.gp-status-tier-neg  { background: rgba(180, 100, 80, 0.30); color: #ffd5c0; border: 1px solid rgba(220, 130, 110, 0.6); }
.gp-status-tier-zero { background: rgba(180, 180, 180, 0.18); color: #ddd;   border: 1px solid rgba(200, 200, 200, 0.4); }
.gp-status-tier-pos  { background: rgba(232, 200, 120, 0.28); color: #ffe8b0; border: 1px solid rgba(240, 200, 120, 0.7); }
.gp-status-tier-label {
  flex: 1 1 auto;
  font-family: var(--font-title, var(--font-body, inherit));
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  color: var(--cream, #e0d8c8);
}
.gp-status-tier-count {
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(200, 190, 170, 0.7);
}

/* Phase Status W2 (Rome 2026-05-16) — Worn / Stored badges + dimmed
   pill style for stored clothing on the Owned tab. */
.gp-pill-worn {
  background: rgba(80, 180, 100, 0.20);
  border: 1px solid rgba(110, 220, 130, 0.55);
  color: #a8e0b8;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.gp-pill-stored {
  background: rgba(140, 140, 140, 0.10);
  border: 1px solid rgba(160, 160, 160, 0.30);
  color: rgba(200, 190, 170, 0.65);
  font-style: italic;
}
.gp-list-pill.gp-pill-dim {
  opacity: 0.5;
}

.wc-ammo-fire.concoction-active {
  background: #2d2d2d;
  color: #ddd;
  border: 1px solid #555;
}

.wc-ammo-fire.concoction-active.on {
  background: #6a3;
  color: #fff;
  border-color: #4a2;
  font-weight: 500;
}

.wc-ammo-fire.concoction-active:hover { filter: brightness(1.15); }

.wc-ammo-fire {
  background: rgba(140,180,140,0.18);
  color: var(--cream);
  border: 1px solid rgba(140,180,140,0.5);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.72rem; letter-spacing: 0.5px;
  text-transform: uppercase; cursor: pointer;
}

.wc-ammo-fire:hover:not(:disabled) { background: rgba(140,180,140,0.35); }

.wc-ammo-fire:disabled { opacity: 0.4; cursor: not-allowed; }

.gp-section { margin-top: 18px; }

.gp-section-title { font-size: 1.1rem; color: var(--gold); margin: 0 0 10px 0;
  border-bottom: 1px solid rgba(212,175,55,0.25); padding-bottom: 4px; }

/* Item rename pencil button (Rome 2026-05-10). Small, subtle — sits next
   to each owned item's name. Renamed items show their name in italic
   gold so the personalization reads as intentional. The pencil is
   subdued by default and brightens on hover. */
.gp-item-rename-btn {
  display: inline-block;
  padding: 0 4px;
  margin-left: 2px;
  background: transparent;
  border: none;
  color: rgba(212, 175, 55, 0.45);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  vertical-align: baseline;
  transition: color 0.15s, transform 0.15s;
}
.gp-item-rename-btn:hover {
  color: var(--gold, #d4a853);
  transform: scale(1.15);
}
.gp-container-item-name.gp-item-renamed,
.wc-name-txt.wc-name-renamed {
  font-style: italic;
  color: var(--gold-light, #e8c878);
}

/* Notes toggle button (Rome 2026-05-10). Small chip next to the edit pencil,
   only present when the item has player notes. Click expands the notes
   inline on the card. */
.gp-item-notes-btn {
  display: inline-block;
  padding: 0 6px;
  margin-left: 4px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 3px;
  color: rgba(212, 175, 55, 0.75);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1.4;
  vertical-align: baseline;
  transition: background 0.15s, color 0.15s;
}
.gp-item-notes-btn:hover {
  background: rgba(212, 175, 55, 0.18);
  color: var(--gold, #d4a853);
}
.gp-item-notes-btn.open {
  background: rgba(212, 175, 55, 0.20);
  color: var(--gold-light, #e8c878);
  border-color: rgba(212, 175, 55, 0.5);
}

/* Status pill — clickable toggle next to an item name. Items with the
   canon Status(N) keyword get this pill. Active state contributes to
   _statusFromGear(c) → _currentStatus(c) → SC Spending Cap. Per Rome
   2026-05-12 gear Status wiring. */
.gp-item-status-pill {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--cream-dim);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  margin-left: 4px;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: all 0.12s ease;
}
.gp-item-status-pill:hover {
  border-color: rgba(212, 175, 55, 0.65);
  color: var(--cream);
}
.gp-item-status-pill.active {
  background: rgba(100, 180, 120, 0.22);
  border-color: rgba(100, 180, 120, 0.75);
  color: #c8e8d8;
  box-shadow: inset 0 0 0 1px rgba(168, 224, 184, 0.22);
}
.gp-item-status-pill.active:hover {
  background: rgba(100, 180, 120, 0.32);
  border-color: rgba(168, 224, 184, 0.85);
  color: #e8f4e8;
}
/* Expanded notes — breaks to its own row inside the flex item card. */
.gp-item-notes-display {
  flex-basis: 100%;
  margin-top: 4px;
  padding: 6px 10px;
  border-left: 2px solid rgba(212, 175, 55, 0.35);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(232, 200, 120, 0.95);
  font-size: 0.85rem;
  font-style: italic;
  white-space: pre-wrap;       /* preserve line breaks the user typed */
  word-break: break-word;
  border-radius: 0 3px 3px 0;
}

/* ─── Mysticaria — magic-item chip + expansion (Phase 1, Rome 2026-05-15) ───
   The chip is a clickable button rendered next to the item name when
   item.mysticaria is non-empty. Click expands a read-only detail block
   beneath the item row. Band class colors the chip by narrative-band
   per SLSS 9 §1.6 (trivial / bind-or-spend / bind-or-relic). */
.gp-magic-chip {
  display: inline-block;
  padding: 1px 8px;
  margin-left: 6px;
  background: rgba(180, 160, 240, 0.10);
  border: 1px solid rgba(180, 160, 240, 0.35);
  border-radius: 10px;
  color: rgba(220, 210, 250, 0.92);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  vertical-align: baseline;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.gp-magic-chip:hover {
  background: rgba(180, 160, 240, 0.20);
  border-color: rgba(200, 180, 255, 0.65);
  color: #e8e0ff;
}
.gp-magic-chip.open {
  background: rgba(180, 160, 240, 0.24);
  border-color: rgba(200, 180, 255, 0.75);
  color: #f0e8ff;
}
/* Band colors. Trivial = cool/quiet, Bind-or-Spend = warm gold (the
   active-choice band), Bind-or-Relic = deep red (the saga-defining cost). */
.gp-magic-chip.band-trivial {
  background: rgba(140, 200, 200, 0.10);
  border-color: rgba(140, 200, 200, 0.40);
  color: rgba(190, 230, 230, 0.95);
}
.gp-magic-chip.band-trivial:hover,
.gp-magic-chip.band-trivial.open {
  background: rgba(140, 200, 200, 0.22);
  border-color: rgba(180, 230, 230, 0.75);
  color: #d8f0f0;
}
.gp-magic-chip.band-bind-or-spend {
  background: rgba(212, 175, 55, 0.14);
  border-color: rgba(212, 175, 55, 0.55);
  color: rgba(232, 200, 120, 0.95);
}
.gp-magic-chip.band-bind-or-spend:hover,
.gp-magic-chip.band-bind-or-spend.open {
  background: rgba(212, 175, 55, 0.26);
  border-color: rgba(232, 200, 120, 0.85);
  color: #f0d888;
}
.gp-magic-chip.band-bind-or-relic {
  background: rgba(200, 80, 100, 0.14);
  border-color: rgba(200, 80, 100, 0.55);
  color: rgba(240, 180, 190, 0.95);
}
.gp-magic-chip.band-bind-or-relic:hover,
.gp-magic-chip.band-bind-or-relic.open {
  background: rgba(220, 100, 120, 0.26);
  border-color: rgba(240, 140, 160, 0.85);
  color: #ffd0d8;
}

/* Expanded magic detail — breaks to its own row, parallel to notes. */
.gp-item-magic-display {
  flex-basis: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border-left: 2px solid rgba(180, 160, 240, 0.45);
  background: rgba(0, 0, 0, 0.22);
  border-radius: 0 3px 3px 0;
  font-size: 0.82rem;
}
.gp-magic-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
  align-items: baseline;
}
.gp-magic-head-stat {
  color: rgba(220, 210, 250, 0.92);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.gp-magic-head-band {
  display: inline-block;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gp-magic-head-band.band-trivial {
  background: rgba(140, 200, 200, 0.15);
  color: #b8e0e0;
  border: 1px solid rgba(140, 200, 200, 0.4);
}
.gp-magic-head-band.band-bind-or-spend {
  background: rgba(212, 175, 55, 0.18);
  color: #e8c878;
  border: 1px solid rgba(212, 175, 55, 0.5);
}
.gp-magic-head-band.band-bind-or-relic {
  background: rgba(200, 80, 100, 0.18);
  color: #f0b8c0;
  border: 1px solid rgba(220, 100, 120, 0.5);
}
.gp-magic-activation {
  color: rgba(220, 220, 220, 0.88);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  margin-bottom: 6px;
  padding: 3px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.gp-magic-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gp-magic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
  font-size: 0.78rem;
}
.gp-magic-tag {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
}
.gp-magic-tag.pow {
  background: rgba(180, 160, 240, 0.22);
  color: #d8d0ff;
  border: 1px solid rgba(180, 160, 240, 0.5);
}
.gp-magic-tag.mod {
  background: rgba(140, 200, 200, 0.20);
  color: #c8e0e0;
  border: 1px solid rgba(140, 200, 200, 0.5);
}
.gp-magic-row-name {
  color: rgba(232, 220, 200, 0.96);
  font-weight: 600;
}
.gp-magic-row-meta {
  color: rgba(200, 190, 170, 0.65);
  font-size: 0.72rem;
}
.gp-magic-row-q {
  margin-left: auto;
  color: rgba(220, 200, 250, 0.85);
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.74rem;
}
.gp-magic-row-scope {
  flex-basis: 100%;
  padding-left: 30px;
  color: rgba(180, 170, 150, 0.65);
  font-style: italic;
  font-size: 0.72rem;
}
.gp-magic-row.missing {
  color: rgba(220, 120, 120, 0.85);
  font-style: italic;
}

/* Needs-setup chip variant — unparsed presets whose mysticaria[] is
   empty. Same band color as a regular chip but with a dashed border. */
.gp-magic-chip.needs-setup {
  border-style: dashed;
  opacity: 0.92;
}

/* Phase 6 — Active state: chip glows when the magic is firing. Brighter
   palette, stronger border, subtle inner shadow to read as "on". */
.gp-magic-chip.active {
  background: rgba(180, 160, 240, 0.35);
  border-color: rgba(220, 200, 255, 0.95);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-weight: 700;
}
.gp-magic-chip.active.band-trivial       { background: rgba(140, 200, 200, 0.40); border-color: rgba(200, 240, 240, 0.95); }
.gp-magic-chip.active.band-bind-or-spend { background: rgba(212, 175, 55,  0.40); border-color: rgba(240, 220, 140, 0.95); }
.gp-magic-chip.active.band-bind-or-relic { background: rgba(220, 100, 120, 0.40); border-color: rgba(255, 180, 200, 0.95); }

/* Phase 6 — Bound state: chip carries a small lock visual via the bound
   class. The accompanying Bind button shows the lock prominently. */
.gp-magic-chip.bound {
  border-style: solid;
  border-width: 1.5px;
}

/* Phase 6 — Fate-Bind toggle button, sits between the chip and Magic ▾.
   Smaller than the chip; amber palette (Fate axis), with a "★ Bound"
   state when the binding is active. */
.gp-item-magic-bind {
  display: inline-block;
  padding: 0 7px;
  margin-left: 4px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 3px;
  color: rgba(232, 200, 120, 0.85);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1.4;
  vertical-align: baseline;
  transition: all 0.15s;
  font-family: inherit;
}
.gp-item-magic-bind:hover {
  background: rgba(212, 175, 55, 0.20);
  border-color: rgba(232, 200, 120, 0.65);
  color: #f0d888;
}
.gp-item-magic-bind.bound {
  background: rgba(212, 175, 55, 0.30);
  border-color: rgba(240, 220, 140, 0.85);
  color: #fff0c0;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 140, 0.25);
}

/* Magic ▾ toggle button — parallels Notes ▾ but in the magic palette.
   Click toggles the expansion. Distinct from the chip (which is the
   read-only stat display + Phase 6 activate surface). */
.gp-item-magic-btn {
  display: inline-block;
  padding: 0 6px;
  margin-left: 4px;
  background: rgba(180, 160, 240, 0.08);
  border: 1px solid rgba(180, 160, 240, 0.30);
  border-radius: 3px;
  color: rgba(220, 210, 250, 0.78);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1.4;
  vertical-align: baseline;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.gp-item-magic-btn:hover {
  background: rgba(180, 160, 240, 0.18);
  color: #e8e0ff;
  border-color: rgba(200, 180, 255, 0.55);
}
.gp-item-magic-btn.open {
  background: rgba(180, 160, 240, 0.22);
  color: #f0e8ff;
  border-color: rgba(200, 180, 255, 0.65);
}

/* Phase 7 W7 follow-up (Rome 2026-05-15) — Nullify surge button for
   G30 Magic Nullification. Appears only when item is activated and
   carries G30. Yellow/amber tone to distinguish from purple Magic ▾
   and gold Activate chip. */
.gp-item-magic-nullify {
  display: inline-block;
  padding: 0 6px;
  margin-left: 4px;
  background: rgba(240, 200, 80, 0.10);
  border: 1px solid rgba(240, 200, 80, 0.42);
  border-radius: 3px;
  color: rgba(252, 220, 130, 0.92);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1.4;
  vertical-align: baseline;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.gp-item-magic-nullify:hover {
  background: rgba(240, 200, 80, 0.22);
  color: #fff0c0;
  border-color: rgba(255, 220, 120, 0.7);
}
.gp-magic-needs-setup {
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(232, 200, 120, 0.10);
  border-left: 2px solid rgba(232, 200, 120, 0.55);
  border-radius: 0 3px 3px 0;
  color: rgba(232, 220, 180, 0.90);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.45;
}
/* SLSS 9 description blocks inside the Magic ▾ expansion. Two
   paragraphs: flavor (italic, muted — "what it IS") and mechanics
   (non-italic, accent border — "what it DOES"). Mirrors the Library
   card treatment so the visual language is consistent. */
.gp-magic-flavor {
  margin-top: 6px;
  padding: 6px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  color: rgba(220, 210, 180, 0.82);
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.45;
}
/* Phase 5 — Mysticaria section inside the ✎ Edit Item modal. */
.gp-edit-row-mysticaria {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(180, 160, 240, 0.30);
}
.gp-edit-mysticaria-header {
  font-weight: 600; font-size: 0.9rem; color: rgba(220, 210, 250, 0.95);
}
.gp-edit-mysticaria-hint {
  font-weight: 400; color: rgba(200, 190, 170, 0.65); font-size: 0.75rem;
}
.gp-edit-mysticaria-mount { margin-top: 2px; }
.gp-edit-mysticaria-strip {
  align-self: flex-start;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid rgba(220, 100, 120, 0.45);
  border-radius: 3px;
  color: rgba(240, 180, 190, 0.85);
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
  font-family: inherit; transition: all 0.15s ease;
}
.gp-edit-mysticaria-strip:hover {
  background: rgba(220, 100, 120, 0.15);
  border-color: rgba(240, 140, 160, 0.75);
  color: #ffd0d8;
}

.gp-magic-mechanics {
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 2px solid rgba(180, 160, 240, 0.40);
  border-radius: 0 3px 3px 0;
  color: rgba(232, 220, 200, 0.92);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* ─── Mystic picker — Phase 2 (Rome 2026-05-15) ─────────────────────────
   Sub-tab row inside the Mystic pill: Modalities / Magic Items. Sits
   between the class-pill row and the gp-controls block. */
.gp-mystic-subtabs {
  display: flex;
  gap: 4px;
  margin: 6px 0 4px 0;
  padding: 0 2px;
}
.gp-mystic-subtab {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 4px 4px 0 0;
  color: var(--cream-dim, rgba(232, 220, 200, 0.65));
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: none;
  transition: all 0.15s ease;
}
.gp-mystic-subtab:hover {
  background: rgba(212, 175, 55, 0.12);
  color: var(--cream, #e8dcc8);
  border-color: rgba(212, 175, 55, 0.45);
}
.gp-mystic-subtab.active {
  background: rgba(212, 175, 55, 0.18);
  color: var(--gold-light, #e8c878);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.18);
}

/* Magic filter pill — used inside Armor and Weapons layer rows.
   Styled distinctly from regular layer pills so it reads as a different
   axis (filter for magic items, not a canonical layer / skill). */
.gp-layer-pill-magic {
  margin-left: 6px;
  background: rgba(180, 160, 240, 0.10) !important;
  border: 1px solid rgba(180, 160, 240, 0.40) !important;
  color: rgba(220, 210, 250, 0.92) !important;
}
.gp-layer-pill-magic:hover {
  background: rgba(180, 160, 240, 0.20) !important;
  border-color: rgba(200, 180, 255, 0.65) !important;
  color: #e8e0ff !important;
}
.gp-layer-pill-magic.active {
  background: rgba(180, 160, 240, 0.26) !important;
  border-color: rgba(200, 180, 255, 0.80) !important;
  color: #f0e8ff !important;
  box-shadow: inset 0 0 0 1px rgba(200, 180, 255, 0.30);
}

/* Phase 4 placeholder card — shown under Mystic → Magic and under
   Armor/Weapons → Magic until Phase 4 lands the Builder + Library. */
.gp-phase4-placeholder {
  padding: 16px 18px;
  margin: 8px 0;
  background: rgba(0, 0, 0, 0.18);
  border: 1px dashed rgba(180, 160, 240, 0.35);
  border-radius: 6px;
  color: rgba(232, 220, 200, 0.85);
  line-height: 1.5;
}
.gp-phase4-placeholder h3 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: rgba(220, 210, 250, 0.95);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gp-phase4-placeholder h3 .hint {
  color: var(--cream-dim, rgba(232, 220, 200, 0.55));
  font-weight: 400;
  font-size: 0.8rem;
}
.gp-phase4-placeholder p {
  margin: 6px 0;
  font-size: 0.85rem;
}
.gp-phase4-placeholder ul {
  margin: 6px 0 6px 18px;
  padding: 0;
}
.gp-phase4-placeholder li {
  margin: 4px 0;
  font-size: 0.85rem;
}
.gp-phase4-placeholder .hint {
  color: var(--cream-dim, rgba(232, 220, 200, 0.55));
  font-size: 0.78rem;
  font-style: italic;
}
.gp-phase4-placeholder code {
  background: rgba(0, 0, 0, 0.28);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
}

/* Base modal styles (Rome 2026-05-10) — defined here so the gear-UI module
   can host its own modals on surfaces that don't ship the generator's
   stylesheet (e.g. the standalone character sheet). The generator's CSS
   defines the same selectors; whichever loads first wins, both produce
   the same visual. The :where() wrapper keeps specificity at 0,0,0 so the
   generator stylesheet's identical rules always override these without
   needing !important. */
:where(.modal-overlay) {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
:where(.modal-box) {
  background: var(--bg-dark, #1a1410);
  border: 1px solid var(--gold-dim, rgba(212,175,55,0.4));
  border-radius: 6px;
  padding: 28px 32px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  color: var(--text, #e8d8b0);
}
:where(.modal-box h3) {
  color: var(--gold, #d4a853);
  margin: 0 0 12px 0;
}
:where(.modal-actions) {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
:where(.btn) {
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid rgba(212,175,55,0.4);
  background: transparent;
  color: var(--gold, #d4a853);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
}
:where(.btn-primary) {
  background: rgba(212,175,55,0.18);
  border-color: var(--gold, #d4a853);
}
:where(.btn-primary):hover { background: rgba(212,175,55,0.30); }
:where(.btn-secondary):hover,
:where(.btn-ghost):hover { background: rgba(212,175,55,0.10); }

/* Edit-item modal (Rome 2026-05-10). Builds on the .modal-overlay /
   .modal-box pattern in the generator stylesheet. Form fields are stacked
   row layouts with a per-field "↺" reset button on the right. */
/* Phase 5 — modal can get tall with the Mysticaria editor; allow scroll. */
.gp-edit-modal {
  max-height: 90vh;
  overflow-y: auto;
}
.gp-edit-modal-orig {
  min-width: 380px;
  max-width: 520px;
}
.gp-edit-modal h3 {
  margin: 0 0 8px 0;
}
.gp-edit-canon {
  font-size: 0.8rem;
  color: rgba(212, 175, 55, 0.65);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}
.gp-edit-canon strong {
  color: var(--gold-light, #e8c878);
  font-weight: 600;
}
.gp-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.gp-edit-row label {
  flex: 0 0 90px;
  text-align: right;
  font-size: 0.85rem;
  color: rgba(212, 175, 55, 0.75);
}
.gp-edit-row-notes {
  align-items: flex-start;
}
.gp-edit-row-notes label {
  padding-top: 6px;
}
.gp-edit-field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gp-edit-field-notes {
  align-items: flex-start;
}
.gp-edit-field input[type="text"],
.gp-edit-field input[type="number"],
.gp-edit-field textarea {
  flex: 1 1 auto;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(212, 175, 55, 0.30);
  color: var(--text, #e8d8b0);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.9rem;
  font-family: inherit;
}
.gp-edit-field textarea {
  resize: vertical;
  min-height: 80px;
}
.gp-edit-field input::placeholder,
.gp-edit-field textarea::placeholder {
  color: rgba(212, 175, 55, 0.30);
  font-style: italic;
}
.gp-edit-reset {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: rgba(212, 175, 55, 0.55);
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.gp-edit-reset:hover {
  color: var(--gold, #d4a853);
  border-color: rgba(212, 175, 55, 0.55);
  transform: rotate(-90deg);
}
.gp-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}
.gp-edit-actions-spacer {
  flex: 1 1 auto;
}
.gp-edit-reset-all {
  margin-right: auto;
  font-size: 0.78rem;
}

/* Magical-items card decorations (Rome 2026-05-10). Category badge color-codes
   Implement / Raiment / Token; mastery chip is a quiet gold label. Description
   and note text wrap freely; note is italic and dimmed. */
.gp-modality-cat-badge {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  color: #1a1a1a;
}
.gp-modality-cat-badge.gp-modality-implement { background: #c9a958; }
.gp-modality-cat-badge.gp-modality-raiment   { background: #a890c8; }
.gp-modality-cat-badge.gp-modality-token     { background: #b88a72; }

.gp-modality-mastery {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--gold-dim, #a07830);
  font-style: italic;
  margin-left: 6px;
}

.gp-modality-desc {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--cream, #e8dcc6);
  margin-top: 4px;
  line-height: 1.45;
}

.gp-modality-note {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--cream-dim, #b0a898);
  margin-top: 3px;
  line-height: 1.4;
}

/* Collapsible H1 — used by the For Sale section so the player can click
   the entire title row to hide / show the picker beneath. Chevron prefix
   mirrors the Hirelings / Buildings pattern. Per Rome 2026-05-10. */
.gp-section-title-collapsible { cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px; transition: color 0.15s, border-color 0.15s; }

.gp-section-title-collapsible:hover { color: #f0d97a;
  border-bottom-color: rgba(212,175,55,0.55); }

.gp-section-title-chevron { color: var(--gold); font-size: 0.95rem;
  line-height: 1; display: inline-block; min-width: 0.95em; text-align: center; }

.gp-class-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.gp-class-pill { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12); cursor: pointer; font-size: 0.85rem; user-select: none;
  color: var(--cream); }

.gp-class-pill:hover:not(.disabled) { background: rgba(212,175,55,0.12); border-color: rgba(212,175,55,0.4); }

.gp-class-pill.active { background: rgba(212,175,55,0.25); border-color: rgba(212,175,55,0.7); color: var(--gold); }

.gp-class-pill.disabled { opacity: 0.45; cursor: not-allowed; font-style: italic; }

.gp-class-pill em { color: var(--cream-dim); font-size: 0.8em; font-style: normal; }

.gp-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.gp-search { width: 100%; padding: 7px 11px; border-radius: 6px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); color: var(--cream); font-size: 0.9rem; }

.gp-search:focus { outline: none; border-color: rgba(212,175,55,0.6); background: rgba(0,0,0,0.45); }

.gp-layer-row { display: flex; flex-wrap: wrap; gap: 4px; }

.gp-layer-pill { padding: 3px 9px; border-radius: 4px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1); cursor: pointer; font-size: 0.8rem; user-select: none;
  color: var(--cream); }

.gp-layer-pill:hover { background: rgba(212,175,55,0.1); }

.gp-layer-pill.active { background: rgba(212,175,55,0.22); border-color: rgba(212,175,55,0.6); color: var(--gold); }

.gp-body { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }

.gp-equipped-panel { padding: 12px; background: rgba(0,0,0,0.25); border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08); }

.gp-equipped-title { margin: 0 0 8px 0; font-size: 0.95rem; color: var(--gold); }

.gp-equipped-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }

.gp-equipped-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 7px; background: rgba(255,255,255,0.04); border-radius: 4px; }

.gp-eq-name { font-size: 0.85rem; }

.gp-equipped-total { padding-top: 7px; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem; color: var(--cream); font-family: 'Courier New', monospace; letter-spacing: 1px; }

.gp-empty { padding: 14px; color: var(--cream-dim); font-size: 0.85rem; font-style: italic; text-align: center; }

.gp-list-col { min-width: 0; }

.gp-item-list { display: flex; flex-direction: column; gap: 5px; }

.gp-row { background: rgba(255,255,255,0.03); border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.06); overflow: hidden; }

.gp-row.open { border-color: rgba(212,175,55,0.5); }

.gp-row-main { display: grid; grid-template-columns: 1fr 140px 260px; gap: 10px;
  padding: 8px 11px; cursor: pointer; align-items: center; }

.gp-row-main:hover { background: rgba(212,175,55,0.06); }

.gp-row-name { font-weight: 600; font-size: 0.9rem; color: var(--cream); }

.gp-row-meta { font-size: 0.8rem; color: var(--cream-dim); }

.gp-row-hardness { display: flex; justify-content: flex-end; align-items: center; }

.gp-row-actions { padding: 0 11px 8px 11px; }

.gp-btn-sm { padding: 3px 11px; font-size: 0.8rem; cursor: pointer; border-radius: 4px;
  background: rgba(212,175,55,0.18); border: 1px solid rgba(212,175,55,0.5); color: var(--gold); }

.gp-btn-sm:hover { background: rgba(212,175,55,0.3); }

.gp-btn-sm.remove { background: rgba(180,80,60,0.15); border-color: rgba(180,80,60,0.4); color: #e09080; }

.gp-btn-sm.remove:hover { background: rgba(180,80,60,0.28); }

.gp-row-detail { padding: 11px 13px; border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2); }

.gp-detail-card { display: flex; flex-direction: column; gap: 9px; font-size: 0.85rem; }

.gp-detail-section { display: flex; flex-direction: column; gap: 4px; }

.gp-detail-section strong { font-size: 0.75rem; color: var(--gold); text-transform: uppercase;
  letter-spacing: 1px; }

.gp-hardness-grid { display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid rgba(212,175,55,0.4); border-radius: 4px; overflow: hidden;
  max-width: 320px; background: rgba(0,0,0,0.2); }

.gp-h-head, .gp-h-cell { padding: 4px 0; text-align: center; line-height: 1.1;
  border-right: 1px solid rgba(212,175,55,0.22); }

.gp-h-head:last-child, .gp-h-cell:last-child { border-right: none; }

.gp-h-head { font-size: 0.7rem; color: var(--gold-dim); letter-spacing: 1px;
  text-transform: uppercase; background: rgba(212,175,55,0.08);
  border-bottom: 1px solid rgba(212,175,55,0.3); font-family: var(--font-title); }

.gp-h-cell { font-size: 1rem; font-weight: 600; color: var(--cream);
  font-family: 'Courier New', monospace; }

.gp-h-cell.zero { color: var(--cream-dim); opacity: 0.55; }

.gp-hardness-grid.compact { max-width: none; width: 100%; }

.gp-hardness-grid.compact .gp-h-head { font-size: 0.65rem; padding: 2px 0; }

.gp-hardness-grid.compact .gp-h-cell { font-size: 0.85rem; padding: 3px 0;
  min-width: 28px; }

.gp-stats-row { display: flex; flex-wrap: wrap; gap: 7px 14px; font-size: 0.85rem; color: var(--cream); }

.gp-stats-row em { color: var(--cream-dim); font-style: normal; font-size: 0.8rem; margin-right: 3px; }

.gp-kw-list { display: flex; flex-wrap: wrap; gap: 4px; }

.gp-kw { padding: 1px 7px; background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.3);
  border-radius: 3px; font-size: 0.75rem; color: var(--gold); }

.gp-notes { color: var(--cream); font-style: italic; font-size: 0.8rem; }

.gp-source { color: var(--cream-dim); font-size: 0.7rem; }

.gp-layer-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; vertical-align: middle; }

.gp-layer-under { background: rgba(120, 180, 220, 0.18); color: #b9d8f0; border: 1px solid rgba(120,180,220,0.3); }

.gp-layer-main  { background: rgba(180, 130, 90, 0.18);  color: #e0b48a; border: 1px solid rgba(180,130,90,0.3); }

.gp-layer-outer { background: rgba(190, 190, 190, 0.18); color: #dadada; border: 1px solid rgba(190,190,190,0.3); }

.gp-layer-thick { background: rgba(140, 100, 60, 0.18);  color: #c69a6b; border: 1px solid rgba(140,100,60,0.3); }

.gp-layer-shield { background: rgba(150, 110, 180, 0.18); color: #c8a8e0; border: 1px solid rgba(150,110,180,0.3); }

.gp-kind-badge { display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 3px; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.5px; vertical-align: middle; }

.gp-kind-melee  { background: rgba(180, 80, 60, 0.18); color: #e09080;
  border: 1px solid rgba(180, 80, 60, 0.4); }

.gp-kind-ranged { background: rgba(90, 140, 180, 0.18); color: #a0c8e0;
  border: 1px solid rgba(90, 140, 180, 0.4); }

.gp-row-attack-summary { font-family: 'Courier New', monospace; font-size: 0.78rem;
  color: var(--cream); padding: 4px 6px; background: rgba(0,0,0,0.2);
  border: 1px solid rgba(212,175,55,0.2); border-radius: 4px;
  text-align: center; }

.gp-attacks-table { display: flex; flex-direction: column; gap: 2px;
  border: 1px solid rgba(212,175,55,0.4); border-radius: 4px;
  background: rgba(0,0,0,0.25); overflow: hidden; max-width: 100%; }

.gp-attk-row { display: grid;
  grid-template-columns: 2fr 0.8fr 0.5fr 0.7fr 0.5fr 0.4fr 0.4fr 0.7fr 0.3fr 2.5fr;
  gap: 6px; padding: 4px 8px; font-size: 0.78rem; align-items: center; }

.gp-attk-row > div { text-align: center; line-height: 1.2; }

.gp-attk-row .gp-attk-name { text-align: left; font-weight: 600; color: var(--cream); }

.gp-attk-row .gp-attk-kw   { text-align: left; }

.gp-attk-head { background: rgba(212,175,55,0.1); border-bottom: 1px solid rgba(212,175,55,0.3);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-dim);
  font-family: var(--font-title); }

.gp-attk-row:not(.gp-attk-head):nth-child(odd) { background: rgba(255,255,255,0.02); }

.gp-attk-row:not(.gp-attk-head) { color: var(--cream); }

.gp-attk-tier-pill { padding: 1px 6px; border-radius: 3px; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.5px; }

.gp-attk-tier-basic    { background: rgba(120, 180, 90, 0.15); color: #a8d080;
  border: 1px solid rgba(120, 180, 90, 0.3); }

.gp-attk-tier-advanced { background: rgba(180, 130, 60, 0.18); color: #e0b070;
  border: 1px solid rgba(180, 130, 60, 0.4); }

.gp-kw-sm { font-size: 0.7rem; padding: 0 5px; }

.gp-view-switch { display: flex; gap: 0; margin: 14px 0 16px 0;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(212,175,55,0.25);
  border-radius: 6px; padding: 3px; width: fit-content; }

.gp-view-switch-btn { padding: 6px 18px; font-size: 0.88rem; cursor: pointer;
  border: 1px solid transparent; border-radius: 4px; user-select: none;
  color: var(--cream-dim); background: transparent; transition: all 0.12s; }

.gp-view-switch-btn:hover { color: var(--cream); }

.gp-view-switch-btn.active { background: rgba(212,175,55,0.22);
  border-color: rgba(212,175,55,0.5); color: var(--gold); font-weight: 600; }

.gp-view-switch-count { display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: 0.72rem; background: rgba(255,255,255,0.08); border-radius: 8px;
  color: var(--cream); }

.gp-view-switch-btn.active .gp-view-switch-count { background: rgba(212,175,55,0.3); color: var(--gold); }

.gp-ammo-stacks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }

.gp-ammo-stack { display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  padding: 5px 10px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid rgba(140,180,140,0.6);
  border-radius: 4px; align-items: baseline; font-size: 0.88rem; }

.gp-ammo-name { color: var(--cream); font-weight: 600; }

.gp-ammo-count { color: var(--gold-light); font-family: 'Courier New', monospace; font-size: 0.85rem; }

.gp-ammo-pack { color: var(--cream-dim); font-size: 0.78rem; font-style: italic; }

.gp-conveyance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px; margin-bottom: 10px; }

.gp-conveyance-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid rgba(150,180,200,0.6);
  border-radius: 4px;
  padding: 8px 12px;
  display: flex; flex-direction: column; gap: 4px;
}

.gp-conveyance-card.overcap { border-left-color: var(--red, #d05050); }

.gp-conveyance-name { font-weight: 600; color: var(--cream); font-size: 0.95rem; }

.gp-conveyance-traits { font-size: 0.78rem; color: var(--cream-dim); font-style: italic; }

.gp-conveyance-cap { font-size: 0.78rem; color: var(--cream-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.gp-conveyance-cap-label { color: var(--gold-dim); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.66rem; }

.gp-conveyance-cap.muted { font-style: italic; }

.gp-conveyance-cap strong { color: var(--gold-light); font-family: 'Courier New', monospace; }

.gp-conveyance-bar { display: inline-block; width: 90px; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }

.gp-conveyance-bar-fill { display: block; height: 100%; background: rgba(150,180,200,0.6); transition: width 0.2s; }

.gp-conveyance-card.overcap .gp-conveyance-bar-fill { background: rgba(208,80,80,0.7); }

.gp-conveyance-cost { font-size: 0.72rem; color: var(--gold-dim); margin-top: 2px; }

.gp-kind-mount { background: rgba(150,180,200,0.12); border-color: rgba(150,180,200,0.35); color: #a0c0d0; }

.gp-kind-concoction { background: rgba(160,90,180,0.12); border-color: rgba(160,90,180,0.35); color: #c0a0d0; }

.gp-kind-strap { background: rgba(180,140,80,0.12); border-color: rgba(180,140,80,0.4); color: #d8b878; }

.gp-container-item-pts { font-family: 'Courier New', monospace; color: #d8b878;
  font-size: 0.78rem; padding: 1px 6px; background: rgba(180,140,80,0.08);
  border: 1px solid rgba(180,140,80,0.3); border-radius: 3px; }

.gp-container-card.nested { margin-left: 16px; margin-top: 4px;
  border-left-style: solid; border-left-color: rgba(140,140,180,0.5); }

.gp-container-card.nested.depth-2 { margin-left: 28px; }

.gp-container-card.nested.depth-3 { margin-left: 40px; }

.gp-container-card.nested.depth-4 { margin-left: 52px; }

.gp-container-rack-moveto { margin-left: 8px; }

.gp-container-singledose { font-size: 0.65rem; padding: 1px 5px; border-radius: 3px;
  background: rgba(160,90,180,0.12); border: 1px solid rgba(160,90,180,0.4);
  color: #c8a0d8; text-transform: uppercase; letter-spacing: 0.4px; }

.gp-container-card.rack { border-left-style: dashed; border-left-color: rgba(180,140,80,0.8); }

.gp-container-card.rack .gp-container-name::before { content: '⛓ '; color: rgba(180,140,80,0.7); }

.gp-container-pts { display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 0.78rem; color: var(--cream-dim);
  padding: 1px 6px; background: rgba(180,140,80,0.08);
  border: 1px solid rgba(180,140,80,0.3); border-radius: 3px; }

.gp-container-pts.overpts { background: rgba(208,80,80,0.18); border-color: rgba(208,80,80,0.5); }

.gp-container-pts-label { color: var(--gold-dim); font-size: 0.66rem; letter-spacing: 0.5px; text-transform: uppercase; }

.gp-container-pts strong { color: #d8b878; font-family: 'Courier New', monospace; }

.gp-moveto.strap { background: rgba(180,140,80,0.18); border-color: rgba(180,140,80,0.45); }

.gp-container-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid rgba(180,140,80,0.6); border-radius: 4px; margin-bottom: 6px; }

.gp-container-card.loose { border-left-color: rgba(160,160,160,0.4); }

.gp-container-card.builtin { border-left-color: rgba(180,140,80,0.9); background: rgba(180,140,80,0.06); }

.gp-container-card.builtin .gp-container-cat { background: rgba(180,140,80,0.15); border-color: rgba(180,140,80,0.4); color: var(--gold-light); }

.gp-container-card.open { background: rgba(255,255,255,0.05); }

.gp-container-card.overcap { border-left-color: var(--red, #d05050); }

.gp-container-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer;
  user-select: none; }

.gp-container-head:hover { background: rgba(212,175,55,0.05); }

.gp-container-chevron { font-size: 0.9rem; color: var(--gold-dim); width: 14px; }

.gp-container-name { font-weight: 600; color: var(--cream); flex: 0 1 auto; }

.gp-container-cat { font-size: 0.72rem; color: var(--gold-dim); text-transform: uppercase; letter-spacing: 0.5px;
  padding: 1px 6px; border: 1px solid rgba(212,175,55,0.3); border-radius: 3px; }

.gp-container-cap { font-size: 0.78rem; color: var(--cream-dim); font-family: 'Courier New', monospace; }

.gp-container-bar { display: inline-block; width: 80px; height: 6px; background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden; }

.gp-container-bar-fill { display: block; height: 100%; background: rgba(120,180,90,0.6); transition: width 0.2s; }

.gp-container-card.overcap .gp-container-bar-fill { background: rgba(208,80,80,0.7); }

.gp-container-bar-fill.full { background: rgba(180,140,80,0.85); }

.gp-container-bar-fill.overcap { background: rgba(208,80,80,0.7); }

.gp-container-cap.full,
.gp-container-pts.full {
  background: rgba(180,140,80,0.18);
  border: 1px solid rgba(180,140,80,0.5);
  color: #d8b878;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}

.gp-container-cap.full::after,
.gp-container-pts.full::after { content: ' FULL'; color: #e8c878; font-size: 0.66rem; letter-spacing: 0.5px; margin-left: 4px; }

.gp-container-cap.overcap { color: #d8a878; }

.gp-container-count { font-size: 0.72rem; color: var(--cream-dim); margin-left: auto; }

.gp-container-body { padding: 6px 12px 10px 36px; display: flex; flex-direction: column; gap: 4px; }

.gp-container-empty { color: var(--cream-dim); font-size: 0.78rem; font-style: italic; padding: 4px 0; }

.gp-container-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 6px;
  background: rgba(0,0,0,0.15); border-radius: 3px; font-size: 0.85rem; }

.gp-container-item-kind { font-size: 0.65rem; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }

.gp-container-item-name { flex: 1 1 auto; color: var(--cream); }

.gp-container-item-sp { font-family: 'Courier New', monospace; font-size: 0.78rem; color: var(--cream-dim); }

.gp-container-item-rounds { font-family: 'Courier New', monospace; color: #a8d080;
  font-size: 0.85rem; padding: 1px 6px; background: rgba(140,180,140,0.1);
  border: 1px solid rgba(140,180,140,0.3); border-radius: 3px; }

.gp-container-item-doses { font-family: 'Courier New', monospace; color: #c0a0d0;
  font-size: 0.85rem; padding: 1px 6px; background: rgba(160,90,180,0.1);
  border: 1px solid rgba(160,90,180,0.35); border-radius: 3px; }

.wc-ammo-fire.concoction-use { background: rgba(160,90,180,0.18); border-color: rgba(160,90,180,0.5); color: #d8b0e8; }

.wc-ammo-fire.concoction-use:hover:not(:disabled) { background: rgba(160,90,180,0.32); }

.gp-kind-ammo { background: rgba(140,180,140,0.15); border-color: rgba(140,180,140,0.4); color: #a8d080; }

.gp-kind-gear { background: rgba(150,150,200,0.12); border-color: rgba(150,150,200,0.35); color: #b8b8e0; }

.gp-kind-food { background: rgba(200,160,100,0.12); border-color: rgba(200,160,100,0.35); color: #e0c080; }

.gp-kind-treasure { background: rgba(180,90,180,0.12); border-color: rgba(180,90,180,0.35); color: #d0a0d0; }

.gp-quality-badge { font-size: 0.7rem; padding: 1px 5px; border-radius: 3px;
  background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.35);
  color: var(--gold-light); margin-left: 4px; }

.gp-moveto { background: rgba(0,0,0,0.4); color: var(--cream); border: 1px solid rgba(212,175,55,0.3);
  border-radius: 3px; padding: 1px 4px; font-size: 0.78rem; cursor: pointer; }

.gp-moveto option { background: #1a1a2e; color: var(--cream); padding: 4px; }

/* Universal dropdown popup fix (Rome 2026-05-15) — browsers render
   the opened <option> list with OS defaults (typically light-grey
   background + white text on dark sites). Two-part fix:
     1. color-scheme: dark hints the browser to use dark-mode native
        widgets where supported (Chromium 81+, Firefox 96+).
     2. Explicit option { background + color } forces readable styling
        in browsers that don't honor color-scheme on <select>.
   This is a universal rule so all <select>s across the app inherit the
   fix; previously only .gp-moveto option carried it. */
select {
  color-scheme: dark;
}
select option {
  background: #1a1a2e;
  color: var(--cream, #e8dcc8);
  padding: 4px;
}

.gp-moveto option:checked { background: #3a2a1a; color: var(--gold-light); }

.gp-moveto-noid { font-size: 0.7rem; padding: 0 4px; }

.gp-owned-view { display: flex; flex-direction: column; gap: 10px; }

.gp-owned-empty { padding: 32px 20px; text-align: center;
  background: rgba(0,0,0,0.2); border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 6px; color: var(--cream-dim); }

.gp-owned-empty-msg { font-size: 0.95rem; margin-bottom: 12px; color: var(--cream); }

.gp-owned-empty-cta { padding: 7px 18px; cursor: pointer; border-radius: 4px;
  background: rgba(212,175,55,0.18); border: 1px solid rgba(212,175,55,0.55);
  color: var(--gold); font-size: 0.88rem; }

.gp-owned-empty-cta:hover { background: rgba(212,175,55,0.3); }

.gp-owned-cart-banner { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; background: rgba(212, 168, 83, 0.12);
  border: 1px solid rgba(212, 168, 83, 0.45); border-radius: 6px; }

.gp-owned-cart-msg { font-size: 0.88rem; color: var(--cream); }

.gp-owned-cart-msg strong { color: var(--gold); font-family: 'Courier New', monospace; }

.gp-owned-summary { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 12px;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(212,175,55,0.18);
  border-radius: 6px; }

.gp-owned-summary-cell { display: flex; flex-direction: column; gap: 2px; }

.gp-owned-summary-label { font-size: 0.65rem; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--cream-dim); }

.gp-owned-summary-val { font-family: 'Courier New', monospace; font-size: 0.95rem;
  color: var(--cream); font-weight: 600; }

.gp-owned-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; padding: 12px 14px; }

.gp-owned-card-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08); }

.gp-owned-card-name { font-size: 1rem; font-weight: 600; color: var(--cream); }

.gp-owned-card-copy { display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 0.7rem; font-weight: 500; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 3px;
  color: var(--cream-dim); vertical-align: middle; }

.gp-owned-card-meta { font-size: 0.82rem; color: var(--cream-dim); }

.gp-owned-card-actions { display: flex; gap: 6px; }

.gp-owned-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.gp-owned-card-section strong { display: block; font-size: 0.68rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }

.gp-cart-bar { position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 14px; margin-bottom: 12px;
  background: rgba(20, 16, 10, 0.95); backdrop-filter: blur(4px);
  border: 1px solid rgba(212,175,55,0.35); border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4); }

.gp-cart-bar.empty { background: rgba(20, 16, 10, 0.55); border-color: rgba(255,255,255,0.08); }

.gp-rgroups { display: grid; grid-template-columns: 2fr 2fr 3fr; gap: 10px; }

.gp-rgroup { display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 6px 6px 4px 6px; background: rgba(0,0,0,0.18);
  border: 1px solid rgba(212,175,55,0.18); border-radius: 4px; position: relative; }

.gp-rgroup.solo { grid-template-columns: 1fr; }

.gp-rgroup-label { position: absolute; top: -8px; left: 10px;
  background: rgba(20,16,10,0.95); padding: 0 6px;
  font-size: 0.62rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold); z-index: 1; }

.gp-rgroup-flag { display: inline-block; margin-left: 4px; padding: 0 4px;
  font-size: 0.6rem; background: rgba(180,80,60,0.22);
  border: 1px solid rgba(180,80,60,0.5); border-radius: 2px; color: #e09080;
  vertical-align: middle; letter-spacing: 0.5px; }

.gp-rcell { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px; padding: 5px 8px; text-align: center;
  display: flex; flex-direction: column; gap: 3px; }

.gp-rcell.available { background: rgba(212,168,83,0.10); border-color: rgba(212,168,83,0.35); }

.gp-rcell.over { color: #e09080; }

.gp-rcell-label { font-size: 0.6rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--cream-dim); }

.gp-rcell-val { font-size: 0.95rem; color: var(--cream); font-weight: 600;
  font-family: 'Courier New', monospace; line-height: 1.1; }

.gp-rcell.available .gp-rcell-val { color: #a8e0b8; }

.gp-rcell-val.over { color: #d88080; }

.gp-rcell-after { font-size: 0.72rem; color: var(--cream-dim); font-weight: normal;
  font-family: var(--font-body); margin-left: 3px; }

.gp-rcell-hint { font-size: 0.7rem; color: var(--cream-dim); font-style: italic; }

.gp-cart-action-row { display: flex; justify-content: flex-end; gap: 8px; }

.gp-cart-actions { display: flex; gap: 8px; }

.gp-btn { padding: 6px 14px; font-size: 0.85rem; cursor: pointer; border-radius: 4px;
  border: 1px solid; user-select: none; }

.gp-btn-commit { background: rgba(120, 180, 90, 0.18); border-color: rgba(120, 180, 90, 0.55); color: #b8e090; }

.gp-btn-commit:hover:not(.locked) { background: rgba(120, 180, 90, 0.32); }

.gp-btn-commit.locked { background: rgba(180, 80, 60, 0.15); border-color: rgba(180, 80, 60, 0.5); color: #e09080;
  cursor: not-allowed; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.78rem; font-weight: 700; }

.gp-btn-commit.locked::before { content: '🔒 '; }

.gp-btn-clear { background: rgba(180, 80, 60, 0.12); border-color: rgba(180, 80, 60, 0.4); color: #e09080; }

.gp-btn-clear:hover { background: rgba(180, 80, 60, 0.22); }

.gp-cart-list { width: 100%; display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); }

.gp-cart-item { display: flex; align-items: center; gap: 10px;
  padding: 4px 8px; background: rgba(255,255,255,0.04); border-radius: 3px; font-size: 0.82rem; }

.gp-cart-item-name { flex: 1; color: var(--cream); }

.gp-cart-item-qty { display: inline-flex; align-items: center; gap: 4px; }

.gp-cart-item-cost { min-width: 70px; text-align: right; color: var(--gold);
  font-family: 'Courier New', monospace; font-weight: 600; }

.gp-cart-item-remove { background: none; border: none; color: var(--cream-dim); cursor: pointer; font-size: 1rem;
  padding: 0 4px; line-height: 1; }

.gp-cart-item-remove:hover { color: #e09080; }

.gp-row-price { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 3px;
  background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.35);
  font-family: 'Courier New', monospace; font-size: 0.85rem; font-weight: 700; color: var(--gold);
  vertical-align: middle; }

.gp-btn-buy { background: rgba(212,175,55,0.18); border-color: rgba(212,175,55,0.55); color: var(--gold); }

.gp-btn-buy:hover { background: rgba(212,175,55,0.3); }

.gp-btn-staged { background: rgba(180, 130, 60, 0.18); border-color: rgba(180, 130, 60, 0.5); color: #e0b070;
  cursor: default; }

.gp-btn-staged-remove { background: rgba(180, 130, 60, 0.12); border-color: rgba(180, 130, 60, 0.4);
  color: #e0b070; }

.gp-btn-staged-remove:hover { background: rgba(180, 130, 60, 0.24); }

.gp-btn-equipped { background: rgba(120, 180, 90, 0.15); border-color: rgba(120, 180, 90, 0.4); color: #a8d080;
  cursor: default; }

.gp-row-actions { display: flex; gap: 6px; align-items: center; }

.gp-status-pill { padding: 2px 8px; font-size: 0.72rem; border-radius: 3px; text-transform: uppercase;
  letter-spacing: 0.5px; }

.gp-status-pill.staged { background: rgba(180, 130, 60, 0.15); color: #e0b070;
  border: 1px solid rgba(180, 130, 60, 0.4); }

.gp-status-pill.owned { background: rgba(120, 180, 90, 0.15); color: #a8d080;
  border: 1px solid rgba(120, 180, 90, 0.4); }

.gp-sc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: 100%; padding-top: 8px; margin-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.1); font-size: 0.82rem; }

.gp-sc-label { color: var(--cream-dim); text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem; }

.gp-sc-stepper { display: inline-flex; align-items: center; gap: 4px; }

.gp-sc-btn { width: 22px; height: 22px; border-radius: 3px; cursor: pointer; user-select: none;
  background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.4); color: var(--gold);
  font-size: 0.95rem; line-height: 1; padding: 0; }

.gp-sc-btn:hover:not(:disabled) { background: rgba(212,175,55,0.28); }

.gp-sc-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.gp-sc-value { min-width: 20px; text-align: center; font-family: 'Courier New', monospace;
  font-size: 0.95rem; color: var(--gold); font-weight: 600; }

.gp-sc-meta { color: var(--cream-dim); font-size: 0.78rem; }

.gp-sc-saving { color: #a8d080; font-weight: 600; font-family: 'Courier New', monospace; }

.gp-pricing-effects { display: flex; flex-wrap: wrap; gap: 6px;
  width: 100%; padding-top: 6px; margin-top: 4px;
  font-size: 0.78rem; }

.gp-pricing-effects .gp-pe-label { color: var(--cream-dim); text-transform: uppercase;
  letter-spacing: 1px; font-size: 0.72rem; margin-right: 4px; }

.gp-pe-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.72rem;
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: var(--gold);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
}
.gp-pe-tag.discount {
  background: rgba(140, 200, 140, 0.14);
  border-color: rgba(160, 220, 160, 0.45);
  color: #c8e8b8;
}

/* Discounted price display — strikethrough on original alongside
   discounted figure. Used in weapon picker price chip, weapon detail
   Cost line, and ammunition list meta. Per D-Gunman 2026-04-29.
   Strike line forced to a contrasting cream-dim so it's visible against
   the gold chip background; text-decoration-thickness lifted off the
   browser default which can render hairline
/* Delete-from-inventory button — small red x with margin to keep it
   away from the Move-to control. Confirm dialog before action.
   Per Rome 2026-04-29. */
.gp-item-delete {
  display: inline-block;
  margin-left: 14px;
  padding: 1px 7px;
  background: rgba(180, 60, 60, 0.12);
  border: 1px solid rgba(200, 80, 80, 0.42);
  color: #d88080;
  font-family: serif;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.1;
  vertical-align: middle;
}
.gp-item-delete:hover {
  background: rgba(220, 80, 80, 0.32);
  color: #ffb0b0;
  border-color: rgba(220, 100, 100, 0.7);
}
/* Gift button — stage at 0 sp. Amber tint to distinguish from Buy gold. */
.gp-btn.gp-btn-gift {
  background: rgba(180, 130, 60, 0.16);
  border-color: rgba(180, 130, 60, 0.48);
  color: #e0c070;
  margin-left: 4px;
}
.gp-btn.gp-btn-gift:hover {
  background: rgba(180, 130, 60, 0.32);
  color: #ffd890;
}

/* Sell pile + per-item Sell button. SLHH 6 paragraphs 107-128:
   Common 50% / Valuable 75% / Treasure 90% canonical resale; dropdown
   extends to all 5% steps from 30 to 100 for Sage discretion.
   Styled to match the gear UI palette - dark panel, gold-accent border,
   subtle green tint on the panel + sell button only. Per Rome 2026-04-29. */
.gp-item-sell {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: rgba(120, 180, 120, 0.14);
  border: 1px solid rgba(140, 200, 140, 0.42);
  color: #b8d8b0;
  font-family: var(--font-title, serif);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.1;
  vertical-align: middle;
}
.gp-item-sell:hover {
  background: rgba(140, 220, 140, 0.3);
  color: #d8f0c8;
  border-color: rgba(160, 240, 160, 0.6);
}
.gp-sell-pile {
  margin: 12px 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(140, 200, 140, 0.32);
  border-radius: 6px;
  overflow: hidden;
}
.gp-sell-pile-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(140, 200, 140, 0.08);
  border-bottom: 1px solid rgba(140, 200, 140, 0.22);
}
.gp-sell-pile-title {
  font-size: 1rem;
  color: #b8d8b0;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.gp-sell-pile-count {
  color: var(--cream-dim);
  font-size: 0.8rem;
}
.gp-sell-pile-total {
  margin-left: auto;
  color: var(--cream);
  font-size: 0.9rem;
  font-family: 'Courier New', monospace;
}
.gp-sell-pile-total strong {
  color: #c8e8b8;
  font-size: 1rem;
}
.gp-sell-pile-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 8px;
}
.gp-sell-pile-row {
  display: grid;
  grid-template-columns: 1fr 100px 200px 90px 30px;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.gp-sell-pile-row:last-child {
  border-bottom: none;
}
.gp-sell-pile-row:hover {
  background: rgba(140, 200, 140, 0.06);
}
.gp-sell-name {
  color: var(--cream);
  font-size: 0.9rem;
  font-weight: 500;
}
.gp-sell-base {
  color: var(--cream-dim);
  font-size: 0.8rem;
  font-family: 'Courier New', monospace;
}
.gp-sell-pct,
.gp-sell-tier {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--cream);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: var(--font-title, inherit);
  cursor: pointer;
}
.gp-sell-pct:hover,
.gp-sell-tier:hover {
  border-color: rgba(140, 200, 140, 0.6);
}
.gp-sell-pct:focus,
.gp-sell-tier:focus {
  outline: none;
  border-color: rgba(140, 200, 140, 0.8);
  background: rgba(0, 0, 0, 0.55);
}
.gp-sell-payout {
  color: #c8e8b8;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  text-align: right;
  font-size: 0.95rem;
}
.gp-sell-pile-actions {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(140, 200, 140, 0.22);
  justify-content: flex-end;
}
.gp-btn.gp-btn-sell {
  background: rgba(140, 200, 140, 0.18);
  border-color: rgba(160, 220, 160, 0.55);
  color: #c8e8b8;
  font-weight: 600;
}
.gp-btn.gp-btn-sell:hover {
  background: rgba(160, 220, 160, 0.35);
  color: #e0ffe0;
  border-color: rgba(180, 240, 180, 0.7);
}
.gp-btn.gp-btn-sell-clear {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--cream-dim);
}
.gp-btn.gp-btn-sell-clear:hover {
  background: rgba(180, 80, 60, 0.18);
  border-color: rgba(200, 100, 80, 0.45);
  color: #e09080;
}


/* Wallet selector — interactive coin + gem holdings with conversion steppers.
   Lives in the Gross Wealth area of the Gear tab. Per Rome 2026-04-29. */
.gp-wallet-panel {
  margin: 14px 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.gp-wallet-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
  background: rgba(212, 175, 55, 0.12);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  cursor: pointer;
  user-select: none;
}
.gp-wallet-head:hover { background: rgba(212, 175, 55, 0.2); }
.gp-wallet-chevron {
  color: var(--gold-dim, #c9a93f);
  font-size: 1rem;
  width: 14px;
  display: inline-block;
  text-align: center;
}
.gp-wallet-title {
  font-family: var(--font-title, serif);
  font-size: 1.1rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.gp-wallet-summary {
  margin-left: auto;
  color: var(--cream-dim);
  font-size: 0.85rem;
  font-family: 'Courier New', monospace;
}
.gp-wallet-body {
  padding: 12px 18px 16px 18px;
}
.gp-wallet-section { margin-top: 14px; }
.gp-wallet-section:first-child { margin-top: 0; }
.gp-wallet-section-title {
  font-family: var(--font-title, serif);
  font-size: 0.95rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gp-wallet-section-title.clickable { cursor: pointer; user-select: none; }
.gp-wallet-section-title.clickable:hover { color: #f4d57e; }
.gp-wallet-nation { margin-bottom: 6px; }
.gp-wallet-nation-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.gp-wallet-nation-head:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
}
.gp-wallet-nation-name {
  color: var(--cream);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.gp-wallet-nation-summary {
  margin-left: auto;
  color: #c8e8b8;
  font-size: 0.85rem;
  font-family: 'Courier New', monospace;
  font-weight: 600;
}
.gp-wallet-nation-body {
  padding: 8px 10px 8px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Coin / gem row — wider columns to match the rest of the gear UI's
   density. Stepper + qty fields doubled in size. Per Rome 2026-04-29. */
.gp-wallet-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 90px 100px minmax(110px, 1fr) 180px 90px;
  gap: 12px;
  align-items: center;
  padding: 6px 10px;
  font-size: 0.95rem;
  border-radius: 4px;
  border: 1px solid transparent;
}
.gp-wallet-row:hover {
  background: rgba(212, 175, 55, 0.07);
  border-color: rgba(212, 175, 55, 0.18);
}
.gp-wallet-coin-name {
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 500;
}
.gp-wallet-coin-value {
  color: var(--cream-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  text-align: right;
}
.gp-wallet-mat {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
}
.gp-wallet-mat-gold     { background: rgba(212, 175, 55, 0.25); color: #f4dc88; border: 1px solid rgba(212, 175, 55, 0.55); }
.gp-wallet-mat-silver   { background: rgba(200, 200, 210, 0.16); color: #e4e4ec; border: 1px solid rgba(200, 200, 210, 0.45); }
.gp-wallet-mat-copper   { background: rgba(180, 110, 70, 0.22); color: #ebb47e; border: 1px solid rgba(180, 110, 70, 0.5); }
.gp-wallet-mat-bronze   { background: rgba(150, 100, 60, 0.22); color: #dca078; border: 1px solid rgba(150, 100, 60, 0.5); }
.gp-wallet-mat-electrum { background: rgba(220, 220, 160, 0.2); color: #f4ecb0; border: 1px solid rgba(220, 220, 160, 0.5); }
.gp-wallet-mat-gem      { background: rgba(160, 110, 200, 0.22); color: #dcb0f0; border: 1px solid rgba(160, 110, 200, 0.5); }
.gp-wallet-prom {
  color: var(--cream-dim);
  font-size: 0.78rem;
  font-style: italic;
  text-align: left;
}

/* Stepper doubled in size. Qty cell sized for 3 digits. */
.gp-wallet-stepper {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.gp-wallet-step-btn {
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: var(--gold);
  padding: 4px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  min-width: 36px;
}
.gp-wallet-step-btn:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.32);
  border-color: rgba(212, 175, 55, 0.7);
  color: #f4dc88;
}
.gp-wallet-step-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.gp-wallet-qty {
  min-width: 56px;
  text-align: center;
  color: var(--cream);
  font-family: 'Courier New', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 1px;
}
/* Vehicle Passenger stepper (Rome 2026-05-11). Inline controls in the
   Conveyance cap-rows; ± buttons + integer input. Canon: 200 Sp per
   passenger (SLHH 6 §Space). */
.gp-conveyance-passengers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 2px 6px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 4px;
}
.gp-pass-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(212, 175, 55, 0.65);
  margin-right: 2px;
}
.gp-pass-step {
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: var(--gold, #d4a853);
  padding: 1px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}
.gp-pass-step:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.32);
  color: #f4dc88;
}
.gp-pass-step:disabled { opacity: 0.3; cursor: not-allowed; }
.gp-pass-qty {
  width: 44px;
  text-align: center;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(212, 175, 55, 0.30);
  color: var(--cream, #e8d8b0);
  border-radius: 3px;
  padding: 1px 4px;
  margin: 0 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
}
.gp-pass-qty:focus {
  border-color: var(--gold, #d4a853);
  background: rgba(0, 0, 0, 0.45);
  outline: none;
}
.gp-pass-qty::-webkit-outer-spin-button,
.gp-pass-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gp-pass-qty { -moz-appearance: textfield; appearance: textfield; }
.gp-pass-note {
  margin-left: 8px;
  font-size: 0.78rem;
  color: rgba(212, 175, 55, 0.55);
  font-style: italic;
}
.gp-pass-qty-text {
  min-width: 38px;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cream, #e8d8b0);
  letter-spacing: 0.5px;
}
.gp-conveyance-passengers.full {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.55);
}
.gp-conveyance-passengers.full .gp-pass-qty-text {
  color: var(--gold-light, #e8c878);
}

/* Editable qty input (Rome 2026-05-10). Same visual weight as .gp-wallet-qty
   but accepts direct typing — Enter/blur commits, click selects-all so a
   fresh number replaces. Spinner arrows hidden — +/-1 buttons cover that. */
.gp-wallet-qty-input {
  min-width: 64px;
  width: 64px;
  text-align: center;
  color: var(--cream, #e8d8b0);
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 4px;
  padding: 2px 4px;
  font-family: 'Courier New', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 1px;
  transition: border-color 0.15s, background 0.15s;
}
.gp-wallet-qty-input:hover,
.gp-wallet-qty-input:focus {
  border-color: var(--gold, #d4a853);
  background: rgba(0, 0, 0, 0.45);
  outline: none;
}
/* Hide native spinner arrows — +/-1 buttons handle increments. */
.gp-wallet-qty-input::-webkit-outer-spin-button,
.gp-wallet-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gp-wallet-qty-input {
  -moz-appearance: textfield;
  appearance: textfield;
}
.gp-wallet-sub {
  color: #c8e8b8;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  text-align: right;
  font-weight: 600;
}


/* Armor picker — collapsible category groups (Gambeson, Aketon, Silk, etc).
   Per Rome 2026-04-29. */
.gp-armor-cat {
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: hidden;
}
.gp-armor-cat.open {
  border-color: rgba(212, 175, 55, 0.35);
  background: rgba(0, 0, 0, 0.25);
}
.gp-armor-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid transparent;
}
.gp-armor-cat-head:hover {
  background: rgba(212, 175, 55, 0.08);
}
.gp-armor-cat.open .gp-armor-cat-head {
  background: rgba(212, 175, 55, 0.1);
  border-bottom-color: rgba(212, 175, 55, 0.25);
}
.gp-armor-cat-chevron {
  color: var(--gold-dim, #c9a93f);
  font-size: 0.85rem;
  width: 14px;
  text-align: center;
}
.gp-armor-cat-name {
  font-family: var(--font-title, serif);
  font-size: 0.95rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.gp-armor-cat-summary {
  margin-left: auto;
  color: var(--cream-dim);
  font-size: 0.78rem;
  font-family: 'Courier New', monospace;
}
.gp-armor-cat-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}


/* Container lock UI — fitted-lock chip, fit-lock dropdown, toggle buttons.
   Per Rome 2026-04-29. */
.gp-container-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.gp-lock-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.gp-lock-chip.locked {
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.55);
  color: #f4dc88;
}
.gp-lock-chip.unlocked {
  background: rgba(140, 140, 140, 0.14);
  border: 1px solid rgba(140, 140, 140, 0.4);
  color: var(--cream-dim);
}
.gp-lock-toggle {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--gold);
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gp-lock-toggle:hover { background: rgba(212, 175, 55, 0.28); }
.gp-lock-remove {
  background: rgba(180, 60, 60, 0.14);
  border: 1px solid rgba(200, 80, 80, 0.4);
  color: #d88080;
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}
.gp-lock-remove:hover {
  background: rgba(220, 80, 80, 0.3);
  color: #ffb0b0;
}
.gp-container-fit-lock {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
}
.gp-fit-lock-select {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: var(--cream);
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 0.78rem;
  cursor: pointer;
}
.gp-fit-lock-select:hover { border-color: rgba(212, 175, 55, 0.65); }
.gp-container-lock-empty {
  margin-left: 8px;
  color: var(--cream-dim);
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.55;
}
/* Locked container gets a faint amber border accent on the head row. */
.gp-container-card.locked-container > .gp-container-head {
  box-shadow: inset 3px 0 0 rgba(212, 175, 55, 0.7);
}

/* ── Encumbrance panel (Phase 2, 2026-04-30) ───────────────────────
   Personal vs Stowed totals with weight-tier banding. Matches the
   wallet-panel visual schema so the two cards sit harmoniously in
   the gear-wealth header. */
.gp-enc-host { display: block; }
.gp-enc-panel {
  margin: 14px 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.gp-enc-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
  background: rgba(212, 175, 55, 0.12);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  cursor: pointer;
  user-select: none;
}
.gp-enc-head:hover { background: rgba(212, 175, 55, 0.2); }
.gp-enc-title {
  font-family: var(--font-title, serif);
  font-size: 1.1rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.gp-enc-summary {
  margin-left: auto;
  color: var(--cream-dim);
  font-size: 0.85rem;
  font-family: 'Courier New', monospace;
}
.gp-enc-toggle {
  color: var(--gold-dim, #c9a93f);
  font-size: 1rem;
  width: 14px;
  display: inline-block;
  text-align: center;
}
.gp-enc-panel:not(.open) > .gp-enc-head {
  border-bottom: none;
}
.gp-enc-body {
  padding: 12px 18px 16px 18px;
}
.gp-enc-section { margin-top: 14px; }
.gp-enc-section:first-child { margin-top: 0; }
.gp-enc-section-title {
  font-family: var(--font-title, serif);
  font-size: 0.95rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
.gp-enc-section-sub {
  font-family: var(--font-body, sans-serif);
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream-dim);
  font-size: 0.78rem;
  margin-left: 8px;
  font-weight: normal;
}
.gp-enc-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.gp-enc-label {
  font-family: var(--font-title, serif);
  color: var(--cream);
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}
.gp-enc-value {
  color: var(--cream);
  font-family: 'Courier New', monospace;
  font-size: 0.92rem;
}
.gp-enc-cap {
  color: var(--cream-dim);
  font-size: 0.82rem;
  margin-left: 4px;
}
.gp-enc-tier {
  min-width: 92px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.78rem;
  font-family: var(--font-title, serif);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid transparent;
}
.gp-enc-tier.enc-tier-na {
  color: var(--cream-dim);
  background: transparent;
  border-color: transparent;
}
.gp-enc-tier.enc-tier-ok {
  color: #fff;
  background: #2f7a3a;            /* solid forest green */
  border-color: #4ea05c;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.gp-enc-tier.enc-tier-warn {
  color: #fff;
  background: #b07a17;            /* solid amber */
  border-color: #d8a23a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.gp-enc-tier.enc-tier-bad {
  color: #fff;
  background: #c5571a;            /* solid burnt orange */
  border-color: #e07a3a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.gp-enc-tier.enc-tier-crit {
  color: #fff;
  background: #a3201f;            /* deep solid red */
  border-color: #d44a48;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
/* Head-row variant: chip sits next to the toggle, slightly tighter so it
   doesn't push the chevron out of alignment with the wallet head row. */
.gp-enc-tier.gp-enc-tier-head {
  min-width: 80px;
  margin-left: 12px;
  font-size: 0.72rem;
  padding: 1px 8px;
}
.gp-enc-subtotals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(212, 175, 55, 0.18);
}
.gp-enc-subline {
  color: var(--cream-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
}
.gp-enc-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  color: var(--cream-dim);
  font-size: 0.74rem;
  font-style: italic;
  line-height: 1.4;
}

/* ── Phase 3 — Wielded weapons + pack-drop (2026-04-30) ──────────── */

/* Wield toggle on weapon rows in the Owned view. Default state is a
   subtle outline — when active it lights up amber to match the head chip. */
.gp-item-wield {
  background: transparent;
  color: var(--cream-dim);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.78rem;
  font-family: var(--font-title, serif);
  letter-spacing: 0.5px;
  cursor: pointer;
  margin-left: 4px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.gp-item-wield:hover {
  background: rgba(212, 175, 55, 0.12);
  color: var(--cream);
  border-color: rgba(212, 175, 55, 0.6);
}
.gp-item-wield.on {
  background: #b07a17;
  color: #fff;
  border-color: #d8a23a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  font-weight: 700;
}
.gp-item-wield.on:hover {
  background: #c89020;
}

/* Drop / Pickup button on pack container heads. Default (not dropped)
   shows a calm 'Drop' affordance; dropped state flips to a clear 'Pick up'. */
.gp-pack-drop {
  background: transparent;
  color: var(--cream-dim);
  border: 1px solid rgba(160, 160, 160, 0.4);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.78rem;
  font-family: var(--font-title, serif);
  letter-spacing: 0.5px;
  cursor: pointer;
  margin-left: 4px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.gp-pack-drop:hover {
  background: rgba(220, 110, 50, 0.16);
  color: var(--cream);
  border-color: rgba(220, 110, 50, 0.5);
}
.gp-pack-drop.dropped {
  background: #c5571a;
  color: #fff;
  border-color: #e07a3a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  font-weight: 700;
}
.gp-pack-drop.dropped:hover {
  background: #d76b2a;
}

/* Dropped container card — visual cue that it's lying on the ground. */
.gp-container-card.pack-dropped {
  opacity: 0.65;
  border-color: rgba(197, 87, 26, 0.6);
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 6px,
    rgba(197, 87, 26, 0.08) 6px,
    rgba(197, 87, 26, 0.08) 12px
  );
}
.gp-container-card.pack-dropped > .gp-container-head {
  border-bottom-color: rgba(197, 87, 26, 0.45);
}

/* Wielded sub-line in the encumbrance panel. */
.gp-enc-subline.gp-enc-wielded {
  color: var(--cream);
  font-weight: 500;
}
.gp-enc-wield-icon {
  margin-right: 4px;
}

/* Dropped section header in encumbrance panel — orange-tinted to match the
   pack-drop card outline. */
.gp-enc-section.gp-enc-dropped .gp-enc-section-title {
  border-bottom-color: rgba(197, 87, 26, 0.4);
}

/* ── Phase 4 — Cargo over-cap warnings (2026-04-30) ──────────────── */

/* Top-of-body banner inside the encumbrance panel. Tier-colored: warn/bad/crit
   each get their own background so the worst-case mount jumps out. */
.gp-enc-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  border: 1px solid;
  line-height: 1.35;
}
.gp-enc-banner-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.gp-enc-banner-text { color: #fff; }
.gp-enc-banner-text strong { font-weight: 700; }
.gp-enc-banner-text em { font-style: italic; color: #fff; }
.gp-enc-banner.gp-enc-banner-enc-tier-warn {
  background: #b07a17;
  border-color: #d8a23a;
}
.gp-enc-banner.gp-enc-banner-enc-tier-bad {
  background: #c5571a;
  border-color: #e07a3a;
}
.gp-enc-banner.gp-enc-banner-enc-tier-crit {
  background: #a3201f;
  border-color: #d44a48;
}

/* Tier chips in the panel get a subtle hand cursor when they have a tooltip. */
.gp-enc-tier[title] { cursor: help; }

/* Conveyance dual-cap rows in the encumbrance Stowed section.
   Per Timothy 2026-04-30 (Phase 4 / Task #206). */
.gp-enc-row.gp-enc-conv-head {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(212, 175, 55, 0.18);
}
.gp-enc-row.gp-enc-conv-head:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.gp-enc-row.gp-enc-conv-head .gp-enc-label {
  font-weight: 700;
  color: var(--gold);
}
.gp-enc-row.gp-enc-conv-cap {
  padding: 2px 0 2px 14px;
}
.gp-enc-conv-cap-label {
  color: var(--cream-dim) !important;
  font-style: italic;
}

/* Hitch chip list — shows the team of animals pulling a wagon. Per Rome
   2026-04-30 (multi-mount support). Each chip has a small × to unhitch. */
.gp-hitch-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 1px 8px;
  margin-right: 4px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 10px;
  color: var(--cream);
  font-size: 0.85rem;
}
.gp-hitch-remove {
  background: transparent;
  border: none;
  color: var(--cream-dim);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 2px;
  line-height: 1;
}
.gp-hitch-remove:hover {
  color: #d44a48;
}
.gp-hitch-empty {
  color: var(--cream-dim);
  font-style: italic;
  margin-right: 4px;
}
.gp-hitch-add {
  margin-left: 4px;
  font-size: 0.85rem;
}

/* Coin distribution row — appears under each wallet coin row when coins are
   distributed across multiple slots. Per Rome 2026-04-30. */
.gp-wallet-coin-distro {
  margin: 4px 0 8px 12px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 2px solid rgba(212, 175, 55, 0.25);
  border-radius: 0 3px 3px 0;
  font-size: 0.78rem;
  color: var(--cream-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.gp-wallet-coin-distro-line {
  font-family: 'Courier New', monospace;
  color: var(--cream);
  font-size: 0.82rem;
  margin-right: 6px;
}
.gp-wallet-coin-move {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gp-wallet-coin-from, .gp-wallet-coin-to {
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.4);
  color: var(--cream);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 2px;
  padding: 1px 4px;
}
.gp-wallet-coin-qty {
  background: rgba(0, 0, 0, 0.4);
  color: var(--cream);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 2px;
  padding: 1px 4px;
  font-size: 0.82rem;
}
.gp-wallet-coin-move-btn {
  background: rgba(212, 175, 55, 0.18);
  color: var(--cream);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: var(--font-title, serif);
  letter-spacing: 0.4px;
}
.gp-wallet-coin-move-btn:hover {
  background: rgba(212, 175, 55, 0.32);
}

/* Wield toggle states (Phase 2 — Main / Off / Unwielded). Per Rome 2026-04-30. */
.gp-item-wield.on.main {
  background: #b07a17;       /* gold/amber for main hand */
  color: #fff;
  border-color: #d8a23a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  font-weight: 700;
}
.gp-item-wield.on.main:hover { background: #c89020; }
.gp-item-wield.on.off {
  background: #6a4a14;       /* darker, to read as secondary */
  color: #fff;
  border-color: #b07a17;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  font-weight: 700;
}
.gp-item-wield.on.off:hover { background: #835d1a; }


/* ─── PHASE 3B-B APOTHECARY CART STEPPERS (Rome 2026-05-01) ─────── */

.gp-rgroup-apoth .gp-rgroup-label,
.gp-rgroup-herbs .gp-rgroup-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.gp-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 6px;
  background: rgba(212,168,83,0.05);
  border: 1px solid rgba(212,168,83,0.18);
  border-radius: 4px;
}

.gp-stepper-btn {
  padding: 2px 8px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.gp-stepper-btn:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}

.gp-stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gp-stepper-val {
  flex: 1;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: var(--gold-dim);
  font-weight: 600;
}

.gp-rgroup-apoth {
  border-left: 2px solid rgba(231,153,109,0.35);
}

.gp-rgroup-herbs {
  border-left: 2px solid rgba(143,198,160,0.35);
}


/* Max button — subtle gold-on-dark highlight to suggest the shortcut. */
.gp-stepper-btn.gp-stepper-max {
  background: rgba(212,168,83,0.10);
  border-color: rgba(212,168,83,0.45);
  color: var(--gold-dim);
  font-weight: 600;
  letter-spacing: 0.4px;
}

.gp-stepper-btn.gp-stepper-max:hover:not(:disabled) {
  background: rgba(212,168,83,0.22);
  border-color: var(--gold-dim);
  color: var(--cream);
}


/* Manual ± adjusters on Wallet head (Rome 2026-05-01). */
.gp-wallet-adjust {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--bg-mid);
}

.gp-wallet-adj-btn {
  padding: 2px 6px;
  background: var(--bg-card);
  color: var(--cream-dark);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.gp-wallet-adj-btn:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--cream);
}


/* Color-code Spend vs Earn buttons (Rome 2026-05-01). */
.gp-wallet-spend {
  color: #e9a36b;
  border-color: rgba(231,153,109,0.3);
}

.gp-wallet-spend:hover {
  background: rgba(231,153,109,0.12);
  border-color: rgba(231,153,109,0.65);
  color: #e9a36b;
}

.gp-wallet-earn {
  color: #8fc6a0;
  border-color: rgba(143,198,160,0.3);
}

.gp-wallet-earn:hover {
  background: rgba(143,198,160,0.12);
  border-color: rgba(143,198,160,0.65);
  color: #8fc6a0;
}

/* ── Book Builder (Phase 1, Rome 2026-05-03) ─────────────────────────
   Renders at the top of the Treasures picker when filter is "Book".
   Configures size + illumination + leaf count, computes cost live.   */
.gp-book-builder {
  background: rgba(212, 168, 83, 0.05);
  border: 1px solid rgba(212, 168, 83, 0.30);
  border-radius: 5px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.gp-bb-head {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.gp-bb-cite {
  font-family: inherit;
  font-style: italic;
  font-weight: normal;
  font-size: 0.65rem;
  color: var(--cream-dark);
  letter-spacing: 0;
}
.gp-bb-help {
  font-size: 0.74rem;
  color: var(--cream-dim);
  margin-bottom: 8px;
  line-height: 1.4;
}
.gp-bb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
  flex-wrap: wrap;
}
.gp-bb-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  min-width: 92px;
}
.gp-bb-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.gp-bb-btn {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gp-bb-btn:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
.gp-bb-btn.active {
  background: rgba(212, 168, 83, 0.20);
  border-color: var(--gold);
  color: var(--gold);
}
.gp-bb-mult {
  font-size: 0.66rem;
  color: var(--cream-dark);
  margin-left: 4px;
}
.gp-bb-btn.active .gp-bb-mult { color: var(--cream); }
.gp-bb-leafrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gp-bb-leaves {
  width: 80px;
  padding: 3px 6px;
  background: rgba(255,255,255,0.04);
  color: var(--cream);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  text-align: right;
}
.gp-bb-leaves:focus {
  outline: 1px solid var(--gold-dim);
  border-color: var(--gold-dim);
}
.gp-bb-leaves-hint {
  font-size: 0.7rem;
  color: var(--cream-dim);
  font-style: italic;
}
.gp-bb-preview {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--gold);
  border-radius: 0 3px 3px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 12px;
}
.gp-bb-prev-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
}
.gp-bb-prev-label {
  color: var(--cream-dim);
}
.gp-bb-prev-val {
  font-family: 'Courier New', monospace;
  color: var(--cream);
  font-weight: 600;
}
.gp-bb-formula {
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(212, 168, 83, 0.06);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: var(--cream-dim);
  text-align: center;
}
.gp-bb-formula strong {
  color: var(--gold);
}
.gp-bb-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.gp-bb-add {
  font-size: 0.85rem;
  padding: 6px 18px;
}
.gp-bb-craft-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(212, 168, 83, 0.20);
  font-size: 0.7rem;
  color: var(--cream-dim);
  font-style: italic;
  line-height: 1.4;
}


/* Mercer Haggle toggle in the Sell Pile head — Bureaucrat::Mercer +10%
   silver on commerce. Per Rome 2026-05-12. */
.gp-sell-mercer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  margin: 0 8px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 12px;
  color: var(--cream-dim);
  font-size: 0.82em;
  cursor: pointer;
  user-select: none;
}
.gp-sell-mercer:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.7);
}
.gp-sell-mercer input[type="checkbox"] {
  margin: 0;
  accent-color: #d4af37;
}
.gp-sell-mercer strong {
  color: var(--gold-light, #e8c878);
}
.gp-sell-mercer-breakdown {
  color: var(--cream-dim);
  font-size: 0.82em;
  margin-left: 4px;
}

/* Phase Gems-Canon (Rome 2026-05-14): gold-themed gem entry UI. */
.gp-wallet-gem-body { padding: 4px 0; }

.gp-gem-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 6px;
  background: rgba(212, 175, 55, 0.06);
  margin: 4px 0;
  transition: 0.2s;
}
.gp-gem-row:hover {
  border-color: rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.12);
}
.gp-gem-species {
  color: #f4dc88;
  font-weight: 700;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  letter-spacing: 0.3px;
  min-width: 110px;
}
.gp-gem-stat {
  color: var(--cream);
  font-size: 0.82rem;
  padding: 2px 7px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.18);
}
.gp-gem-stat.gp-gem-carats {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #f4dc88;
}
.gp-gem-stat.gp-wallet-mat-gem {
  color: var(--gold);
  border-color: rgba(212, 175, 55, 0.35);
}
.gp-gem-free-tag {
  background: rgba(72, 168, 88, 0.18);
  border: 1px solid rgba(72, 168, 88, 0.45);
  color: #6fd082;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 3px;
}
.gp-gem-row .gp-wallet-sub {
  margin-left: auto;
  color: #f4dc88;
  font-weight: 700;
}
.gp-gem-del {
  background: rgba(196, 64, 64, 0.10);
  border: 1px solid rgba(196, 64, 64, 0.35);
  color: #e07070;
  padding: 2px 8px;
  min-width: 28px;
  font-size: 1rem;
  line-height: 1;
}
.gp-gem-del:hover {
  background: rgba(196, 64, 64, 0.25);
  border-color: rgba(196, 64, 64, 0.55);
  color: #f29090;
}

.gp-gem-form-toggle {
  margin-top: 10px;
  padding: 6px 10px;
  color: var(--gold);
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-top: 1px dashed rgba(212, 175, 55, 0.20);
  cursor: pointer;
  user-select: none;
}
.gp-gem-form-toggle:hover { color: #f4dc88; }

.gp-gem-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 6px;
  background: rgba(212, 175, 55, 0.05);
  margin-top: 6px;
}
.gp-gem-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gp-gem-form-row > span:first-child {
  min-width: 78px;
  color: var(--gold);
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}
.gp-gem-form-row select {
  flex: 1;
  min-width: 180px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--cream);
  border-radius: 4px;
  font-family: inherit;
}
.gp-gem-form-row select:hover,
.gp-gem-form-row select:focus {
  border-color: rgba(212, 175, 55, 0.6);
  outline: none;
}
.gp-gem-carat-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gp-gem-carat-input {
  width: 72px;
  padding: 4px 6px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #f4dc88;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 1.05rem;
  font-weight: 700;
}
.gp-gem-carat-input:hover,
.gp-gem-carat-input:focus {
  border-color: rgba(212, 175, 55, 0.6);
  outline: none;
}
.gp-gem-carat-input::-webkit-outer-spin-button,
.gp-gem-carat-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gp-gem-carat-input { -moz-appearance: textfield; }

.gp-gem-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.gp-gem-form-preview {
  color: var(--cream);
  font-size: 0.92rem;
}
.gp-gem-form-preview strong {
  color: #f4dc88;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 1.05rem;
}
.gp-gem-btn {
  padding: 6px 14px;
  border-radius: 4px;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: 0.2s;
  border: 1px solid;
}
.gp-gem-btn-buy {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.55);
  color: var(--gold);
}
.gp-gem-btn-buy:hover {
  background: rgba(212, 175, 55, 0.28);
  border-color: rgba(212, 175, 55, 0.75);
  color: #f4dc88;
}
.gp-gem-btn-free {
  background: rgba(72, 168, 88, 0.10);
  border-color: rgba(72, 168, 88, 0.45);
  color: #6fd082;
}
.gp-gem-btn-free:hover {
  background: rgba(72, 168, 88, 0.22);
  border-color: rgba(72, 168, 88, 0.65);
  color: #88e090;
}

.gp-gem-legacy-title {
  margin-top: 10px;
  padding: 6px 10px;
  color: var(--cream);
  opacity: 0.6;
  font-size: 0.78rem;
  font-style: italic;
  border-top: 1px dashed rgba(212, 175, 55, 0.18);
}
.gp-gem-legacy-row {
  opacity: 0.75;
}

/* Phase 7-CS — Import Magic Item button on the Owned view */
.gp-owned-import-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 14px 0;
  padding: 8px 12px;
  background: rgba(82,140,82,0.06);
  border: 1px dashed rgba(82,140,82,0.40);
  border-radius: 4px;
}
.gp-btn-import {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(82,140,82,0.15);
  border: 1px solid rgba(82,140,82,0.55);
  border-radius: 4px;
  color: #b8d8b8;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gp-btn-import:hover {
  background: rgba(82,140,82,0.28);
  border-color: rgba(82,140,82,0.8);
  color: #d8efd8;
}
.gp-import-hint {
  flex: 1;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(220,220,220,0.55);
}