/* Campaign shell (/c/:cid) + campaigns-first home.
   SIDE NAV: the campaign sub-nav is a left rail (campaign name on top, tabs below) — the tabs
   stop eating vertical space and the body column gets the full height. */
.cshell { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0;
  transition: grid-template-columns .18s ease; }
.cshell-nav { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1);
  padding: var(--sp-8) var(--sp-6); border-right: 0.0625rem solid var(--border); overflow-y: auto; min-height: 0; }
/* Collapse the side-nav into a slim rail to reclaim ~154px of width; the toggle handle stays put. */
.cshell.nav-collapsed { grid-template-columns: 1.875rem minmax(0, 1fr); }
.cshell.nav-collapsed .cshell-nav { padding: var(--sp-7) var(--sp-2); align-items: center; overflow: hidden; }
.cshell.nav-collapsed .cshell-name, .cshell.nav-collapsed .cshell-nav > a { display: none; }
.cshell-toggle { align-self: flex-end; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin: 0 var(--sp-1) var(--sp-7) auto; padding: 0; border-radius: var(--r-md); font-size: var(--fs-md); }  /* icon-btn (2.2) */
.cshell.nav-collapsed .cshell-toggle { align-self: center; margin: 0; }
.cshell-name { font-family: "Cormorant Garamond", serif; font-size: var(--fs-sub); font-weight: 700;
  color: var(--accent); margin: 0 var(--sp-3) var(--sp-7); text-decoration: none; line-height: 1.15; }
.cshell-nav > a:not(.cshell-name) { padding: 0.4375rem var(--sp-6); font-size: var(--fs-base); color: var(--muted);
  text-decoration: none; border-left: 0.125rem solid transparent; border-radius: 0 var(--r-md) var(--r-md) 0;
  white-space: nowrap; }
.cshell-nav > a:not(.cshell-name):hover { color: var(--text); }
.cshell-nav > a.on { color: var(--text); border-left-color: var(--accent);
  background: var(--hover-bg); }
/* The body is a min-height:0 flex column so full-bleed stages (Play .mp, combat, encounters)
   AND the viewport-locked Story wizard can fill it; normal tabs still page-scroll (no overflow
   clamp here — heights only bind when a body:has() rule caps main.app-main). */
.cshell-body { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
body:has(.mp) .cshell-body, body:has(.combat-stage) .cshell-body, body:has(.es-screen) .cshell-body {
  flex: 1 1 auto;
}
.cshell-loading { padding: var(--sp-10); }

/* The campaign shell's side-nav is an APP SIDEBAR, so it hugs the left edge — drop the page's 37px
   gutter for shell pages so no space is wasted left of the nav and the body reclaims the full width.
   (The nav and the body supply their own inner padding, so nothing touches the raw edges.) */
body:has(.cshell) .app-main { padding-left: 0; padding-right: 0; }

/* ── CONTENT FILLS THE WIDTH ────────────────────────────────────────────────────────────────────
   Operator's law: maximize horizontal space first, then vertical; scroll only when the row is full.
   The roster/overview/settings/adventures containers center a narrow column by default (max-width +
   margin:0 auto). Inside the flex-COLUMN body that ``margin:auto`` makes them SHRINK-TO-FIT — which
   collapses their responsive grids to a single column and leaves huge dead margins. Here we stretch
   them edge-to-edge with one consistent gutter, so the grids populate across the whole row. */
.cshell-body > .char-roster, .cshell-body > .map-roster,
.cshell-body > .cov, .cshell-body > .adv, .cshell-body > .cset {
  max-width: none; width: auto; margin: 0; align-self: stretch;
  padding: var(--sp-10) 1.875rem 2.5rem;
}
/* Denser grids that earn the reclaimed width. */
.cshell-body .roster-grid { grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr)); }
.cshell-body .map-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
/* Story tab: the wizard brings its own viewport lock (campaign.css body:has(.camp-wizard)) —
   just trim the top padding, the shell rail already names the campaign. */
.camp-wizard.camp-embedded { padding-top: var(--sp-5); }

