/* ===========================================================================
   Wam's D&D Hub - Signal Deck
   ---------------------------------------------------------------------------
   The hub keeps its teal ground and cyan header, but colour now carries
   meaning instead of decoration. Every colour is a token, and each accent has
   exactly one job:

     cyan    primary accent   links, active nav, primary button, focus ring
     purple  structure        system tags, crests, role pills
     orange  attention        open bounties, a session coming up
     green   highlight        completed, available, resolved
     red     destructive      nothing on this site yet, kept for parity

   Tokens are declared once on :root so nothing downstream reaches for a hex.
   =========================================================================== */

:root {
  /* Ground and panels: the hub's teal, deepened enough to carry white text. */
  --vx-bg: #05564c;
  --vx-panel: #077063;
  --vx-panel-2: #0a8878;
  --vx-text: #ffffff;
  --vx-muted: rgba(255, 255, 255, 0.74);
  --vx-line: rgba(255, 255, 255, 0.18);

  --vx-cyan: #4cc2f5;
  --vx-purple: #c08bf0;
  --vx-orange: #ffa43d;
  --vx-green: #6ee7a8;
  --vx-red: #ff8095;

  /* Companions for translucent fills. */
  --vx-bg-rgb: 5, 86, 76;
  --vx-panel-rgb: 7, 112, 99;
  --vx-text-rgb: 255, 255, 255;
  --vx-line-rgb: 255, 255, 255;
  --vx-muted-rgb: 255, 255, 255;
  --vx-cyan-rgb: 76, 194, 245;
  --vx-purple-rgb: 192, 139, 240;
  --vx-orange-rgb: 255, 164, 61;
  --vx-green-rgb: 110, 231, 168;
  --vx-red-rgb: 255, 128, 149;

  /* Two step spacing rhythm: --sd-gap between blocks, 12px inside a section. */
  --sd-gap: 24px;
  --sd-radius: 14px;
  --sd-shell: 1180px;

  --font-ui: "Poppins", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roboto Slab", Rockwell, "Sitka Small", Georgia, serif;
}

/* --------------------------------------------------------------- resets --- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--vx-bg);
  color: var(--vx-text);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--vx-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--vx-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

[hidden] { display: none !important; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--vx-cyan);
  color: #04312b;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
}
.skip-link:focus { left: 16px; }

/* ---------------------------------------------------------------- shell --- */

.hub-shell {
  width: 100%;
  max-width: var(--sd-shell);
  margin: 0 auto;
  padding: var(--sd-gap) 16px 64px;
  display: grid;
  gap: var(--sd-gap);
}

/* Grid children own their spacing through gap, never through margin. */
.hub-shell > * { margin-block: 0; }

/* --------------------------------------------------------------- topbar --- */

.hub-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--vx-panel);
  border-bottom: 1px solid var(--vx-line);
  box-shadow: 0 1px 0 rgba(var(--vx-cyan-rgb), 0.28);
}

.hub-topbar-in {
  max-width: var(--sd-shell);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hub-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--vx-text);
  flex: 0 0 auto;
}
.hub-brand:hover { text-decoration: none; }
.hub-brand img { width: 38px; height: auto; }
.hub-brand-text { display: none; }

.hub-nav { margin-left: auto; }

.hub-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.hub-nav-list a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--vx-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hub-nav-list a:hover {
  background: rgba(var(--vx-text-rgb), 0.1);
  text-decoration: none;
}
.hub-nav-list .is-current > a {
  color: var(--vx-cyan);
  background: rgba(var(--vx-cyan-rgb), 0.14);
  box-shadow: inset 0 -2px 0 var(--vx-cyan);
}

/* Submenus stay keyboard reachable: shown on hover and on focus-within. */
.hub-nav-item { position: relative; }
.hub-nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  list-style: none;
  margin: 0;
  padding: 6px;
  display: none;
  background: var(--vx-panel-2);
  border: 1px solid var(--vx-line);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}
.hub-nav-item:hover > .hub-nav-sub,
.hub-nav-item:focus-within > .hub-nav-sub { display: block; }

.hub-navtoggle {
  display: none;
  padding: 8px 12px;
  border: 1px solid var(--vx-line);
  border-radius: 8px;
  background: transparent;
  color: var(--vx-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

/* ------------------------------------------------------------- masthead --- */

.hub-masthead {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vx-line);
  border-radius: var(--sd-radius);
  background: var(--vx-panel);
  isolation: isolate;
}

.hub-masthead::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--vx-cyan), var(--vx-purple));
  z-index: 2;
}

