/* Campaigns — list page and campaign home.
   Uses the theme tokens from style-base.css (dark on :root, light under
   [data-theme="light"]), so no theme blocks are needed here. The only literal
   colours are the eight banner gradients. */

.campaigns-shell { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }
.cmp-loading, .cmp-empty { padding: 32px; text-align: center; color: var(--text-muted); }
.cmp-error { color: var(--danger); }
.cmp-muted { color: var(--text-muted); font-size: 14px; }
.cmp-house-rules { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }

.cmp-title { font-family: var(--font-display); font-size: 30px; margin: 0; color: var(--accent); }
.cmp-section-title { font-family: var(--font-display); font-size: 20px; margin: 0 0 10px; color: var(--text); }
.cmp-page { display: grid; gap: 18px; }
.cmp-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cmp-spread { justify-content: space-between; }

.cmp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp-tab { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cmp-tab:hover { border-color: var(--accent); }
.cmp-tab.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cmp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.cmp-card-link { color: inherit; text-decoration: none; }
.cmp-card-link:hover { border-color: var(--accent); text-decoration: none; }
.cmp-card-name { margin: 0; font-size: 17px; }
.cmp-hero .cmp-banner { height: 110px; }

.cmp-badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border-strong); color: var(--text); }
.cmp-badge-dm { color: var(--accent); border-color: var(--accent); }

.cmp-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.cmp-col { display: grid; gap: 16px; align-content: start; }
@media (max-width: 800px) { .cmp-two { grid-template-columns: 1fr; } }
/* A grid item defaults to min-width:auto, so one long <option> (a long character name in a
   select) widened the whole page. Let grid children and selects shrink to their column. */
.cmp-two > *, .cmp-col > *, .cmp-page > * { min-width: 0; }
.cmp-page, .cmp-col, .cmp-card, .cmp-form, .cmp-inv-item, .cmp-inv-picker, .cmp-fx-page, .fx-owner, .fx-item, .fx-oneoff,
.it-catalogue, .it-list, .it-form, .cmp-enc-list { grid-template-columns: minmax(0, 1fr); }
.cmp-form select, .cmp-card select, .cmp-input { max-width: 100%; min-width: 0; }

.cmp-member { padding: 8px 0; border-top: 1px solid var(--border); }
.cmp-member:first-of-type { border-top: 0; }
.cmp-member-char { font-size: 14px; margin-left: 14px; color: var(--text-muted); }

.cmp-code { font-family: monospace; font-size: 20px; letter-spacing: 3px; color: var(--accent); }

.cmp-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-swatch { width: 36px; height: 24px; padding: 0; border-radius: 6px; border: 2px solid transparent; cursor: pointer; background: none; overflow: hidden; }
.cmp-swatch .cmp-banner { height: 100%; border-radius: 0; }
.cmp-swatch.sel { border-color: var(--accent); }

.cmp-form { display: grid; gap: 8px; }
.cmp-form input, .cmp-form textarea, .cmp-form select,
.cmp-input { background: var(--input-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 14px; }
.cmp-divider { border: 0; border-top: 1px solid var(--border); width: 100%; margin: 4px 0; }
.cmp-notice { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--warn); background: var(--warn-soft); color: var(--text); }