/* Narrow screens: the rail reverts to the horizontal top bar. */
@media (max-width: 760px) {
  .cshell { display: flex; flex-direction: column; }
  .cshell-nav { flex-direction: row; align-items: center; padding: var(--sp-4) var(--sp-8) 0;
    border-right: none; border-bottom: 0.0625rem solid var(--border); overflow-x: auto; overflow-y: visible; }
  .cshell-name { margin: 0 var(--sp-8) 0 0; white-space: nowrap; }
  .cshell-nav > a:not(.cshell-name) { border-left: none; border-radius: 0;
    border-bottom: 0.125rem solid transparent; }
  .cshell-nav > a.on { background: none; border-bottom-color: var(--accent); }
  /* On mobile the nav is a top bar — the collapse doesn't apply; always show the tabs, hide the toggle. */
  .cshell-toggle { display: none; }
  .cshell.nav-collapsed { grid-template-columns: none; }
  .cshell.nav-collapsed .cshell-name, .cshell.nav-collapsed .cshell-nav > a { display: block; }
}

/* Overview — a dashboard: a stat band across the top, then activity | party+actions. */
.cov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-9); margin-bottom: var(--sp-10); }
.cov-title { margin: 0; font-size: var(--fs-page); }
.cov-logline { margin: 0.3125rem 0 0; color: var(--muted); max-width: 74ch; }
.cov-system { flex: 0 0 auto; }
.cov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); gap: var(--sp-7); }
.cov-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 1.125rem var(--sp-9); border: 0.0625rem solid var(--border); border-radius: var(--r-2xl); text-decoration: none;
  background: var(--panel); transition: border-color .14s, background .14s; }
.cov-tile:hover { border-color: var(--accent); background: var(--panel-2); }
.cov-tile-n { font-size: var(--fs-page); font-weight: 700; color: var(--text); line-height: 1; }
.cov-tile-l { font-size: var(--fs-sm); color: var(--muted); }
.cov-dash { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr); gap: var(--sp-10);
  margin-top: 1.375rem; align-items: start; }
.cov-panel { border: 0.0625rem solid var(--border); border-radius: var(--r-2xl); padding: 0.9375rem 1.125rem; background: var(--panel); }
.cov-h { margin: 0 0 var(--sp-7); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600; }
.cov-h-mt { margin-top: var(--sp-10); }
.cov-activity { display: flex; flex-direction: column; }
.cov-act { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-7);
  padding: var(--sp-5) 0; border-bottom: 0.0625rem solid var(--border-soft, rgba(255,255,255,.06)); font-size: var(--fs-base); }
.cov-act:last-child { border-bottom: none; }
.cov-act-k { text-transform: uppercase; font-size: var(--fs-2xs); letter-spacing: .05em; color: var(--muted); }
.cov-act-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-act-d { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.cov-quiet { color: var(--muted); font-size: var(--fs-base); margin: 0; }
.cov-members { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.cov-member { display: inline-flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-6);
  border: 0.0625rem solid var(--border); border-radius: var(--r-2xl); font-size: var(--fs-sm); }
.cov-role { color: var(--muted); font-size: var(--fs-xs); }
.cov-role.is-dm { color: var(--accent); }
.cov-actions { display: flex; flex-direction: column; gap: var(--sp-4); }
.cov-actions .btn { justify-content: center; }

/* Settings — sharing on top, then Members | Invites+Danger. */
.cset-top { display: flex; align-items: center; gap: var(--sp-8); margin-bottom: 1.125rem; }
.cset-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(17.5rem, 1fr); gap: var(--sp-10); align-items: start; }
.cset-panel { border: 0.0625rem solid var(--border); border-radius: var(--r-2xl); padding: var(--sp-8) 1.125rem; background: var(--panel); }
.cset-panel .admin-sub:first-child { margin-top: 0; }
.cset-danger-h { margin-top: var(--sp-10); }
.cset-add { display: flex; gap: var(--sp-5); margin-top: var(--sp-6); }
.cset-add input { flex: 1 1 auto; min-width: 0; }
.cset-invites { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.cset-invite { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--fs-sm); flex-wrap: wrap; }
.cset-invite code { padding: var(--sp-2) var(--sp-5); border: 0.0625rem solid var(--border); border-radius: var(--r-md); }
/* Engine rules — full-width knob grid under the 2-col settings grid. A knob with a campaign
 * override is accent-tinted and grows a ↺ reset-to-system action. */