.hub-masthead-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  z-index: 0;
}

.hub-masthead-in {
  position: relative;
  z-index: 1;
  padding: 26px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.hub-masthead-id { flex: 1 1 320px; display: grid; gap: 8px; }

.hub-masthead h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }

.hub-masthead-blurb {
  color: var(--vx-muted);
  font-size: 0.9rem;
  max-width: 70ch;
}

.hub-crest {
  position: relative;
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(var(--vx-purple-rgb), 0.5);
  background: rgba(var(--vx-purple-rgb), 0.14);
  overflow: hidden;
}
.hub-crest-initial {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--vx-purple);
}
.hub-crest-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.hub-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--vx-line);
  background: rgba(var(--vx-text-rgb), 0.07);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vx-muted);
}
.hub-chip.is-system {
  border-color: rgba(var(--vx-purple-rgb), 0.5);
  background: rgba(var(--vx-purple-rgb), 0.14);
  color: var(--vx-purple);
}
.hub-chip.is-gm {
  border-color: rgba(var(--vx-cyan-rgb), 0.45);
  background: rgba(var(--vx-cyan-rgb), 0.12);
  color: var(--vx-cyan);
}

/* Segmented totals on the right of a masthead. */
.hub-statrail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.hub-stat {
  min-width: 92px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--vx-line);
  background: rgba(var(--vx-bg-rgb), 0.5);
  display: grid;
  gap: 2px;
}
.hub-stat-n {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hub-stat-k {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vx-muted);
}
.hub-statrail .is-live { border-color: rgba(var(--vx-orange-rgb), 0.5); }
.hub-statrail .is-live .hub-stat-n { color: var(--vx-orange); }
.hub-statrail .is-done { border-color: rgba(var(--vx-green-rgb), 0.5); }
.hub-statrail .is-done .hub-stat-n { color: var(--vx-green); }

/* ------------------------------------------------------------- eyeline ---- */

.sd-eyeline {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vx-cyan);
}

/* ------------------------------------------------------------- section ---- */

.sd-section {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--vx-line);
  border-radius: var(--sd-radius);
  background: var(--vx-panel);
}
.sd-section > * { margin-block: 0; }

.sd-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sd-section-head h2 { font-size: 1.15rem; }
.sd-section-head h3 { font-size: 1rem; }

.sd-count {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--vx-line);
  background: rgba(var(--vx-text-rgb), 0.08);
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--vx-muted);
}

.sd-section-action { margin-left: auto; }

.sd-empty {
  padding: 18px;
  border: 1px dashed var(--vx-line);
  border-radius: 10px;
  color: var(--vx-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* --------------------------------------------------------------- prose ---- */

.sd-prose { display: grid; gap: 12px; max-width: 70ch; }
.sd-prose > * { margin-block: 0; }
.sd-prose p { color: var(--vx-muted); }
.sd-prose h2 { font-size: 1.25rem; margin-top: 6px; }
.sd-prose h3 { font-size: 1.05rem; margin-top: 4px; }
.sd-prose h4 { font-size: 0.92rem; }
.sd-prose ul, .sd-prose ol { margin: 0; padding-left: 1.2em; color: var(--vx-muted); }
.sd-prose li { margin-bottom: 4px; }
.sd-prose strong { color: var(--vx-text); }
.sd-prose img { border-radius: 10px; border: 1px solid var(--vx-line); }
.sd-prose hr { border: 0; border-top: 1px solid var(--vx-line); width: 100%; }
.sd-prose blockquote {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--vx-purple);
  background: rgba(var(--vx-purple-rgb), 0.1);
  border-radius: 0 10px 10px 0;
  color: var(--vx-muted);
}
.sd-prose code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85em;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(var(--vx-bg-rgb), 0.6);
}
.sd-prose table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.sd-prose th, .sd-prose td { padding: 7px 10px; border-bottom: 1px solid var(--vx-line); text-align: left; }
.sd-prose th { color: var(--vx-text); font-weight: 700; }
.sd-prose td { color: var(--vx-muted); }
.sd-tablewrap { overflow-x: auto; }

/* --------------------------------------------------------------- cards ---- */

.sd-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.sd-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--vx-line);
  border-left: 3px solid var(--vx-purple);
  border-radius: 12px;
  background: var(--vx-panel-2);
  color: var(--vx-text);
  overflow: hidden;
}
a.sd-card:hover { text-decoration: none; border-color: rgba(var(--vx-cyan-rgb), 0.55); }
a.sd-card:hover .sd-card-title { color: var(--vx-cyan); }