.cmp-banner { height: 72px; border-radius: 10px; }
.cmp-banner-ember  { background: linear-gradient(135deg, #7a2e12, #d9822b); }
.cmp-banner-ocean  { background: linear-gradient(135deg, #0f3a5c, #2f8fb3); }
.cmp-banner-forest { background: linear-gradient(135deg, #1b4d2e, #6aa05a); }
.cmp-banner-dusk   { background: linear-gradient(135deg, #3b2a5c, #c46a8a); }
.cmp-banner-crimson{ background: linear-gradient(135deg, #5c0f1d, #c23a4a); }
.cmp-banner-gold   { background: linear-gradient(135deg, #6b5210, #e0b93c); }
.cmp-banner-slate  { background: linear-gradient(135deg, #2b3440, #6f7f92); }
.cmp-banner-violet { background: linear-gradient(135deg, #2c1a5c, #8a5fd6); }

/* Party tab */
.cmp-badge-active { color: var(--success); border-color: var(--success); }
.cmp-badge-disabled { color: var(--warn); border-color: var(--warn); }
.cmp-badge-dead { color: var(--danger); border: 1px solid var(--danger); }
.cmp-badge-retired { color: var(--text-muted); }
.cmp-badge-placeholder { border-style: dashed; }
.cmp-card-off { opacity: .6; }
.cmp-stats { display: flex; gap: 14px; font-size: 14px; }
.cmp-stat b { font-size: 18px; }
.cmp-bar { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; }
.cmp-bar-fill { display: block; height: 100%; background: var(--success); }
.cmp-bar-fill.cmp-bar-low { background: var(--danger); }
.cmp-form-narrow { max-width: 520px; }
.cmp-form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-field { display: grid; gap: 4px; font-size: 13px; color: var(--text-muted); }
.cmp-card .cmp-row a.btn { text-decoration: none; }
.cmp-card .cmp-row select { width: auto; flex: 1 1 110px; }
.cmp-card .cmp-row .btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
@media (max-width: 480px) { .cmp-form-two { grid-template-columns: 1fr; } }
/* The light theme's --danger is 4.4:1 on the card surface; darken the text a touch (token unchanged). */
[data-theme="light"] .cmp-card .cmp-row .btn-danger, [data-theme="light"] .fx-remove { color: color-mix(in srgb, var(--danger) 85%, var(--text)); }

/* DM view bar — shown above the read-only play sheet and Review */
.dm-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 24px; background: var(--accent-soft); border-bottom: 1px solid var(--accent); color: var(--text); font-size: 14px; }
.dm-view-bar b { color: var(--accent); }
.dm-view-bar-links { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dm-view-tab { padding: 4px 12px; border-radius: 99px; border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.dm-view-tab:hover { border-color: var(--accent); text-decoration: none; }
.dm-view-tab.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
@media (max-width: 600px) { .dm-view-bar { padding: 10px 16px; } }
/* Touch widths: the view-bar pills were 28px tall. */
@media (max-width: 900px) { .dm-view-tab { display: inline-flex; align-items: center; min-height: 36px; box-sizing: border-box; } }

/* DM view of the live-play sheet (play.js applyViewOnly): nothing mutates. Navigation and
   reveal controls are allow-listed and stay live; play.js also sets `disabled` after each render. */
#play-sheet.dm-view-only :is(button, input, select, textarea):disabled { pointer-events: none; opacity: .55; }
#play-sheet.dm-view-only .dm-inert { pointer-events: none; }
#play-sheet.dm-view-only :is(.locked-tab, .mobile-sheet-nav-btn, .mobile-sheet-menu-btn, .mobile-sheet-rail-btn:not(.rest, .inspiration), .mobile-sheet-drawer-backdrop, .mobile-sheet-drawer button[onclick^="mobileSetSection"]) { pointer-events: auto; opacity: 1; }

/* DM view of the wizard Review (window.VIEW_ONLY, templates/wizard.html): only step 8 is
   shown, read-only. Step navigation, every save/level-up/PDF/list control and the
   Organization card are removed; notes stay visible (made readOnly by the wizard init). */
.wizard-shell.wiz-view-only .wizard-steps-nav,
.wizard-shell.wiz-view-only .wiz-mobile-nav,
.wizard-shell.wiz-view-only .wiz-mobile-backdrop,
.wizard-shell.wiz-view-only .wizard-footer,
.wiz-mobile-float-actions.wiz-view-only,
.wiz-view-only .review-sticky-save,
.wiz-view-only .rv-org-card,
.wiz-view-only .review-unsaved-note,
.wiz-view-only .save-status,
.wiz-view-only .review-step > .step-lede,
.wiz-view-only .wiz-mobile-action-card,
.wiz-view-only [onclick="saveCharacter()"],
.wiz-view-only #live-play-btn,
.wiz-view-only #pdf-theme-btn,
.wiz-view-only #character-list-btn,
.wiz-view-only #levelup-btn { display: none !important; }
.wiz-view-only textarea[name="notes"][readonly],
.wiz-view-only #wizMobRevNotes[readonly] { cursor: default; border-color: var(--border); }

/* Effects on a character (wizard Homebrew tab, apply dialog) */
.fx-owner { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: grid; gap: 10px; margin-bottom: 14px; }
.fx-owner[hidden] { display: none; }
.fx-title { font-family: var(--font-display); font-size: 19px; margin: 0; color: var(--text); }
.fx-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 4px; background: var(--bg); }
.fx-name { font-weight: 700; overflow-wrap: anywhere; }
.fx-desc { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.fx-note { font-size: 13px; color: var(--text-muted); margin: 0; }
.fx-badge-desc { border-style: dashed; }
.fx-status { margin: 0; font-size: 14px; }
.fx-error { color: var(--danger); }
.fx-remove { color: var(--danger); border-color: var(--danger); }
.fx-pick { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.fx-pick-info { display: grid; gap: 2px; min-width: 0; text-align: left; }

/* DM Effects panel (/campaigns/<id>/characters/<id>/effects) and the shared apply-dialog lines */
.cmp-fx-page { display: grid; gap: 12px; align-content: start; }
.cmp-fx-title { font-family: var(--font-display); font-size: 26px; margin: 0; color: var(--accent); overflow-wrap: anywhere; min-width: 0; }
.fx-line { overflow-wrap: anywhere; }
.fx-oneoff { display: grid; gap: 10px; text-align: left; }
.fx-oneoff[hidden], .vault-dialog-select-list[hidden] { display: none; }
.fx-field { display: grid; gap: 4px; font-size: 13px; color: var(--text-muted); }
.fx-field .cmp-input { width: 100%; box-sizing: border-box; }
.fx-editrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--border); }
.fx-editlabel { flex: 1 1 140px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.fx-editrow .cmp-input { flex: 1 1 120px; min-width: 0; }
@media (max-width: 600px) { .cmp-fx-title { font-size: 21px; } }

/* DM Items tab (give an item). */
.it-catalogue { display: grid; gap: 10px; }
.it-catalogue[hidden], .it-form[hidden] { display: none; }
.it-list { display: grid; gap: 8px; }
.it-search { flex: 1 1 220px; min-width: 0; }
.it-status { margin: 0; font-size: 14px; min-height: 1.3em; overflow-wrap: anywhere; }
.it-ok { color: var(--success); font-weight: 600; }
.it-namewrap { min-width: 0; }
.it-qty { width: 64px; text-align: center; box-sizing: border-box; }
.it-weight { width: 90px; box-sizing: border-box; }
.it-form { max-width: 520px; display: grid; gap: 10px; }
.it-form .cmp-input { width: 100%; box-sizing: border-box; }
.it-form .it-qty, .it-form .it-weight { width: 90px; }

/* Inventory tab (items list, coin purse, add-item picker). */
.cmp-badge-wait { color: var(--accent); border-style: dashed; border-color: var(--accent); }
.cmp-page > .it-status:empty { display: none; }
.cmp-inv-title { margin: 0; }
.cmp-inv-item { border-top: 1px solid var(--border); padding: 10px 0; display: grid; gap: 4px; }
.cmp-inv-item:first-of-type { border-top: 0; }
.cmp-inv-namewrap { min-width: 0; }
.cmp-inv-controls { justify-content: flex-end; }
.cmp-inv-form { padding: 6px 0; }
.cmp-inv-picker { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 10px; background: var(--bg); }
.cmp-inv-picker .it-list { max-height: 360px; overflow-y: auto; }
.cmp-inv-picker [hidden] { display: none; }
.cmp-coins { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; text-align: center; }
.cmp-coin { display: grid; gap: 2px; }
.cmp-coin b { font-size: 20px; }
.cmp-coin span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
.cmp-coin .cmp-input { width: 100%; box-sizing: border-box; text-align: center; padding: 6px 4px; }
/* The wizard shell sets input[type="number"] to width 100%; two classes outrank it. */
.cmp-card .it-qty { width: 64px; }
.cmp-card .it-weight, .cmp-card .cmp-coin-amount { width: 90px; }
.cmp-card .cmp-coin .cmp-input { width: 100%; }
@media (max-width: 480px) { .cmp-inv-controls { justify-content: flex-start; } }
/* Phone widths: keep every inventory tap target at roughly 36px or more. */
@media (max-width: 600px) {
  .cmp-card .cmp-input, .cmp-input, .cmp-form input:not([type="checkbox"]), .cmp-form select, .cmp-form textarea { min-height: 40px; box-sizing: border-box; }
  .cmp-card label.cmp-row:has(> input[type="checkbox"]) { min-height: 36px; }
  .cmp-page > a.cmp-muted { display: inline-block; padding: 8px 0; }
}

/* Applied effects on the live-play sheet: origin pill beside the name.
   Theme tokens only, so dark (gold accent) and light (oxblood accent) both hold. */
.applied-effect-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.effect-badge {
  display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.4;
  padding: 1px 8px; border-radius: 99px; white-space: nowrap;
  color: var(--text-muted); border: 1px solid var(--border-strong);
}
.effect-badge.dm { color: var(--accent); border-color: var(--accent); }
.effect-badge.desc { border-style: dashed; }
.applied-effect-desc { margin-top: 4px; color: var(--text); font-size: 12px; }
.applied-effect-lines { margin-top: 4px; color: var(--text-muted); font-size: 12px; }
.applied-effect .effect-line::before { content: "\2022\00a0"; }

/* Campaign Encounters tab */
.cmp-enc-list { display: grid; gap: 10px; }
.cmp-enc-item .cmp-row { flex-wrap: wrap; }
.cmp-enc-item .btn { min-height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; text-decoration: none; }
.cmp-enc-name { overflow-wrap: anywhere; min-width: 0; }

/* ── Players' encounter view (read-only) and the players' Encounters tab ── */
.cev-live { color: var(--success); border-color: var(--success); }
.cev-title { overflow-wrap: anywhere; min-width: 0; }
.cev-refresh, .cev-back { min-height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; }
.cev-back { color: var(--accent); }
.cev-empty { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 34px 18px; }
.cev-empty .cmp-muted { margin-top: 6px; }
.cev-turnbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border: 2px solid var(--accent); border-radius: 12px; background: var(--accent-soft); font-size: 17px; }
.cev-turnbar b { color: var(--accent); font-size: 20px; overflow-wrap: anywhere; }
.cev-list { display: grid; gap: 14px; padding-top: 6px; }
.cev-cmb { position: relative; background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; min-width: 0; }
.cev-cmb.current { border: 2px solid var(--accent); border-left: 10px solid var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft), 0 6px 22px rgba(0, 0, 0, .25); }
.cev-cmb.down { opacity: .6; }
.cev-nowtag { position: absolute; top: -11px; left: 18px; background: var(--accent); color: var(--bg); font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 2px 10px; border-radius: 99px; }
.cev-top { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cev-init { font-size: 22px; font-weight: 800; text-align: center; color: var(--accent); }
.cev-who { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.cev-name { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.cev-cmb.current .cev-who .cev-name { font-size: 19px; }
.cev-side { display: flex; justify-content: flex-end; }
.cev-ally { color: var(--success); border-color: var(--success); }
.cev-enemy { color: var(--danger); border-color: var(--danger); }
.cev-revealed { font-size: 11px; font-weight: 700; color: var(--accent); }
.cev-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cev-cond { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.cev-h-healthy { color: var(--success); border-color: var(--success); }
.cev-h-bloodied { color: var(--warn); border-color: var(--warn); }
.cev-h-near { color: var(--danger); border-color: var(--danger); }
.cev-h-down { color: var(--text-muted); border-style: dashed; }
@media (max-width: 600px) {
  .cev-top { grid-template-columns: 44px minmax(0, 1fr); }
  .cev-side { grid-column: 2; justify-content: flex-start; }
  .cev-turnbar { font-size: 16px; }
}

/* Touch widths: a bare text link in an empty state was 20px tall. */
@media (max-width: 900px) { .cmp-empty a { display: inline-block; padding: 8px 4px; box-sizing: border-box; min-height: 36px; } }

/* Light theme: small status badges on the card surface. --danger measures 4.4:1 and --warn 4.0:1 there, so the
   text is darkened slightly (tokens unchanged; dark is untouched). */
[data-theme="light"] .cev-enemy, [data-theme="light"] .cev-h-near, [data-theme="light"] .cmp-badge-dead { color: color-mix(in srgb, var(--danger) 85%, var(--text)); }
[data-theme="light"] .cev-h-bloodied, [data-theme="light"] .cmp-badge-disabled { color: color-mix(in srgb, var(--warn) 70%, var(--text)); }

/* Tablet widths (601-900px) are touch screens too, but the shared sheets only enlarge controls up to 600px, so
   buttons, tabs and fields stayed 28-35px tall. Phones keep their own 40px rules above. */
@media (min-width: 601px) and (max-width: 900px) {
  .campaigns-shell .btn, .campaigns-shell .cmp-tab, .campaigns-shell .cmp-input, .campaigns-shell select,
  .campaigns-shell .cmp-form input:not([type="checkbox"]), .campaigns-shell .cmp-form textarea,
  .dm-view-bar .btn, .fx-owner .btn, .homebrew-step .btn-sm, .homebrew-step .section-head, .vault-dialog-card .btn, .vault-dialog-card .vault-dialog-input, .vault-dialog-card .cmp-tab,
  .vault-dialog-card .cmp-input { min-height: 36px; box-sizing: border-box; }
  .campaigns-shell .cmp-page > a.cmp-muted, .dm-view-bar .btn { display: inline-flex; align-items: center; }
  .campaigns-shell .cmp-page > a.cmp-muted { padding: 8px 0; min-height: 36px; box-sizing: border-box; }
  .cmp-card label.cmp-row:has(> input[type="checkbox"]) { min-height: 36px; }
}
/* Banner swatches: 24px tall was the smallest tap target in the app. */
@media (max-width: 900px) { .cmp-swatch { width: 44px; height: 36px; } }

/* Phone: the join row is a code box over a character picker and the Join button (UX pass, item 13). */
@media (max-width: 720px) {
  .cmp-join { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .cmp-join > input { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
  .cmp-join > span { min-width: 0; }
  .cmp-join select { width: 100%; min-width: 0; }
  .cmp-join > .btn { min-height: 40px; min-width: 64px; }
}

/* Phone (UX pass round 3). */
@media (max-width: 720px) {
  /* Tabs scroll sideways instead of leaving "Encounters" alone on a second line. */
  .cmp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .cmp-tabs::-webkit-scrollbar { display: none; }
  .cmp-tabs > .cmp-tab { flex: none; }
  .campaigns-shell .cmp-tab { min-height: 40px; }
  /* The DM-view banner: touch-size tabs, tighter padding. */
  .dm-view-bar { padding: 8px 12px; gap: 8px; }
  .dm-view-tab { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; }
  /* A destructive action must not look like the primary one. */
  .campaigns-shell .btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); min-height: 40px; }
}

@media (max-width: 720px) { .cmp-page > a.cmp-muted { display: inline-flex; align-items: center; min-height: 40px; } }

@media (max-width: 720px) {
  .dm-view-bar-links { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .dm-view-bar-links::-webkit-scrollbar { display: none; }
  .dm-view-bar-links > * { flex: none; }
  .it-give { min-height: 40px; }
}

/* Give-item row at every width: quantity and Give share a line instead of Give dropping under a wide box. */
.it-row .cmp-row { flex-wrap: nowrap; }
.campaigns-shell .it-row .cmp-row .it-qty { width: 64px; min-width: 0; flex: none; text-align: center; }

/* ── Campaign Inventory tab: items wide, coins/requests/rules in a sticky side column ───────────── */
.cmp-inv-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.cmp-inv-side { display: grid; gap: 16px; align-content: start; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.cmp-inv-side > * { min-width: 0; }
@media (max-width: 900px) {
  .cmp-inv-layout { grid-template-columns: minmax(0, 1fr); }
  /* One column: the small coin purse first, then the items, then the DM's requests and rules. */
  .cmp-inv-side { display: contents; }
  .cmp-inv-layout > .cmp-inv-card { order: 2; }
  .cmp-inv-side > :nth-child(1) { order: 1; }
  .cmp-inv-side > :nth-child(2) { order: 3; }
  .cmp-inv-side > :nth-child(3) { order: 4; }
}
.cmp-inv-card { display: grid; gap: 12px; }
.cmp-inv-toolbar { display: grid; gap: 8px; }
.cmp-inv-search { width: 100%; box-sizing: border-box; }
.cmp-inv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-inv-grouphead { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cmp-inv-group { display: grid; gap: 0; margin-bottom: 14px; }
.cmp-inv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; border-top: 1px solid var(--border); padding: 4px 0; }
.cmp-inv-grouphead + .cmp-inv-row { border-top: 0; }
.cmp-inv-rowhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; padding: 8px 4px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 6px; min-height: 40px; }
.cmp-inv-rowhead:hover { background: var(--hover, rgba(255,255,255,.05)); }
.cmp-inv-rowhead:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cmp-inv-qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-inv-weight { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.cmp-inv-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.cmp-inv-actions .cmp-input { width: auto; }
.cmp-inv-actions .it-qty { width: 64px; text-align: center; }
.cmp-inv-detail { grid-column: 1 / -1; padding: 2px 4px 8px; display: grid; gap: 6px; }
.cmp-inv-detail[hidden] { display: none; }
@media (max-width: 600px) { .cmp-inv-row { grid-template-columns: minmax(0, 1fr); } .cmp-inv-actions { justify-content: flex-start; padding: 0 4px 6px; } }

/* Add-item browse panel: results left, the "to add" tray right */
.cmp-inv-browse { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 14px; align-items: start; }
.cmp-inv-browse[hidden] { display: none; }
.cmp-inv-browse-main { display: grid; gap: 8px; min-width: 0; }
.cmp-inv-browse .it-list { max-height: 460px; }
.cmp-inv-tray { display: grid; gap: 8px; border: 1px dashed var(--border-strong); border-radius: 10px; padding: 10px; position: sticky; top: 0; }
.cmp-inv-trayrow .fx-name { overflow-wrap: anywhere; }
.cmp-inv-plus { min-width: 40px; min-height: 36px; font-size: 18px; line-height: 1; }
@media (max-width: 700px) { .cmp-inv-browse { grid-template-columns: minmax(0, 1fr); } .cmp-inv-tray { position: static; } }

/* Coin purse */
.cmp-coin-move { justify-self: start; }
.cmp-coin-edit { min-width: 36px; min-height: 36px; }
.cmp-coin-fields .cmp-input { width: 100%; box-sizing: border-box; text-align: center; padding: 8px 4px; }
.cmp-seg { display: inline-flex; gap: 6px; }

/* A modal on <dialog>: focus trap and Esc come from the browser. */
.cmp-dialog { margin: auto; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--text); padding: 18px; width: min(460px, calc(100vw - 32px)); }
.cmp-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.cmp-dialog-form, .cmp-dialog-body { display: grid; gap: 12px; }
.cmp-dialog-actions { justify-content: flex-end; }
.cmp-dialog-error:empty { display: none; }

.campaigns-shell.cmp-wide { max-width: 1560px; }
/* The site narrows <main> to 76% from 1400px up; the inventory workspace takes more of the screen. */
@media (min-width: 1400px) { main:has(> .campaigns-shell.cmp-wide) { width: 94%; } }
.cev-mine { min-height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; }
@media (max-width: 720px) { .cev-mine, .cev-refresh { min-height: 40px; } }