.cset-rules { margin-top: var(--sp-10); }
.cset-knob { display: flex; align-items: center; gap: var(--sp-4); }
.cset-knob > label { flex: 1 1 auto; min-width: 0; }
.cset-knob.is-over .ui-switch-lbl, .cset-knob.is-over > .admin-knob-lbl { color: var(--accent); }
.cset-knob-reset { font: inherit; font-size: var(--fs-base); line-height: 1; color: var(--muted); cursor: pointer;
  background: none; border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: var(--sp-1) var(--sp-4); }
.cset-knob-reset:hover { color: var(--accent); border-color: var(--accent); }

/* Adventures */
.adv { padding: var(--sp-9) var(--sp-8); }   /* width law: fill the shell (centered cap removed, audit 2026-07-17) */
.adv-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.adv-rowwrap { display: flex; align-items: stretch; gap: var(--sp-4); }
.adv-rowwrap .adv-row { flex: 1 1 auto; }
.adv-reorder { display: flex; flex-direction: column; gap: var(--sp-1); justify-content: center; }
.adv-reorder .btn-mini { padding: 0.0625rem 0.4375rem; line-height: 1.1; }
.adv-row { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-8); border-radius: var(--r-xl);
  text-decoration: none; }
.adv-row:hover { outline: 0.0625rem solid var(--accent); }
.adv-name { font-weight: 600; }
.adv-desc { flex: 1 1 100%; font-size: var(--fs-sm); color: var(--muted); }
.adv-title { flex: 1; font: inherit; font-size: var(--fs-sub); font-weight: 600; color: inherit;
  background: transparent; border: 0.0625rem solid transparent; border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); }
.adv-title:hover, .adv-title:focus { border-color: var(--border); }
.adv-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: -0.125rem 0 var(--sp-4); }

/* ＋New-campaign gate modal: the kit Modal's `wide` variant + the three build-style cards
   stacked as compact rows (the wizard's big card grid doesn't fit a dialog). */
.modal-wide { max-width: 35rem; }
.chome-gate .camp-style-row { grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-8); }
.chome-gate .camp-style-card { display: grid; grid-template-columns: auto 1fr;
  column-gap: var(--sp-7); row-gap: 0.0625rem; align-items: center; padding: var(--sp-6) var(--sp-8); }
.chome-gate .camp-style-card .camp-style-ico { grid-row: 1 / span 2; font-size: var(--fs-modal); }
.chome-gate .camp-gen-panel { margin-top: var(--sp-7); }

/* Campaigns-first home */
.chome { max-width: var(--content-max); margin: 0; padding: 1.375rem var(--sp-3); }
.chome-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-7);
  margin-bottom: var(--sp-9); }
.chome-title { margin: var(--sp-1) 0 0; font-size: var(--fs-card); }
.chome-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); gap: var(--sp-7); }
.chome-card { display: block; padding: var(--sp-8) var(--sp-9); text-decoration: none; border-radius: var(--r-xl); }
.chome-card:hover { outline: 0.0625rem solid var(--accent); }
.chome-name { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.chome-logline { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); color: var(--muted); }
.chome-meta { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--fs-sm); }
.chome-empty { max-width: 26.25rem; margin: 2.5rem auto; }
/* Health-descriptions knob (Engine rules) */
.cset-hb { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }
.cset-hb-row { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.cset-hb-words input { width: 6.75rem; padding: 0.3125rem 0.4375rem; background: rgba(0,0,0,.25);
  border: 0.0625rem solid var(--line); border-radius: var(--r-md); color: var(--text); font: 500 var(--fs-sm) var(--font-sans); }
.cset-hb-words input::placeholder { color: var(--muted); }

/* character-creation gate control (Settings > Members) */
.cset-charcreate { display: flex; align-items: center; gap: var(--sp-5); margin: 0 0 var(--sp-6); }

/* loot-feel play setting (Settings → Loot) */
.cset-loot { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.cset-loot-l { font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cset-feelseg button { text-transform: capitalize; }

/* ── campaign Palettes screen: retired — the screen uses the shared _palette_workbench.js (mb-pal-* classes). */