.sd-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 92px; height: 92px;
  background: radial-gradient(circle at top right, rgba(var(--vx-purple-rgb), 0.2), transparent 70%);
  pointer-events: none;
}

.sd-card-icon {
  width: 68px;
  height: 68px;
  object-fit: contain;
  image-rendering: pixelated;
}

.sd-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
}

.sd-card-note { color: var(--vx-muted); font-size: 0.82rem; }

.sd-card.is-soon { border-left-color: var(--vx-orange); opacity: 0.85; }
.sd-card.is-soon::after { background: radial-gradient(circle at top right, rgba(var(--vx-orange-rgb), 0.2), transparent 70%); }

/* ----------------------------------------------------------- campaigns ---- */

.sd-campaign {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vx-line);
  border-left: 3px solid var(--vx-cyan);
  border-radius: var(--sd-radius);
  background: var(--vx-panel);
  display: grid;
}

.sd-campaign-banner {
  position: relative;
  height: 180px;
}
.sd-campaign-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-campaign-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--vx-bg-rgb), 0.15), var(--vx-panel));
}

.sd-campaign-body {
  position: relative;
  z-index: 1;
  padding: 18px;
  display: grid;
  gap: 12px;
}
.sd-campaign-banner + .sd-campaign-body { margin-top: -58px; }

.sd-campaign-head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.sd-campaign-id { flex: 1 1 260px; display: grid; gap: 6px; }
.sd-campaign-id h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
.sd-campaign-id h2 a { color: var(--vx-text); }
.sd-campaign-id h2 a:hover { color: var(--vx-cyan); text-decoration: none; }

.sd-campaign-blurb {
  color: var(--vx-muted);
  font-size: 0.88rem;
  max-width: 70ch;
}

/* The roster: faces, who plays, and as whom. */
.sd-roster {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  align-items: stretch;
}

.sd-who {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--vx-line);
  border-radius: 10px;
  background: rgba(var(--vx-bg-rgb), 0.42);
  min-width: 0;
}

.sd-face {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--vx-line);
  background: var(--vx-panel-2);
}
.sd-face.is-gm { border-color: rgba(var(--vx-cyan-rgb), 0.6); }

.sd-who-text { min-width: 0; display: grid; gap: 1px; }
.sd-who-char {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  /* The character's name is the point of this card, so it wraps to a second
     line rather than being cut off. Three lines would be a different name. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.sd-who-player {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vx-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-who.is-gm .sd-who-player { color: var(--vx-cyan); }

/* --------------------------------------------------------------- facts ---- */

.sd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.sd-fact { display: grid; gap: 1px; }
.sd-fact-k {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vx-muted);
}
.sd-fact-v { font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-fact.is-attention .sd-fact-v { color: var(--vx-orange); }

/* ------------------------------------------------------------- actions ---- */

.sd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.sd-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 9px;
  border: 1px solid var(--vx-line);
  background: rgba(var(--vx-text-rgb), 0.07);
  color: var(--vx-text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.sd-btn:hover { background: rgba(var(--vx-text-rgb), 0.14); text-decoration: none; }

.sd-btn.is-primary {
  border-color: rgba(var(--vx-cyan-rgb), 0.6);
  background: rgba(var(--vx-cyan-rgb), 0.18);
  color: var(--vx-cyan);
}
.sd-btn.is-primary:hover { background: rgba(var(--vx-cyan-rgb), 0.26); }

.sd-btn.is-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--vx-muted);
}
.sd-btn.is-quiet:hover { color: var(--vx-text); background: rgba(var(--vx-text-rgb), 0.08); }

/* --------------------------------------------------------------- tags ----- */

.sd-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--vx-line);
  background: rgba(var(--vx-text-rgb), 0.07);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vx-muted);
}

.sd-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sd-status.is-open {
  border: 1px solid rgba(var(--vx-cyan-rgb), 0.5);
  background: rgba(var(--vx-cyan-rgb), 0.14);
  color: var(--vx-cyan);
}
.sd-status.is-done {
  border: 1px solid rgba(var(--vx-green-rgb), 0.5);
  background: rgba(var(--vx-green-rgb), 0.14);
  color: var(--vx-green);
}

/* ------------------------------------------------------ clamp and detail --- */

.sd-brief-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sd-brief-more {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vx-cyan);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.sd-details {
  border: 1px solid var(--vx-line);
  border-radius: 12px;
  background: var(--vx-panel-2);
  overflow: hidden;
}
.sd-details > summary {
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
.sd-details > summary::-webkit-details-marker { display: none; }
.sd-details > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 6px solid var(--vx-cyan);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.sd-details[open] > summary::before { transform: rotate(90deg); }
.sd-details-body { padding: 0 16px 16px; display: grid; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  .sd-details > summary::before { transition: none; }
}

/* --------------------------------------------------------------- gallery -- */

.sd-gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.sd-gallery figure {
  margin: 0;
  display: grid;
  gap: 6px;
  border: 1px solid var(--vx-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--vx-panel-2);
}
.sd-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.sd-gallery figcaption {
  padding: 0 10px 10px;
  font-size: 0.74rem;
  color: var(--vx-muted);
}

/* ---------------------------------------------------------------- cols ---- */

.sd-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: var(--sd-gap);
  align-items: start;
}
.sd-main, .sd-rail { display: grid; gap: var(--sd-gap); min-width: 0; }
.sd-main > *, .sd-rail > * { margin-block: 0; }
.sd-rail { position: sticky; top: 72px; }

.sd-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--vx-line);
  border-radius: 12px;
  background: var(--vx-panel-2);
}
.sd-panel > * { margin-block: 0; }
.sd-panel.is-featured { border-color: rgba(var(--vx-cyan-rgb), 0.5); }

/* --------------------------------------------------------------- footer --- */

.hub-footer {
  border-top: 1px solid var(--vx-line);
  background: var(--vx-panel);
}
.hub-footer-in {
  max-width: var(--sd-shell);
  margin: 0 auto;
  padding: 26px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.hub-footer-id { display: flex; align-items: center; gap: 12px; }
.hub-footer-id img { width: 64px; height: auto; }
.hub-footer-note { color: var(--vx-muted); font-size: 0.78rem; display: grid; gap: 2px; }
.hub-social { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1080px) {
  .sd-cols { grid-template-columns: minmax(0, 1fr); }
  .sd-rail { position: static; }
}

@media (max-width: 860px) {
  :root { --sd-gap: 18px; }

  .hub-navtoggle { display: block; margin-left: auto; }
  .hub-nav {
    display: none;
    flex-basis: 100%;
    margin-left: 0;
  }
  .hub-nav.is-open { display: block; }
  .hub-topbar-in { flex-wrap: wrap; }
  .hub-nav-list { flex-direction: column; align-items: stretch; gap: 2px; padding-bottom: 8px; }
  .hub-nav-list a { padding: 10px 12px; }
  .hub-nav-sub {
    position: static;
    display: block;
    box-shadow: none;
    background: rgba(var(--vx-bg-rgb), 0.45);
    margin: 2px 0 6px 10px;
  }

  .hub-statrail { margin-left: 0; }
  .sd-campaign-banner { height: 140px; }
  .sd-campaign-banner + .sd-campaign-body { margin-top: -40px; }
}

@media (max-width: 460px) {
  .sd-roster { grid-template-columns: 1fr; }
  .sd-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .hub-masthead-in { padding: 20px 16px; }
  .sd-section { padding: 14px; }
}

/* ===========================================================================
   The Emberwake Accords roster
   ---------------------------------------------------------------------------
   The old page stacked every character's full write up down the page, so it
   ran to several screens before the quest tracker. Here the party is a grid
   and the write up opens on top of it, which is the same content with the
   scrolling taken out.
   =========================================================================== */

.ewa-roster {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.ewa-card {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--vx-line);
  border-left: 3px solid var(--vx-purple);
  border-radius: 12px;
  background: var(--vx-panel-2);
  color: var(--vx-text);
  font: inherit;
  cursor: pointer;
}
.ewa-card:hover { border-color: rgba(var(--vx-cyan-rgb), 0.6); }
.ewa-card:hover .ewa-card-name { color: var(--vx-cyan); }

.ewa-card-art {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
}

.ewa-card-text { display: grid; gap: 3px; padding: 11px 13px 13px; }

.ewa-card-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
}

.ewa-card-role {
  font-size: 0.72rem;
  color: var(--vx-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ewa-card-player {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vx-muted);
}
.ewa-card-player img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--vx-line);
}

/* The write up, over the page. */
.ewa-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  padding: 20px 16px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.62);
}
.ewa-panel.is-open { display: block; }

body.has-open-character { overflow: hidden; }

.ewa-sheet {
  position: relative;
  max-width: 740px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--vx-line);
  border-radius: var(--sd-radius);
  background: var(--vx-panel);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.ewa-sheet-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.ewa-sheet-body {
  padding: 20px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.ewa-sheet-body > * { margin-block: 0; }
.ewa-sheet-body h3 { font-size: 1.3rem; }

.ewa-list { display: grid; gap: 5px; }
.ewa-list ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--vx-muted);
  font-size: 0.82rem;
}
.ewa-list li { margin-bottom: 3px; }

/* A fixed size icon button sets its own padding: the stylesheet's base
   button padding would otherwise crush the glyph off centre. */
.ewa-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--vx-line);
  border-radius: 50%;
  background: rgba(var(--vx-bg-rgb), 0.8);
  color: var(--vx-text);
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.ewa-close:hover { background: var(--vx-bg); border-color: rgba(var(--vx-cyan-rgb), 0.6); }

@media (max-width: 680px) {
  .ewa-sheet { grid-template-columns: minmax(0, 1fr); }
  .ewa-sheet-art { max-height: 300px; }
}

/* ---------------------------------------------------------- spell cards --- */
/* A spell has a shape, so Spellforge shows it: the stat lines read across,
   the rules text reads down, and who can cast it sits at the bottom. */

.sf-spell {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--vx-line);
  border-left: 3px solid var(--vx-purple);
  border-radius: 12px;
  background: var(--vx-panel-2);
}
.sf-spell > * { margin-block: 0; }

.sf-spell-head { display: grid; gap: 2px; }
.sf-spell-head h3 { font-size: 1.05rem; }

.sf-spell .sd-facts {
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(var(--vx-bg-rgb), 0.45);
  border: 1px solid var(--vx-line);
}

/* ===========================================================================
   Plugin widgets
   ---------------------------------------------------------------------------
   The Resource Hub and the quest chart are Wam's own plugins, and both ship a
   light palette from before this theme existed. Rather than edit the plugins,
   their surfaces are mapped onto the same tokens as everything else, so an
   embedded widget reads as part of the page instead of a window into another
   site. Only colour is touched: their layout is left alone.
   =========================================================================== */

.wrh-feed,
.wrh-player-card,
.wrh-bank,
.wrh-extras {
  background: transparent !important;
  color: var(--vx-text) !important;
  border-color: var(--vx-line) !important;
}

.wrh-feed {
  border: 1px solid var(--vx-line) !important;
  border-radius: 12px !important;
}

.wrh-player-card {
  background: rgba(var(--vx-bg-rgb), 0.42) !important;
  border: 1px solid var(--vx-line) !important;
  border-radius: 10px !important;
}

.wrh-feed__title { color: var(--vx-text) !important; font-family: var(--font-display); }
.wrh-feed__description,
.wrh-label,
.wrh-extra { color: var(--vx-muted) !important; }

.wrh-label {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wrh-pill,
.wrh-slot-summary {
  background: rgba(var(--vx-cyan-rgb), 0.14) !important;
  color: var(--vx-cyan) !important;
  border: 1px solid rgba(var(--vx-cyan-rgb), 0.45) !important;
}

/* A filled slot is something the player has; an empty one is a gap. */
.wrh-slot-icon {
  background: rgba(var(--vx-bg-rgb), 0.55) !important;
  border: 1px solid var(--vx-line) !important;
  color: var(--vx-text) !important;
}
.wrh-slot-icon--set {
  background: rgba(var(--vx-green-rgb), 0.16) !important;
  border-color: rgba(var(--vx-green-rgb), 0.5) !important;
}
.wrh-slot-icon--empty,
.wrh-slot-icon--set-empty {
  background: transparent !important;
  border-style: dashed !important;
}

/* The quest chart draws itself, so only its frame and controls are themed. */
.ays-chart-container-google,
.ays-chart-charts-main-container {
  background: transparent !important;
  border: 0 !important;
}
.ays-chart-header-container,
.ays-chart-charts-description { color: var(--vx-muted) !important; }
.ays-chart-actions-container button,
.ays-chart-export-buttons button,
.ays-chart-export-buttons a {
  background: rgba(var(--vx-text-rgb), 0.07) !important;
  color: var(--vx-text) !important;
  border: 1px solid var(--vx-line) !important;
  border-radius: 9px !important;
}

/* The session tracker prints one line of text, which now has a home. */
.ewa-session {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* A chart or a wide table scrolls inside its own box. The page body never
   scrolls sideways, on any screen. */
.sd-scrollx {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Belt and braces: a plugin that sets its own fixed width is still contained
   by the section it was placed in. */
.sd-section .ays-chart-container-google,
.sd-section .wrh-feed {
  max-width: 100%;
  overflow-x: auto;
}