:root {
  color-scheme: dark;
  --background: #05070f;
  --background-raised: #070a16;
  --surface: #0d1326;
  --surface-raised: #0a0e1f;
  --border: rgba(50, 101, 129, 0.45);
  --line: #326581;
  --text: #dce8f0;
  --muted: #8fa3bd;
  --accent: #58b9e6;
  --accent-strong: #8bdcff;
  --red-group: #57471f;
  --red-border: #dcae4d;
  --gold: #d2ad55;
  --danger: #ff929d;
  --focus: #f1c75b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

/* Private Session Name Review ------------------------------------------------ */
.review-workspace {
  min-height: 100vh;
  background:
    radial-gradient(circle at 75% -10%, rgba(48, 99, 255, 0.2), transparent 34rem),
    linear-gradient(160deg, #080b12, #0c111a 55%, #070a10);
}

.review-appbar {
  align-items: center;
  background: rgba(8, 11, 17, 0.96);
  border-bottom: 1px solid #31394b;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 2.7rem 1fr auto;
  min-height: 3.4rem;
  padding: 0 1.2rem;
  position: sticky;
  top: 0;
  z-index: 60;
}

.review-appbar > div { display: flex; flex-direction: column; }
.review-appbar strong { color: #f4f6fb; font-size: 0.77rem; letter-spacing: 0.12em; }
.review-appbar span { color: #8993a6; font-size: 0.68rem; }
.review-wiki-link { font-size: 0.78rem; font-weight: 700; text-decoration: none; }

.review-page {
  margin: 0 auto;
  max-width: 90rem;
  padding: clamp(1rem, 2.5vw, 2.4rem);
}

.review-hero {
  align-items: end;
  background:
    linear-gradient(90deg, rgba(10, 17, 31, 0.98), rgba(15, 27, 50, 0.82)),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(90, 122, 255, 0.05) 22px 24px);
  border: 1px solid #304263;
  border-radius: 0.8rem;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.22);
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  min-height: 10rem;
  padding: clamp(1.3rem, 3vw, 2.5rem);
}

.review-hero h1 { color: #f5f7ff; font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3.8rem); margin: 0.15rem 0 0.5rem; }
.review-hero p { color: #aeb9cf; margin: 0; max-width: 50rem; }
.review-eyebrow { color: #7eb8ff !important; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.review-game { border-left: 2px solid #516dff; display: flex; flex-direction: column; margin-left: 2rem; padding-left: 1rem; }
.review-game small { color: #7f8a9d; }
.review-game strong { color: #e7ebf5; font-size: 1.05rem; }

.review-alert { border-radius: 0.55rem; margin: 0.8rem 0; padding: 0.85rem 1rem; }
.review-summary {
  background: rgba(14, 19, 29, 0.94);
  border: 1px solid #30394a;
  border-radius: 0.65rem;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(7rem, 1fr)) minmax(12rem, auto);
  margin-bottom: 0.8rem;
  padding: 0.7rem;
}
.review-stat { align-items: center; background: #141a25; border: 1px solid #282f3d; border-radius: 0.5rem; display: flex; gap: 0.7rem; padding: 0.75rem 0.9rem; }
.review-stat strong { color: #dce2ee; font-size: 1.3rem; }
.review-stat span { color: #929eb1; font-size: 0.78rem; }
.review-stat.is-done strong { color: #61dd93; }
.review-stat.is-warning strong { color: #ffc053; }
.review-stat.is-known strong { color: #7fa6ff; }
.review-summary-actions, .review-inline-form { display: flex; }
.review-summary-actions button { width: 100%; }

.review-categories { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 0.8rem; }
.review-category { align-items: center; background: #101722; border: 1px solid #29374c; border-radius: 999px; color: #aab7ca; display: flex; font-size: 0.73rem; gap: 0.5rem; padding: 0.35rem 0.7rem; }
.review-category strong { color: #83b7ff; }

.review-main-grid { display: grid; gap: 0.85rem; grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr); }
.review-queue, .review-card, .review-add-missing, .review-complete-panel {
  background: rgba(13, 18, 27, 0.97);
  border: 1px solid #30394a;
  border-radius: 0.65rem;
}
.review-queue { max-height: 65rem; overflow: auto; padding: 0.55rem; }
.review-panel-heading { align-items: center; color: #dce3ef; display: flex; font-size: 0.78rem; font-weight: 800; justify-content: space-between; padding: 0.55rem 0.65rem 0.8rem; text-transform: uppercase; }
.review-panel-heading strong { background: #26334d; border-radius: 999px; color: #9dc2ff; padding: 0.15rem 0.48rem; }
.review-queue-item { border-left: 3px solid transparent; border-radius: 0.35rem; color: #c4ccda; display: flex; flex-direction: column; margin-bottom: 0.25rem; padding: 0.62rem 0.7rem; text-decoration: none; }
.review-queue-item small { color: #7f8a9d; font-size: 0.67rem; margin-top: 0.1rem; }
.review-queue-item:hover, .review-queue-item.is-active { background: #182238; border-left-color: #6281ff; color: #fff; }
.review-empty { color: #8390a4; font-size: 0.8rem; padding: 0.8rem; }

.review-card { padding: clamp(1rem, 2.2vw, 1.6rem); }
.review-card-title { align-items: flex-start; border-bottom: 1px solid #293344; display: flex; justify-content: space-between; padding-bottom: 0.9rem; }
.review-card-title h2 { color: #f1f4fa; font-family: Georgia, serif; font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0; }
.review-status { background: #3a2a0b; border: 1px solid #7c5a18; border-radius: 999px; color: #ffd47c; font-size: 0.72rem; font-weight: 800; padding: 0.36rem 0.65rem; }
.review-facts { display: grid; gap: 0.5rem; grid-template-columns: repeat(3, 1fr); margin: 0.8rem 0; }
.review-facts div { background: #101722; border-radius: 0.4rem; padding: 0.65rem; }
.review-facts dt { color: #79869a; font-size: 0.67rem; text-transform: uppercase; }
.review-facts dd { color: #dce3ef; margin: 0.2rem 0 0; }
.review-context { background: #0a1018; border: 1px solid #233146; border-radius: 0.5rem; margin: 0.8rem 0; padding: 0.8rem; }
.review-context h3, .review-decision-block h3 { color: #dce6f6; font-size: 0.86rem; margin: 0 0 0.6rem; }
.review-context blockquote { border-left: 2px solid #5574df; color: #aeb9c9; font-family: ui-monospace, Consolas, monospace; font-size: 0.76rem; margin: 0.45rem 0; padding-left: 0.7rem; }

.review-decision-block { background: #111925; border: 1px solid #2d3d55; border-radius: 0.55rem; display: grid; gap: 0.65rem; margin-top: 0.75rem; padding: 0.9rem; }
.review-decision-block label, .review-compact-actions label, .review-form-grid label, .review-occurrence label { color: #98a5b8; display: grid; font-size: 0.72rem; gap: 0.3rem; }
.review-workspace input, .review-workspace select, .review-workspace textarea { background: #090e16; border: 1px solid #36455d; border-radius: 0.38rem; color: #e4e8ef; font: inherit; padding: 0.62rem 0.7rem; width: 100%; }
.review-workspace textarea { resize: vertical; }
.review-workspace button { background: #405fe6; border: 1px solid #6580f0; border-radius: 0.4rem; color: #fff; cursor: pointer; font-weight: 760; padding: 0.62rem 0.8rem; }
.review-workspace button:hover:not(:disabled) { background: #5270f3; }
.review-workspace button:disabled { cursor: not-allowed; opacity: 0.42; }
.review-workspace button.secondary { background: #1a2230; border-color: #354258; color: #c6cfdd; }
.review-button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.review-alias { background: #174d5e !important; border-color: #2c859d !important; }
.review-new { background: #275d42 !important; border-color: #43926a !important; }
.review-danger { background: #45232b !important; border-color: #7d3d49 !important; }
.review-compact-actions { align-items: end; background: #0d131d; border: 1px solid #293548; border-radius: 0.55rem; display: grid; gap: 0.5rem; grid-template-columns: minmax(10rem, 1fr) auto auto auto; margin-top: 0.75rem; padding: 0.75rem; }

.review-occurrences { background: #0e151f; border: 1px solid #29374b; border-radius: 0.55rem; margin-top: 0.75rem; padding: 0.75rem; }
.review-occurrences summary, .review-add-missing summary { color: #9fc2ff; cursor: pointer; font-weight: 800; }
.review-occurrence { border-top: 1px solid #283246; display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr 1fr auto; margin-top: 0.75rem; padding-top: 0.75rem; }
.review-occurrence > div, .review-occurrence > p { grid-column: 1 / -1; }
.review-occurrence > div { display: flex; justify-content: space-between; }
.review-occurrence small { color: #7d899c; }
.review-occurrence p { color: #9da9ba; font-size: 0.76rem; margin: 0; }

.review-add-missing { margin-top: 0.85rem; padding: 1rem; }
.review-form-grid { align-items: end; display: grid; gap: 0.7rem; grid-template-columns: 1fr 1fr auto; margin-top: 0.9rem; }
.review-wide { grid-column: 1 / -1; }
.review-complete-panel { align-items: center; display: flex; justify-content: space-between; margin-top: 0.85rem; padding: 1rem 1.2rem; }
.review-complete-panel h2 { color: #e7ecf5; font-size: 1rem; margin: 0 0 0.2rem; }
.review-complete-panel p { color: #8e9aad; font-size: 0.78rem; margin: 0; }
.review-finish { background: #17714a !important; border-color: #2c9c68 !important; }
.review-lock-form { display: flex; justify-content: flex-end; margin-top: 0.8rem; }
.review-card-empty { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 22rem; text-align: center; }
.review-success-mark { align-items: center; background: #153e2e; border: 1px solid #2e8c63; border-radius: 50%; color: #71e4a4; display: flex; font-size: 2rem; height: 4rem; justify-content: center; width: 4rem; }
.review-card-empty h2 { color: #eef2f8; margin-bottom: 0.3rem; }
.review-card-empty p { color: #8e9aad; }

@media (max-width: 900px) {
  .review-summary { grid-template-columns: repeat(2, 1fr); }
  .review-summary-actions { grid-column: 1 / -1; }
  .review-main-grid { grid-template-columns: 1fr; }
  .review-queue { display: flex; max-height: none; overflow-x: auto; }
  .review-panel-heading { min-width: 8rem; }
  .review-queue-item { min-width: 10rem; }
  .review-compact-actions, .review-occurrence, .review-form-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .review-appbar { padding: 0 0.6rem; }
  .review-wiki-link { font-size: 0.68rem; }
  .review-page { padding: 0.65rem; }
  .review-hero { align-items: flex-start; flex-direction: column; min-height: 0; }
  .review-game { border-left: 0; border-top: 1px solid #33415a; margin: 1rem 0 0; padding: 0.7rem 0 0; width: 100%; }
  .review-summary { grid-template-columns: 1fr 1fr; }
  .review-facts, .review-compact-actions, .review-occurrence, .review-form-grid { grid-template-columns: 1fr; }
  .review-card-title, .review-complete-panel { align-items: flex-start; flex-direction: column; gap: 0.7rem; }
  .review-button-row, .review-button-row button, .review-complete-panel form, .review-complete-panel button { width: 100%; }
}

/* Dedicated spell-check application ---------------------------------------- */
.review-workspace {
  background: #11141b;
  color: #d9dde7;
}

.review-appbar {
  background: #171a22;
  border-bottom-color: #292e3a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
  min-height: 3.15rem;
}

.review-app-title { display: flex; flex-direction: column; }
.review-app-title strong { color: #eef1f8; }
.review-app-title span { color: #8d96aa; }

.review-layout {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  margin: 0 auto;
  max-width: 112rem;
  min-height: calc(100vh - 3.15rem);
}

.review-side-rail {
  background: #151821;
  border-right: 1px solid #292e3a;
  padding: 1rem 0.8rem;
}

.review-rail-campaign {
  align-items: center;
  border-bottom: 1px solid #2b303d;
  display: flex;
  gap: 0.7rem;
  padding: 0.25rem 0.3rem 1rem;
}

.review-rail-mark {
  align-items: center;
  background: linear-gradient(145deg, #5568ef, #6979ff);
  border-radius: 0.7rem;
  box-shadow: 0 0 1.6rem rgba(89, 108, 255, 0.25);
  color: white;
  display: flex;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-weight: 800;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.review-rail-campaign > div { display: flex; flex-direction: column; min-width: 0; }
.review-rail-campaign small, .review-rail-section h2 {
  color: #777f92;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.review-rail-campaign strong { color: #edf0f6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-rail-section { border-bottom: 1px solid #2b303d; padding: 1rem 0.25rem; }
.review-rail-section h2 { margin: 0 0 0.7rem; }
.review-file-state {
  align-items: center;
  border-radius: 0.42rem;
  color: #8992a4;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1.2rem 1fr;
  margin: 0.22rem 0;
  padding: 0.55rem;
}
.review-file-state.is-active { background: #242a3e; box-shadow: inset 3px 0 #6675ff; color: #aab7ff; }
.review-file-state div { display: flex; flex-direction: column; min-width: 0; }
.review-file-state strong { color: #cbd1dc; font-size: 0.76rem; }
.review-file-state small { color: #7d8799; font-size: 0.66rem; }
.review-rail-help p { color: #8992a4; font-size: 0.74rem; line-height: 1.5; }

.review-page { max-width: none; padding: clamp(0.8rem, 2vw, 1.6rem); }
.review-session-card {
  background: #191d26;
  border: 1px solid #303644;
  border-left: 4px solid #6876ff;
  border-radius: 0.48rem;
  margin-bottom: 0.75rem;
  padding: 1rem;
}
.review-session-heading { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.review-session-heading h1 { color: #f0f2f7; font-size: 1.25rem; margin: 0.12rem 0 0.18rem; }
.review-state-line { color: #f0b547; font-size: 0.76rem; margin: 0; }
.review-safe-note {
  background: #131821;
  border: 1px solid #303847;
  border-radius: 0.42rem;
  display: flex;
  flex-direction: column;
  max-width: 20rem;
  padding: 0.6rem 0.75rem;
}
.review-safe-note strong { color: #6ee29e; font-size: 0.72rem; }
.review-safe-note span { color: #8e98aa; font-size: 0.68rem; }

.review-summary {
  background: transparent;
  border: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(6rem, 1fr)) minmax(11rem, auto);
  margin: 0.9rem 0 0.65rem;
  padding: 0;
}
.review-stat {
  background: #222731;
  border-color: #343a48;
  min-height: 3.15rem;
  padding: 0.55rem 0.65rem;
}
.review-stat-icon {
  align-items: center;
  background: #333946;
  border-radius: 50%;
  display: inline-flex;
  font-size: 0.72rem;
  height: 1.55rem;
  justify-content: center;
  width: 1.55rem;
}
.review-stat strong { font-size: 1rem; }
.review-stat.is-known .review-stat-icon { background: #22583c; color: #72e6a5; }
.review-stat.is-warning .review-stat-icon { background: #654914; color: #ffd26f; }
.review-stat.is-new .review-stat-icon { background: #244f75; color: #7ebeff; }
.review-stat.is-done .review-stat-icon { background: #32406d; color: #aabaff; }

.review-categories {
  border-top: 1px solid #303644;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin: 0;
  padding-top: 0.7rem;
}
.review-category {
  background: #151a22;
  border-color: #2d3442;
  border-radius: 0.4rem;
  gap: 0.55rem;
  padding: 0.48rem 0.62rem;
}
.review-category-icon { color: #8d9cff; font-size: 1rem; width: 1.1rem; }
.review-category-copy { display: flex; flex-direction: column; }
.review-category-copy strong { color: #cfd5e0; font-size: 0.72rem; }
.review-category-copy small { color: #737e91; font-size: 0.63rem; }
.review-category-1 .review-category-icon { color: #b47cff; }
.review-category-2 .review-category-icon { color: #57d7d2; }
.review-category-3 .review-category-icon { color: #f2b344; }
.review-category-4 .review-category-icon { color: #d783d7; }

.review-main-grid { gap: 0.75rem; grid-template-columns: 14.5rem minmax(0, 1fr); }
.review-queue, .review-card, .review-add-missing, .review-complete-panel {
  background: #191d26;
  border-color: #303644;
  border-radius: 0.48rem;
}
.review-queue { max-height: 72rem; }
.review-queue-item:hover, .review-queue-item.is-active { background: #272d42; border-left-color: #6b78ff; }
.review-card { border-left: 4px solid #e0a528; padding: 0; }
.review-card-title { background: #1e232d; padding: 0.85rem 1rem; }
.review-card-title h2 { font-family: inherit; font-size: 1.25rem; }
.review-status { background: #24313b; border-color: #3e6170; color: #75d1df; }
.review-evidence-grid { display: grid; gap: 0.7rem; grid-template-columns: minmax(13rem, 0.85fr) minmax(18rem, 1.6fr); padding: 0.85rem 1rem 0; }
.review-facts { display: grid; gap: 0; grid-template-columns: 1fr; margin: 0; }
.review-facts div { background: transparent; border-bottom: 1px solid #2b313e; display: grid; gap: 0.5rem; grid-template-columns: 6.5rem 1fr; padding: 0.48rem 0.2rem; }
.review-facts dt { color: #8d96a8; }
.review-facts dd { color: #dbe0e9; font-size: 0.77rem; margin: 0; overflow-wrap: anywhere; }
.review-context { margin: 0; }
.review-context blockquote { background: #151a22; border-left-color: #6876ff; border-radius: 0.25rem; padding: 0.55rem 0.65rem; }

.review-decision-block, .review-compact-actions, .review-occurrences { margin-left: 1rem; margin-right: 1rem; }
.review-decision-block { background: #171c24; border-color: #303746; }
.review-action-note { color: #8792a4; display: block; font-size: 0.69rem; line-height: 1.45; }
.review-button-row button { min-width: 10rem; }
.review-alias { background: #253247 !important; border-color: #455774 !important; }
.review-new { background: #273e34 !important; border-color: #417159 !important; }
.review-danger { background: #37252b !important; border-color: #67404a !important; }
.review-compact-actions { margin-bottom: 1rem; }
.review-occurrences { margin-bottom: 1rem; }

.review-fact-section {
  background: #11151d;
  border: 1px solid #303746;
  border-radius: 0.55rem;
  margin-top: 0.85rem;
  padding: 0.75rem;
}
.review-fact-section > .muted {
  color: #909aac;
  font-size: 0.76rem;
  line-height: 1.5;
  margin: 0 0.65rem 0.75rem;
}
.review-fact-card {
  border-left-color: #d99b32;
  margin-top: 0.7rem;
}
.review-fact-card .review-card-title h2 {
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
}
.review-fact-question,
.review-fact-resolution {
  background: #151b24;
  border: 1px solid #303a4a;
  border-radius: 0.45rem;
  color: #c6ceda;
  line-height: 1.5;
  margin: 0.75rem 1rem;
  padding: 0.75rem;
}
.review-fact-question strong { color: #ffd177; }
.review-fact-resolution { border-left: 3px solid #58c98b; }
.review-fact-resolution strong { color: #8ee6b1; }
.review-fact-resolution p { margin: 0.45rem 0 0; }
.review-fact-form { margin-bottom: 1rem; }

@media (max-width: 1050px) {
  .review-layout { grid-template-columns: 1fr; }
  .review-side-rail { border-bottom: 1px solid #292e3a; border-right: 0; display: grid; gap: 0.8rem; grid-template-columns: minmax(12rem, 0.8fr) 1.4fr; }
  .review-rail-section { border-bottom: 0; padding: 0.25rem; }
  .review-rail-help { display: none; }
  .review-summary { grid-template-columns: repeat(3, 1fr); }
  .review-summary-actions { grid-column: span 2; }
}

@media (max-width: 720px) {
  .review-side-rail { display: none; }
  .review-session-heading, .review-complete-panel { align-items: stretch; flex-direction: column; }
  .review-safe-note { max-width: none; }
  .review-summary { grid-template-columns: 1fr 1fr; }
  .review-summary-actions { grid-column: 1 / -1; }
  .review-main-grid { grid-template-columns: 1fr; }
  .review-queue { display: flex; overflow-x: auto; }
  .review-panel-heading { min-width: 8rem; }
  .review-queue-item { min-width: 10rem; }
  .review-evidence-grid { grid-template-columns: 1fr; }
  .review-compact-actions, .review-occurrence, .review-form-grid { grid-template-columns: 1fr; }
  .review-decision-block, .review-compact-actions, .review-occurrences { margin-left: 0.65rem; margin-right: 0.65rem; }
  .review-button-row button { width: 100%; }
}

* {
  box-sizing: border-box;
}

body {
  background:
    radial-gradient(circle at 78% 8%, rgba(35, 127, 174, 0.14), transparent 32rem),
    linear-gradient(135deg, #050b0f, var(--background) 48%, #0a1820);
  color: var(--text);
  margin: 0;
  min-height: 100vh;
}

.portal-workspace {
  min-height: 100vh;
}

.portal-appbar {
  align-items: stretch;
  background: #0b1017;
  border-bottom: 1px solid var(--red-group);
  display: grid;
  grid-template-columns: 2.6rem 1px auto minmax(15rem, 1fr);
  height: 2.65rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.portal-appmark {
  align-items: center;
  color: var(--accent-strong);
  display: flex;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 800;
  justify-content: center;
  text-decoration: none;
}

.portal-app-divider { background: var(--border); margin-block: 0.45rem; }
.portal-app-tools { display: flex; }
.portal-app-tools a {
  align-items: center;
  border-right: 1px solid rgba(29, 64, 87, 0.55);
  color: var(--muted);
  display: flex;
  font-size: 0.69rem;
  font-weight: 750;
  padding: 0 0.8rem;
  text-decoration: none;
  text-transform: uppercase;
}
.portal-app-tools a:hover { background: var(--surface); color: var(--accent-strong); }

.portal-app-tab {
  align-items: center;
  border-left: 1px solid var(--red-group);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  max-width: 34rem;
  min-width: 0;
  padding: 0 0.8rem;
}
.portal-app-tab span { color: var(--text); font-size: 0.78rem; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-app-tab small { color: var(--muted); font-size: 0.65rem; white-space: nowrap; }

a {
  color: var(--accent-strong);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: #c7f1ff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.shell {
  display: grid;
  grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr);
  min-height: calc(100vh - 2.65rem);
}

/* The campaign reads as a website, not a file browser: no left vault tree.
   Navigation lives in the top app bar and in each page's own tab rows. */
.shell--no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

/* Reader controls sit in the page toolbar now that there is no sidebar to
   hold them, so they lay out as one compact inline group. */
.toolbar .reader-settings {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.toolbar .reader-settings label {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toolbar .reader-settings select,
.toolbar .reader-settings button {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  width: auto;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(22, 90, 128, 0.22), transparent 12rem),
    rgba(7, 16, 22, 0.96);
  border-right: 1px solid var(--border);
  height: calc(100vh - 2.65rem);
  overflow-y: auto;
  padding: 1.1rem;
  position: sticky;
  top: 2.65rem;
}

.sidebar h1 {
  font-size: 1.2rem;
  margin: 0 0 0.35rem;
}

.sidebar p {
  color: var(--muted);
  margin: 0;
}

.vault-brand {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
  padding: 0.35rem 0 1rem;
}

.vault-mark {
  background: linear-gradient(135deg, transparent 42%, var(--accent-strong) 43% 56%, transparent 57%);
  border: 1px solid var(--line);
  box-shadow: 0 0 1.1rem rgba(135, 221, 255, 0.35);
  display: block;
  height: 2.35rem;
  transform: rotate(45deg);
  width: 2.35rem;
}

.vault-kicker {
  color: var(--accent-strong) !important;
  font-size: 0.67rem !important;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin-bottom: 0.2rem !important;
}

.vault-actions {
  display: grid;
  gap: 0.3rem;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0.85rem;
}

.vault-actions a {
  background: rgba(22, 90, 128, 0.22);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  color: var(--accent-strong);
  font-size: 0.76rem;
  font-weight: 750;
  padding: 0.5rem 0.45rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.tree-search-label {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.tree-search {
  background: rgba(5, 12, 16, 0.78);
  border-color: var(--border);
  font-size: 0.84rem;
  margin-bottom: 0.8rem;
  padding: 0.58rem 0.65rem;
}

.vault-tree,
.vault-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vault-tree-toolbar {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  margin: 0.15rem 0 0.55rem;
  min-width: 0;
}

.vault-tree-title {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vault-tree-collapse {
  flex: 0 1 auto;
  font-size: 0.72rem;
  line-height: 1.15;
  min-height: 2.75rem;
  min-width: 0;
  padding: 0.48rem 0.62rem;
  white-space: normal;
}

.vault-tree-collapse:disabled {
  cursor: default;
  opacity: 0.5;
}

.vault-tree ul ul {
  border-left: 1px solid rgba(42, 137, 178, 0.34);
  margin-left: 0.55rem;
  padding-left: 0.45rem;
}

.tree-item[hidden] {
  display: none;
}

.tree-folder details > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.22rem;
  list-style: none;
  min-width: 0;
}

.tree-folder details > summary::-webkit-details-marker {
  display: none;
}

.tree-folder details > summary::before {
  color: var(--muted);
  content: "›";
  flex: 0 0 auto;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

.tree-folder details[open] > summary::before {
  transform: rotate(90deg);
}

.tree-link {
  align-items: center;
  border-radius: 0.3rem;
  color: var(--text);
  display: flex;
  font-size: 0.83rem;
  gap: 0.38rem;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0.32rem 0.38rem;
  text-decoration: none;
  width: 100%;
}

.tree-link:hover {
  background: rgba(42, 137, 178, 0.17);
}

.tree-link.is-active {
  background: linear-gradient(90deg, rgba(220, 174, 77, 0.42), rgba(220, 174, 77, 0.20));
  box-shadow: inset 2px 0 var(--red-border);
  color: #e9f9ff;
}

.tree-icon {
  color: var(--accent);
  flex: 0 0 auto;
  font-size: 0.72rem;
}

/* Give the page real side margins so a dense campaign layout reads as a
   centred document rather than filling the glass edge to edge. */
.content {
  background: transparent;
  min-width: 0;
  padding: clamp(0.85rem, 1.8vw, 1.7rem) clamp(1rem, 5vw, 8rem);
}

.content-inner {
  margin: 0 auto;
  max-width: 105rem;
}

.toolbar,
.breadcrumbs,
.folder-row,
.note-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.toolbar {
  justify-content: space-between;
  margin-bottom: 1.35rem;
}

.breadcrumbs {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}

.button,
button {
  background: linear-gradient(135deg, var(--accent), #2b9dcc);
  border: 0;
  border-radius: 0.55rem;
  color: #031017;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: 700;
  padding: 0.65rem 0.9rem;
  text-decoration: none;
}

.button.secondary,
button.secondary {
  background: var(--surface-raised);
  color: var(--text);
  outline: 1px solid var(--border);
}

.folder-list {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  list-style: none;
  margin: 1.2rem 0;
  overflow: hidden;
  padding: 0;
}

.folder-row {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
}

.folder-row:last-child {
  border-bottom: 0;
}

.entry-link {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  min-width: 0;
}

.entry-link span:last-child {
  overflow-wrap: anywhere;
}

.entry-meta,
.muted {
  color: var(--muted);
  font-size: 0.9rem;
}

.note {
  font-size: 1.03rem;
  line-height: 1.68;
  overflow-wrap: anywhere;
}

.note h1,
.note h2,
.note h3 {
  line-height: 1.25;
  margin-top: 1.8em;
}

.note code {
  background: var(--surface-raised);
  border-radius: 0.3rem;
  padding: 0.12em 0.3em;
}

.note pre {
  background: #0b0a0e;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  overflow-x: auto;
  padding: 1rem;
}

.note blockquote {
  border-left: 0.25rem solid var(--accent);
  color: var(--muted);
  margin-left: 0;
  padding-left: 1rem;
}

.note {
  background: linear-gradient(180deg, rgba(11, 16, 20, 0.96), rgba(7, 16, 22, 0.88));
  border: 1px solid rgba(42, 137, 178, 0.34);
  border-radius: 0.45rem;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.22);
  padding: clamp(1rem, 2.6vw, 2.25rem);
}

.note > h1:first-of-type {
  border-bottom: 1px solid var(--line);
  color: #ecfaff;
  font-size: clamp(2rem, 5vw, 4.4rem);
  letter-spacing: 0.015em;
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  text-shadow: 0 0 1.2rem rgba(135, 221, 255, 0.34);
}

.note table {
  border-collapse: collapse;
  width: 100%;
}

.note th,
.note td {
  border: 1px solid var(--border);
  padding: 0.65rem 0.75rem;
  text-align: left;
}

.note th {
  background: rgba(22, 90, 128, 0.3);
  color: var(--accent-strong);
}

.callout {
  background: linear-gradient(135deg, rgba(16, 35, 46, 0.88), rgba(11, 16, 20, 0.94));
  border: 1px solid var(--border);
  border-left: 3px solid var(--line);
  border-radius: 0.35rem;
  color: var(--text);
  margin: 0.8rem 0;
  padding: 0.85rem 1rem;
}

.callout-title {
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.callout-lead:empty {
  display: none;
}

.callout-wf-main,
.callout-wf-rail {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}

.callout-wf-main > .callout-title,
.callout-wf-rail > .callout-title {
  display: none;
}

.callout-wf-banner {
  background:
    linear-gradient(90deg, rgba(4, 11, 15, 0.9), rgba(7, 25, 34, 0.2), rgba(4, 11, 15, 0.82)),
    radial-gradient(circle at 70% 50%, rgba(63, 185, 235, 0.35), transparent 23rem),
    repeating-linear-gradient(115deg, rgba(42, 137, 178, 0.13) 0 1px, transparent 1px 24px),
    #0b1820;
  border: 1px solid var(--line);
  border-radius: 0.2rem;
  box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.45), 0 0 1.8rem rgba(42, 137, 178, 0.16);
  grid-column: 1 / -1;
  min-height: clamp(9rem, 20vw, 16rem);
  overflow: hidden;
  padding: 0;
  position: relative;
}

.callout-wf-banner::after {
  border: 1px solid rgba(135, 221, 255, 0.32);
  content: "";
  inset: 0.55rem;
  pointer-events: none;
  position: absolute;
}

.callout-wf-banner img {
  display: block;
  height: clamp(9rem, 20vw, 16rem);
  object-fit: cover;
  width: 100%;
}

.callout-wf-hero {
  background: linear-gradient(105deg, rgba(7, 16, 22, 0.95), rgba(22, 90, 128, 0.42));
  border-left-color: var(--accent-strong);
  padding: clamp(1rem, 3vw, 2.2rem);
}

.callout-wf-hero h1 {
  border: 0;
  font-size: clamp(1.8rem, 4.5vw, 4rem);
  margin: 0;
  text-shadow: 0 0 1rem rgba(135, 221, 255, 0.45);
}

.callout-wf-tabs {
  background: transparent;
  border: 0;
  padding: 0;
}

.callout-wf-tabs > .callout-title {
  display: none;
}

.callout-wf-tabs p,
.callout-wf-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.callout-wf-tabs a {
  background: linear-gradient(180deg, rgba(35, 127, 174, 0.42), rgba(16, 35, 46, 0.78));
  border: 1px solid var(--line);
  border-radius: 0.22rem;
  color: #dff7ff;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  padding: 0.52rem 0.7rem;
  text-decoration: none;
}

.callout-wf-panel,
.callout-wf-category-table,
.callout-wf-wiki-nav,
.callout-wf-lore-menu,
.callout-wf-alert {
  box-shadow: inset 0 1px rgba(135, 221, 255, 0.06);
}

.callout-wf-category-table td {
  background: rgba(16, 35, 46, 0.58);
  text-align: center;
}

.callout-wf-category-table td:hover {
  background: rgba(35, 127, 174, 0.32);
}

.callout-wf-quick-create {
  display: none;
}

.summurizer-statblock {
  background:
    linear-gradient(145deg, rgba(17, 28, 34, 0.98), rgba(6, 13, 17, 0.98)),
    var(--surface);
  border: 1px solid rgba(210, 173, 85, 0.62);
  border-radius: 0.4rem;
  box-shadow: inset 0 1px rgba(255, 240, 184, 0.08), 0 1rem 2.5rem rgba(0, 0, 0, 0.2);
  margin: 1.15rem 0;
  max-width: 58rem;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 1.6rem);
}

.statblock-header {
  border-bottom: 2px solid var(--gold);
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
}

.statblock-kicker {
  color: var(--gold);
  display: block;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.summurizer-statblock h3 {
  color: #fff3c8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  letter-spacing: 0.015em;
  margin: 0;
}

.statblock-identity {
  color: var(--muted);
  font-style: italic;
  margin: 0.2rem 0 0;
}

.statblock-vitals,
.statblock-details {
  display: grid;
  gap: 0.3rem;
  margin: 0.7rem 0;
}

.statblock-field {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
}

.statblock-field dt,
.statblock-ability dt {
  color: var(--gold);
  font-weight: 800;
}

.statblock-field dd,
.statblock-ability dd {
  margin: 0;
}

.statblock-abilities {
  border-bottom: 1px solid rgba(210, 173, 85, 0.42);
  border-top: 1px solid rgba(210, 173, 85, 0.42);
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(6, minmax(3.2rem, 1fr));
  margin: 0.9rem 0;
  padding: 0.7rem 0;
}

.statblock-ability {
  text-align: center;
}

.statblock-section h4 {
  border-bottom: 1px solid rgba(210, 173, 85, 0.55);
  color: #ffe89f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  margin: 1rem 0 0.55rem;
  padding-bottom: 0.2rem;
}

.statblock-entry {
  line-height: 1.55;
  margin: 0.55rem 0;
}

.statblock-entry strong {
  color: #fff3c8;
}

.statblock-error {
  border: 1px solid var(--danger);
  color: var(--danger);
  margin: 1rem 0;
  padding: 0.8rem;
}

.dnd-warframe-campaign-home {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 2.25fr) minmax(15rem, 0.8fr);
}

.dnd-warframe-campaign-home > h1,
.dnd-warframe-campaign-home > .callout-wf-banner,
.dnd-warframe-campaign-home > .callout-wf-wiki-nav {
  grid-column: 1 / -1;
}

.dnd-warframe-campaign-home > .callout-wf-main {
  grid-column: 1;
}

.dnd-warframe-campaign-home > .callout-wf-rail {
  align-self: start;
  grid-column: 2;
  position: sticky;
  top: 1rem;
}

/* Original Summurizer reader features. These styles do not load Obsidian themes. */
.vault-search-control,
.full-search-control {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.vault-search-control .tree-search {
  margin-bottom: 0;
}

.reader-settings {
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.45rem;
  margin: 0.85rem 0;
  padding: 0.75rem 0;
}

.reader-settings label {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reader-settings select {
  background: rgba(5, 12, 16, 0.78);
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  color: var(--text);
  font: inherit;
  padding: 0.55rem;
  width: 100%;
}

.note-banner {
  background: linear-gradient(135deg, var(--background-raised), var(--surface));
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  min-height: 10rem;
  overflow: hidden;
  position: relative;
}

.note-banner > img {
  height: 15rem;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.note-banner > img.banner-position-top { object-position: center top; }
.note-banner > img.banner-position-center { object-position: center; }
.note-banner > img.banner-position-bottom { object-position: center bottom; }

.note-banner-overlay {
  align-items: flex-end;
  background: linear-gradient(90deg, rgba(4, 10, 14, 0.94), rgba(4, 10, 14, 0.45) 70%, transparent);
  display: flex;
  gap: 1rem;
  inset: 0;
  min-height: 10rem;
  padding: 1.3rem;
  position: relative;
}

.note-banner-overlay h1,
.note-banner-overlay p { margin: 0; }
.note-banner-overlay p { color: #c6dbe5; margin-top: 0.2rem; }
.note-banner-icon { color: var(--gold); font-size: 2.35rem; line-height: 1; }

.query-view {
  background: color-mix(in srgb, var(--surface-raised) 87%, transparent);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  margin: 1rem 0;
  overflow: hidden;
}

.query-view > summary {
  color: var(--accent-strong);
  cursor: pointer;
  font-weight: 800;
  padding: 0.75rem 0.9rem;
}

.query-table-scroll { overflow-x: auto; }
.query-table { border-collapse: collapse; margin: 0 !important; width: 100%; }
.query-table th,
.query-table td { border-color: var(--border) !important; padding: 0.65rem 0.8rem !important; }
.query-list { margin: 0; padding: 0.25rem 1rem 1rem 2.25rem; }
.query-empty-state { color: var(--muted); padding: 0 1rem 1rem; }
.query-empty { color: var(--muted); }
.query-error {
  border: 1px solid var(--gold);
  border-radius: 0.5rem;
  color: #ffe6a0;
  margin: 1rem 0;
  padding: 0.8rem;
}

.readonly-field {
  background: rgba(63, 185, 235, 0.1);
  border: 1px solid rgba(63, 185, 235, 0.45);
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-block;
  font-size: 0.9em;
  padding: 0.16rem 0.55rem;
}

.readonly-check { color: #a8ecc6; }
.readonly-unavailable { color: var(--muted); }

.feature-heading {
  align-items: end;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  margin: 0.8rem 0 1rem;
  padding-bottom: 0.85rem;
}

.feature-heading h1,
.feature-heading h2,
.feature-heading p { margin: 0; }
.feature-heading p { color: var(--muted); margin-top: 0.3rem; }
.feature-kicker { color: var(--gold); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }

.full-search {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0;
  padding: 1rem;
}

.search-results { display: grid; gap: 0.75rem; }
.search-result {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 0.25rem solid var(--line);
  border-radius: 0.45rem;
  padding: 0.85rem 1rem;
}
.search-result h3,
.search-result p { margin: 0; }
.search-result p { margin-top: 0.45rem; }
.search-path { color: var(--muted); font-size: 0.8rem; }
mark { background: #b37b13; color: #fff7de; padding: 0 0.1em; }
.empty-state { color: var(--muted); padding: 1.5rem 0; }

.note-relations {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding-top: 1rem;
}
.relation-columns { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.relation-columns section { background: var(--surface-raised); border-radius: 0.55rem; padding: 0.8rem 1rem; }
.relation-columns h3 { margin-top: 0; }

.graph-heading { align-items: center; }
.graph-count {
  background: var(--bs-panel-2, var(--surface-raised));
  border: 1px solid var(--bs-border, var(--border));
  border-radius: 999px;
  color: var(--bs-cyan-bright, var(--accent-strong));
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.32rem 0.7rem;
}
.graph-page { --graph-control-width: 18rem; }
.graph-workspace {
  background: #060c12;
  border: 1px solid var(--bs-border, var(--border));
  border-radius: 0.35rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--graph-control-width);
  min-height: 43rem;
  overflow: hidden;
}
.relationship-graph {
  background:
    radial-gradient(circle at 50% 45%, rgba(88, 185, 230, 0.08), transparent 43%),
    linear-gradient(rgba(29, 64, 87, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 64, 87, 0.07) 1px, transparent 1px),
    #05070f;
  background-size: auto, 32px 32px, 32px 32px, auto;
  cursor: grab;
  min-height: 43rem;
  overflow: hidden;
  position: relative;
  touch-action: none;
}
.relationship-graph:active { cursor: grabbing; }
.relationship-graph svg {
  display: block;
  height: 100%;
  min-height: 43rem;
  width: 100%;
}
.graph-hint {
  background: rgba(5, 11, 18, 0.86);
  border: 1px solid var(--bs-border, var(--border));
  border-radius: 999px;
  bottom: 0.8rem;
  color: var(--bs-muted, var(--muted));
  font-size: 0.72rem;
  left: 50%;
  padding: 0.35rem 0.7rem;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.relationship-lines line {
  marker-end: none;
  stroke: rgba(224, 90, 97, 0.48);
  stroke-linecap: round;
  transition: opacity 150ms ease;
}
.graph-show-arrows .relationship-lines line { marker-end: url(#graph-arrow); }
.relationship-lines marker path,
#graph-arrow path { fill: #e05a61; }
.graph-node { cursor: pointer; outline: none; transition: opacity 150ms ease; }
.graph-node circle {
  fill: color-mix(in srgb, var(--graph-node-colour) 22%, #070a16);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--graph-node-colour) 38%, transparent));
  stroke: var(--graph-node-colour);
  stroke-width: 2.4;
  transition: filter 120ms ease, stroke-width 120ms ease;
}
.graph-node text {
  fill: var(--bs-text, var(--text));
  font-size: 12px;
  paint-order: stroke;
  pointer-events: none;
  stroke: #05070f;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.graph-node:hover circle,
.graph-node:focus circle,
.graph-node.is-selected circle {
  filter: drop-shadow(0 0 12px var(--graph-node-colour));
  stroke: #fff;
  stroke-width: 4;
}
.graph-node.is-selected text { fill: #fff; font-weight: 800; }
.graph-node.is-filtered,
.relationship-lines line.is-filtered { opacity: 0; pointer-events: none; }
.graph-hide-labels .graph-node text { display: none; }
.graph-controls {
  background: #111820;
  border-left: 1px solid var(--bs-border, var(--border));
  color: var(--bs-text, var(--text));
  max-height: 48rem;
  overflow-y: auto;
}
.graph-controls section { border-bottom: 1px solid #57471f; padding: 0.9rem 1rem; }
.graph-controls h3 {
  color: var(--bs-silver, var(--text));
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}
.graph-controls label { color: var(--bs-muted, var(--muted)); display: grid; font-size: 0.78rem; gap: 0.38rem; margin-top: 0.65rem; }
.graph-controls input[type="search"] {
  background: #070a16;
  border: 1px solid var(--bs-border, var(--border));
  border-radius: 0.2rem;
  color: var(--bs-text, var(--text));
  width: 100%;
}
.graph-controls input[type="range"] { accent-color: var(--bs-cyan, var(--accent)); padding: 0; width: 100%; }
.graph-controls .graph-check { align-items: center; display: flex; gap: 0.45rem; }
.graph-check input { accent-color: var(--bs-cyan, var(--accent)); margin: 0; }
.graph-groups { display: grid; gap: 0.4rem; }
.graph-group-toggle {
  align-items: center;
  background: #070a16;
  border: 1px solid var(--bs-border, var(--border));
  border-radius: 0.2rem;
  color: var(--bs-text, var(--text));
  display: flex;
  font-size: 0.74rem;
  gap: 0.45rem;
  justify-content: flex-start;
  padding: 0.42rem 0.5rem;
  text-align: left;
  width: 100%;
}
.graph-group-toggle span {
  background: var(--graph-group-colour);
  border-radius: 999px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--graph-group-colour) 45%, transparent);
  height: 0.65rem;
  width: 0.65rem;
}
.graph-group-toggle[aria-pressed="false"] { opacity: 0.38; }
.graph-reset { margin-top: 0.9rem; width: 100%; }
.graph-selection { display: grid; gap: 0.55rem; }
.graph-selection strong { color: var(--bs-cyan-bright, var(--accent-strong)); }
.graph-selection small { color: var(--bs-muted, var(--muted)); overflow-wrap: anywhere; }
.graph-selection .button { justify-content: center; margin-top: 0.35rem; text-align: center; }
.graph-selection .is-disabled { opacity: 0.45; pointer-events: none; }
.graph-accessible-list { margin-top: 1rem; }
.graph-accessible-list > summary { color: var(--bs-muted, var(--muted)); cursor: pointer; font-size: 0.8rem; }
.relationship-list { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); list-style: none; padding: 0; }
.relationship-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 0.45rem; display: grid; gap: 0.25rem; padding: 0.7rem; }
.relationship-card span { color: var(--muted); font-size: 0.8rem; }

@media (max-width: 1120px) {
  .graph-workspace { grid-template-columns: 1fr; }
  .graph-controls {
    border-left: 0;
    border-top: 1px solid var(--bs-border, var(--border));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }
  .graph-controls section { border-bottom: 0; border-right: 1px solid #57471f; }
}

@media (max-width: 680px) {
  .graph-heading { align-items: flex-start; }
  .graph-workspace,
  .relationship-graph,
  .relationship-graph svg { min-height: 34rem; }
  .graph-controls { display: block; }
  .graph-controls section { border-bottom: 1px solid #57471f; border-right: 0; }
  .graph-hint { display: none; }
}

.canvas-viewport {
  background: radial-gradient(circle, rgba(63, 185, 235, 0.08), transparent 70%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: auto;
  padding: 0.75rem;
}
.canvas-viewport svg { display: block; min-width: 42rem; width: 100%; }
.canvas-edges line { stroke: var(--line); stroke-width: 2; }
.canvas-node rect { fill: var(--surface-raised); stroke: var(--border); stroke-width: 2; }
.canvas-node text { fill: var(--text); font-size: 14px; }
.canvas-node:hover rect { stroke: var(--accent-strong); }
.canvas-outline { background: var(--surface-raised); border-radius: 0.55rem; margin-top: 1rem; padding: 0.75rem 1rem; }

body[data-reader-size="large"] .note,
body[data-reader-size="large"] .canvas-page { font-size: 1.14rem; line-height: 1.72; }

body[data-reader-theme="midnight"] {
  --background: #090a17;
  --background-raised: #17152b;
  --surface: #0e0d18;
  --surface-raised: #191728;
  --border: #47436d;
  --line: #7e72d1;
  --accent: #a498ff;
  --accent-strong: #d0caff;
}

body[data-reader-theme="parchment"] {
  color-scheme: light;
  --background: #d8c9a5;
  --background-raised: #eadfbe;
  --surface: #f4e8c9;
  --surface-raised: #eadbb7;
  --border: #927c53;
  --line: #6f5b36;
  --text: #2f281d;
  --muted: #675a43;
  --accent: #70511f;
  --accent-strong: #51370e;
  --gold: #725318;
  --focus: #17669b;
  background: linear-gradient(135deg, #c9b990, var(--background) 48%, #e5d6b2);
}

body[data-reader-theme="parchment"] .sidebar { background: rgba(244, 232, 201, 0.97); }
body[data-reader-theme="parchment"] input,
body[data-reader-theme="parchment"] .reader-settings select { background: #fff4d5; color: var(--text); }
body[data-reader-theme="parchment"] .note-banner-overlay { background: linear-gradient(90deg, rgba(244, 232, 201, 0.96), rgba(244, 232, 201, 0.55), transparent); }
body[data-reader-theme="parchment"] .note-banner-overlay p { color: var(--muted); }

/* Campaign Starter Template layout. This mirrors the user's BS template
   language without loading Obsidian or third-party theme/plugin code. */
.note.bs-wiki-layout-test,
.note.bs-wiki {
  --bs-bg: #05070f;
  --bs-bg-2: #070a16;
  --bs-panel: #0d1326;
  --bs-panel-2: #0a0e1f;
  --bs-border: rgba(50, 101, 129, 0.45);
  --bs-border-bright: #326581;
  --bs-text: #dce8f0;
  --bs-muted: #8fa3bd;
  --bs-silver: #bec9d7;
  --bs-cyan: #58b9e6;
  --bs-cyan-bright: #8bdcff;
  --bs-red-group: #57471f;
  --bs-red-border: #dcae4d;
  --bs-gap: 0.62rem;
  --bs-radius: 4px;
  --bs-page-width: 2300px;
  --bs-rail-width: 450px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--bs-text);
  font-size: 0.9rem;
  line-height: 1.45;
  margin-inline: auto;
  max-width: var(--bs-page-width);
  padding: 0;
}

.note.bs-wiki-layout-test h1,
.note.bs-wiki-layout-test h2,
.note.bs-wiki-layout-test h3,
.note.bs-wiki h1,
.note.bs-wiki h2,
.note.bs-wiki h3 { font-family: Georgia, "Times New Roman", serif; }

.note.bs-wiki-layout-test > h1:first-of-type,
.note.bs-wiki > h1:first-of-type { font-size: 2.4rem; margin-top: 0; }

.note.bs-wiki-layout-test a,
.note.bs-wiki a { color: #58b9e6; font-weight: 700; text-decoration: none; }
.note.bs-wiki-layout-test a:hover,
.note.bs-wiki a:hover { color: #bdeafa; }

.note.bs-wiki-layout-test .callout,
.note.bs-wiki .callout { border-radius: var(--bs-radius); }

.note.bs-wiki-layout-test .callout-bs-shell,
.note.bs-wiki-layout-test .callout-bs-entity-shell,
.note.bs-wiki .callout-bs-shell,
.note.bs-wiki .callout-bs-entity-shell {
  align-items: start;
  background: transparent;
  border: 0;
  display: grid;
  gap: var(--bs-gap);
  grid-template-columns: minmax(0, 1fr) var(--bs-rail-width);
  margin: 0;
  overflow: visible;
  padding: 0;
}

.callout-bs-shell > .callout-title,
.callout-bs-shell > .callout-lead,
.callout-bs-entity-shell > .callout-title,
.callout-bs-entity-shell > .callout-lead,
.callout-bs-main > .callout-title,
.callout-bs-main > .callout-lead,
.callout-bs-rail > .callout-title,
.callout-bs-rail > .callout-lead,
.callout-bs-main-nav > .callout-title,
.callout-bs-main-nav > .callout-lead,
.callout-bs-grid-2 > .callout-title,
.callout-bs-grid-2 > .callout-lead,
.callout-bs-grid-3 > .callout-title,
.callout-bs-grid-3 > .callout-lead,
.callout-bs-grid-5 > .callout-title,
.callout-bs-grid-5 > .callout-lead { display: none; }

.note.bs-wiki-layout-test .callout-bs-main,
.note.bs-wiki-layout-test .callout-bs-rail,
.note.bs-wiki .callout-bs-main,
.note.bs-wiki .callout-bs-rail {
  background: transparent;
  border: 0;
  margin: 0;
  min-width: 0;
  overflow: visible;
  padding: 0;
}

.note.bs-wiki-layout-test .callout-bs-rail,
.note.bs-wiki .callout-bs-rail {
  align-self: start;
  font-size: 0.84rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  position: sticky;
  scrollbar-gutter: stable;
  top: 3.35rem;
}

.note-banner.bs-template-hero {
  border-color: var(--bs-border);
  border-radius: var(--bs-radius);
  min-height: 10.9rem;
  margin-bottom: 0.45rem;
}
.note-banner.bs-template-hero > img { height: 100%; }
.note-banner.bs-template-hero .note-banner-overlay {
  align-items: flex-end;
  background: linear-gradient(90deg, rgba(4, 9, 15, 0.98), rgba(4, 9, 15, 0.74) 50%, rgba(4, 9, 15, 0.14));
  min-height: 10.9rem;
  padding: 1.25rem 1.55rem;
}
.note-banner.bs-template-hero h1 {
  border: 0;
  color: #e7edf5;
  font: clamp(2.25rem, 3.5vw, 3.65rem)/0.98 Georgia, "Times New Roman", serif;
  margin: 0;
  padding: 0;
  text-shadow: 0 2px 12px #000;
}
.note-banner.bs-template-hero p { color: #65c7df; font: 1.02rem/1.3 Georgia, "Times New Roman", serif; }
.note-banner.bs-template-hero .note-banner-icon { color: var(--bs-cyan-bright); }

.note.bs-wiki-layout-test .callout-bs-main-nav,
.note.bs-wiki .callout-bs-main-nav {
  background: transparent;
  border: 0;
  margin: 0.42rem 0;
  padding: 0;
}
.callout-bs-main-nav > p:not(.callout-title):not(.callout-lead) {
  display: grid;
  gap: 0.24rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 0;
}
.callout-bs-main-nav > p > br { display: none; }
.callout-bs-main-nav > p > a,
.callout-bs-main-nav > .callout-content > p > a {
  align-items: center;
  background: linear-gradient(180deg, #0e1b28, #060d14);
  border: 1px solid var(--bs-border);
  color: var(--bs-silver) !important;
  display: flex;
  font-size: 0.65rem;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.3rem;
  text-align: center;
  text-transform: uppercase;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}
.callout-bs-main-nav > p > a:hover,
.callout-bs-main-nav > .callout-content > p > a:hover {
  background: #0d2738;
  border-color: var(--bs-cyan);
  color: #fff !important;
}
.callout-bs-main-nav > p > a.is-active,
.callout-bs-main-nav > .callout-content > p > a.is-active {
  background: linear-gradient(180deg, #198dc2, #0c5279);
  border-color: var(--bs-cyan);
  box-shadow: inset 0 -2px 0 rgba(139, 220, 255, 0.58);
  color: #fff !important;
}
.callout-bs-main-nav > p > a:focus-visible,
.callout-bs-main-nav > .callout-content > p > a:focus-visible {
  outline-offset: -3px;
}

.note.bs-wiki-layout-test .callout-bs-category-grid,
.note.bs-wiki .callout-bs-category-grid {
  background: linear-gradient(180deg, rgba(8, 20, 31, 0.98), rgba(4, 12, 18, 0.98));
  border: 1px solid var(--bs-border);
  margin: 0.42rem 0;
  overflow: hidden;
  padding: 0;
}
.callout-bs-category-grid > .callout-title {
  background: linear-gradient(90deg, #144869, #0a2133);
  border-bottom: 1px solid var(--bs-border);
  color: #dcebf5;
  margin: 0;
  min-height: 1.9rem;
  padding: 0.32rem 0.65rem;
}
.callout-bs-category-grid > p:not(.callout-title):not(.callout-lead) {
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0.5rem;
}
.callout-bs-category-grid > p > br { display: none; }
.callout-bs-category-grid > p > a,
.callout-bs-category-grid > p > strong,
.callout-bs-category-grid > p > .bs-unavailable-link {
  align-items: center;
  background: linear-gradient(180deg, #0d1a26, #060d14);
  border: 1px solid var(--bs-border);
  color: var(--bs-silver) !important;
  display: flex;
  font: 700 0.78rem/1.15 Georgia, "Times New Roman", serif;
  justify-content: center;
  margin: 0;
  min-height: 2.55rem;
  padding: 0.4rem;
  text-align: center;
}
.callout-bs-category-grid > p > strong > a,
.callout-bs-category-grid > p > strong > .bs-unavailable-link {
  align-items: center;
  color: inherit !important;
  display: flex;
  justify-content: center;
  min-height: 100%;
  text-decoration: none;
  width: 100%;
}
.callout-bs-category-grid > p > strong {
  background: linear-gradient(180deg, #134b6c, #082333);
  border-color: var(--bs-cyan);
}
.callout-bs-category-grid > p > .bs-unavailable-link,
.callout-bs-category-grid > p > strong > .bs-unavailable-link {
  cursor: default;
  opacity: 0.72;
}
.callout-bs-category-grid > p > a:hover,
.callout-bs-category-grid > p > strong:hover { background: #0d2738; border-color: var(--bs-cyan); color: #fff !important; }

.note.bs-wiki-layout-test .callout-bs-grid-2,
.note.bs-wiki-layout-test .callout-bs-grid-3,
.note.bs-wiki-layout-test .callout-bs-grid-5,
.note.bs-wiki .callout-bs-grid-2,
.note.bs-wiki .callout-bs-grid-3,
.note.bs-wiki .callout-bs-grid-5 {
  background: transparent;
  border: 0;
  display: grid;
  gap: var(--bs-gap);
  margin: 0 0 var(--bs-gap);
  overflow: visible;
  padding: 0;
}
.callout-bs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.callout-bs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.callout-bs-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Record tables on the Transcript and Summary homes lead with a date, which
   needs only enough room for YYYY-MM-DD. Giving the date column a fixed narrow
   width hands the rest to the title column, which is the one that wraps.
   Scoped to those two section homes so dashboards elsewhere — whose first
   column is the long one — keep their own proportions. */
.shell .note.bs-transcript-home .callout[data-callout="bs-grid-3"] .query-table,
.shell .note.bs-summary-home .callout[data-callout="bs-grid-3"] .query-table {
  table-layout: fixed;
  width: 100%;
}

.shell .note.bs-transcript-home .callout[data-callout="bs-grid-3"] .query-table th:first-child,
.shell .note.bs-transcript-home .callout[data-callout="bs-grid-3"] .query-table td:first-child,
.shell .note.bs-summary-home .callout[data-callout="bs-grid-3"] .query-table th:first-child,
.shell .note.bs-summary-home .callout[data-callout="bs-grid-3"] .query-table td:first-child {
  white-space: nowrap;
  width: 6.4rem;
}

/* Status/audit trails sit at the end and are short words; cap them too so the
   title column in the middle absorbs everything that is left. */
.shell .note.bs-transcript-home .callout[data-callout="bs-grid-3"] .query-table th:last-child,
.shell .note.bs-transcript-home .callout[data-callout="bs-grid-3"] .query-table td:last-child,
.shell .note.bs-summary-home .callout[data-callout="bs-grid-3"] .query-table th:last-child,
.shell .note.bs-summary-home .callout[data-callout="bs-grid-3"] .query-table td:last-child {
  width: 7rem;
}

/* ==================================================================
   SESSION-DATE FILTER — one input narrowing every record table at once.
   ================================================================== */
.shell .note .callout[data-callout="bs-date-filter"] {
  background: transparent !important;
  border: 1px solid rgba(50, 101, 129, 0.45);
  border-radius: var(--bs-radius, 4px);
}

.shell .note .callout[data-callout="bs-date-filter"] > .callout-title {
  background: linear-gradient(90deg, #0e3348, #0a2334);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.date-filter-control {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.date-filter-input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(88, 185, 230, 0.4);
  border-radius: var(--bs-radius, 4px);
  color: var(--text, #dce8f0);
  flex: 1 1 22rem;
  font-size: 0.85rem;
  max-width: 30rem;
  padding: 0.4rem 0.65rem;
}

.date-filter-input:focus-visible {
  border-color: var(--sigil-blue, #58b9e6);
  outline: 2px solid rgba(88, 185, 230, 0.35);
  outline-offset: 1px;
}

.date-filter-status {
  color: var(--muted, #8fa3bd);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.date-filter-empty {
  color: var(--muted, #8fa3bd);
  font-style: italic;
  padding: 0.5rem 0.7rem;
  text-align: center;
}

/* ==================================================================
   WIKI NAVIGATION FOOTER — one dense link table closing every page,
   in place of the per-page category button grids.
   ================================================================== */
.shell .note .callout[data-callout="bs-wiki-nav"] {
  background: transparent !important;
  border: 1px solid rgba(50, 101, 129, 0.55);
  border-radius: var(--bs-radius, 4px);
  margin-top: 1.4rem;
}

/* Dark blue, no violet: the footer title carries pale cyan text and needs a
   deeper, plainer ground than the panel headers to stay legible. */
.shell .note .callout[data-callout="bs-wiki-nav"] > .callout-title {
  background: linear-gradient(90deg, #0e3348, #0a2334);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
}

.shell .note .callout[data-callout="bs-wiki-nav"] table {
  border-collapse: collapse;
  width: 100%;
}

/* The header row only labels the columns for a screen reader; the table
   reads as a nav block, so hide it visually. */
.shell .note .callout[data-callout="bs-wiki-nav"] thead {
  display: none;
}

.shell .note .callout[data-callout="bs-wiki-nav"] td {
  border: 1px solid rgba(50, 101, 129, 0.28);
  font-size: 0.82rem;
  line-height: 1.75;
  padding: 6px 12px;
  vertical-align: top;
}

/* First cell is the row label: narrow, centred, quieter ground. */
.shell .note .callout[data-callout="bs-wiki-nav"] td:first-child {
  background: rgba(0, 0, 0, 0.3);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  width: 11rem;
}

.shell .note .callout[data-callout="bs-wiki-nav"] td:last-child {
  background: rgba(12, 37, 40, 0.28);
}

/* Summary ran two-up while the page was narrow and its tables were being
   squeezed behind scrollbars. The wider centred measure fixed that, and the
   section now carries three record tables meant to sit side by side, so it
   follows the vault's three-up reading like every other section. */

.note.bs-wiki-layout-test .callout-bs-panel,
.note.bs-wiki-layout-test .callout-bs-info,
.note.bs-wiki-layout-test .callout-bs-secret,
.note.bs-wiki-layout-test .callout-bs-filter,
.note.bs-wiki .callout-bs-panel,
.note.bs-wiki .callout-bs-info,
.note.bs-wiki .callout-bs-secret,
.note.bs-wiki .callout-bs-filter {
  background: linear-gradient(180deg, rgba(10, 24, 36, 0.98), rgba(4, 12, 18, 0.98));
  border: 1px solid var(--bs-border);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}
.callout-bs-panel > .callout-title,
.callout-bs-info > .callout-title,
.callout-bs-secret > .callout-title,
.callout-bs-filter > .callout-title {
  background: linear-gradient(90deg, #154969, #0b2436 72%, rgba(7, 17, 26, 0.25));
  border-bottom: 1px solid var(--bs-border);
  color: #dcebf5;
  margin: 0;
  min-height: 1.95rem;
  padding: 0.34rem 0.65rem;
}
.callout-bs-secret > .callout-title { background: linear-gradient(90deg, #333257, #13162a); }
.callout-bs-filter > .callout-title { background: linear-gradient(90deg, #273844, #101b24); }
.callout-bs-panel > :not(.callout-title):not(.callout-lead),
.callout-bs-info > :not(.callout-title):not(.callout-lead),
.callout-bs-secret > :not(.callout-title):not(.callout-lead),
.callout-bs-filter > :not(.callout-title):not(.callout-lead) { margin-left: 0.65rem; margin-right: 0.65rem; }
.callout-bs-panel > .query-view,
.callout-bs-info > .query-view { margin-bottom: 0.65rem; margin-top: 0.65rem; }
.callout-bs-panel li::marker,
.callout-bs-info li::marker { color: var(--bs-red-border); }

.note.bs-wiki-layout-test .query-view,
.note.bs-wiki .query-view { background: #06101a; border-color: var(--bs-border); border-radius: 2px; }
.note.bs-wiki-layout-test .query-view > summary,
.note.bs-wiki .query-view > summary { color: var(--bs-cyan-bright); font-size: 0.75rem; }
.note.bs-wiki-layout-test .query-table th,
.note.bs-wiki .query-table th { background: linear-gradient(90deg, #17486b, #5b252b); color: #e7edf5; }
.note.bs-wiki-layout-test .query-table td,
.note.bs-wiki .query-table td { background: rgba(5, 13, 19, 0.7); }

/* The flat cell colour above outranks the vault's own striping rule
   (`.bs-wiki-layout-test tbody tr:nth-child(even) td`), which is why query
   and Bases tables rendered as one solid block. Restate the stripe at
   matching specificity. Alternate rows step DOWN into shadow rather than up,
   so a long table reads dark, darker, dark. */
.note.bs-wiki-layout-test .query-table tbody tr:nth-child(even) td,
.note.bs-wiki .query-table tbody tr:nth-child(even) td,
.note.bs-wiki-layout-test .markdown-rendered-table tbody tr:nth-child(even) td,
.note.bs-wiki .markdown-rendered-table tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.42);
}

.note.bs-wiki-layout-test .callout-bs-panel > table,
.note.bs-wiki .callout-bs-panel > table { width: calc(100% - 1.3rem); }

.note.bs-wiki-layout-test .bs-base-placeholder,
.note.bs-wiki-layout-test .bs-missing-embed,
.note.bs-wiki .bs-base-placeholder,
.note.bs-wiki .bs-missing-embed {
  background: #06101a;
  border: 1px dashed var(--bs-border);
  color: var(--bs-muted);
  display: block;
  font-size: 0.78rem;
  margin: 0.65rem;
  padding: 0.65rem 0.75rem;
}

@media (max-width: 1280px) {
  .note.bs-wiki-layout-test .callout-bs-shell,
  .note.bs-wiki-layout-test .callout-bs-entity-shell,
  .note.bs-wiki .callout-bs-shell,
  .note.bs-wiki .callout-bs-entity-shell { grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); }
  .callout-bs-main-nav > p:not(.callout-title):not(.callout-lead) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .note.bs-wiki-layout-test .callout-bs-shell,
  .note.bs-wiki-layout-test .callout-bs-entity-shell,
  .note.bs-wiki .callout-bs-shell,
  .note.bs-wiki .callout-bs-entity-shell { display: block; }
  .note.bs-wiki-layout-test .callout-bs-rail,
  .note.bs-wiki .callout-bs-rail {
    margin-top: var(--bs-gap);
    max-height: none;
    overflow: visible;
    position: static;
    scrollbar-gutter: auto;
  }
  .callout-bs-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .portal-appbar { grid-template-columns: 2.6rem 1px 1fr; }
  .portal-app-tab { display: none; }
  .callout-bs-main-nav > p:not(.callout-title):not(.callout-lead),
  .callout-bs-category-grid > p:not(.callout-title):not(.callout-lead) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callout-bs-grid-2,
  .callout-bs-grid-3,
  .callout-bs-grid-5 { grid-template-columns: 1fr; }
}

/* Browser bridge for the finished pc-wiki-layout-test.css template system.
   Markdown-it keeps Obsidian callout data attributes but does not add
   Obsidian's extra .callout-content wrapper, so these rules map the same
   template language onto the safe read-only portal DOM. */
.note.pc-wiki-layout-test {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--pc-text);
  margin-inline: auto;
  max-width: var(--pc-page-width);
  padding: 0;
}

.note.pc-wiki-layout-test .callout-pc-shell {
  align-items: start;
  background: transparent;
  border: 0;
  display: grid;
  gap: var(--pc-gap);
  grid-template-columns: minmax(0, 1fr) var(--pc-rail-width);
  margin: 0.6rem 0 0;
  overflow: visible;
  padding: 0;
}

.callout-pc-shell > .callout-title,
.callout-pc-shell > .callout-lead,
.callout-pc-main > .callout-title,
.callout-pc-main > .callout-lead,
.callout-pc-rail > .callout-title,
.callout-pc-rail > .callout-lead,
.callout-pc-global-nav > .callout-title,
.callout-pc-global-nav > .callout-lead,
.callout-pc-page-tabs > .callout-title,
.callout-pc-page-tabs > .callout-lead { display: none; }

.note.pc-wiki-layout-test .callout-pc-main,
.note.pc-wiki-layout-test .callout-pc-rail {
  background: transparent;
  border: 0;
  margin: 0;
  min-width: 0;
  overflow: visible;
  padding: 0;
}

.note.pc-wiki-layout-test .callout-pc-rail {
  align-self: start;
  position: sticky;
  top: 3.35rem;
}

.note.pc-wiki-layout-test :is(.callout-pc-global-nav, .callout-pc-page-tabs) {
  background: transparent;
  border: 0;
  margin: 0.5rem 0;
  padding: 0;
}

:is(.callout-pc-global-nav, .callout-pc-page-tabs) > p:not(.callout-title):not(.callout-lead) {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
}

.callout-pc-global-nav > p:not(.callout-title):not(.callout-lead) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

:is(.callout-pc-global-nav, .callout-pc-page-tabs) > p > br { display: none; }
:is(.callout-pc-global-nav, .callout-pc-page-tabs) > p > a {
  align-items: center;
  background: linear-gradient(180deg, #0d1b28, #060e16);
  border: 1px solid var(--pc-border);
  color: var(--pc-silver) !important;
  display: flex;
  font: 700 0.68rem/1.15 Georgia, "Times New Roman", serif;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 0;
  padding: 0.4rem;
  text-align: center;
  text-transform: uppercase;
}

.callout-pc-global-nav > p > a {
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

/* A section the visitor projection removed leaves no dead tab behind
   (17 September 2026): the word stays in prose, the navigation drops it. */
:is(.callout-pc-global-nav, .callout-pc-page-tabs, .callout-bs-main-nav) > p > .bs-visitor-hidden,
:is(.callout-pc-global-nav, .callout-pc-page-tabs, .callout-bs-main-nav) > .callout-content > p > .bs-visitor-hidden {
  display: none;
}

.note.pc-wiki-layout-test :is(.callout-pc-panel, .callout-pc-secret, .callout-pc-note) {
  margin: 0 0 var(--pc-gap);
  padding: 0;
}

.note.pc-wiki-layout-test :is(.callout-pc-panel, .callout-pc-secret, .callout-pc-note) > .callout-title {
  background: linear-gradient(90deg, #154969, #0b2436 72%, rgba(7, 17, 26, 0.25));
  margin: 0;
  padding: 0.45rem 0.7rem;
}

.note.pc-wiki-layout-test :is(.callout-pc-panel, .callout-pc-secret, .callout-pc-note) > :not(.callout-title):not(.callout-lead) {
  margin-left: 0.7rem;
  margin-right: 0.7rem;
}

/* Direct-child equivalents for the newest BS template's richer layouts. */
.note.bs-wiki-layout-test .callout-bs-context,
.note.bs-wiki .callout-bs-context {
  background: linear-gradient(90deg, rgba(10, 31, 45, 0.96), rgba(5, 15, 24, 0.96));
  border: 1px solid var(--bs-border);
  margin: 0.45rem 0;
  padding: 0.45rem 0.75rem;
}
.callout-bs-context > :is(.callout-title, .callout-lead) { display: none; }
.callout-bs-context > p { margin: 0; }

.note.bs-wiki-layout-test :is(.callout-bs-quest-dashboard, .callout-bs-item-overview),
.note.bs-wiki :is(.callout-bs-quest-dashboard, .callout-bs-item-overview) {
  align-items: start;
  background: transparent;
  border: 0;
  display: grid;
  gap: var(--bs-gap);
  margin: 0 0 var(--bs-gap);
  overflow: visible;
  padding: 0;
}
.callout-bs-quest-dashboard { grid-template-columns: minmax(0, 3.2fr) minmax(15rem, 1fr); }
.callout-bs-item-overview { grid-template-columns: minmax(12rem, 0.8fr) repeat(3, minmax(0, 1fr)); }
:is(.callout-bs-quest-dashboard, .callout-bs-item-overview) > :is(.callout-title, .callout-lead) { display: none; }

.note.bs-wiki-layout-test .callout-bs-quest-column,
.note.bs-wiki .callout-bs-quest-column {
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bs-gap);
  margin: 0;
  min-width: 0;
  overflow: visible;
  padding: 0;
}
.callout-bs-quest-column > :is(.callout-title, .callout-lead) { display: none; }

.note.bs-wiki-layout-test .callout-bs-equipment,
.note.bs-wiki .callout-bs-equipment {
  background: #1e1e1e;
  border: 1px solid var(--bs-border-bright);
  margin: 0 0 0.5rem;
  overflow: hidden;
  padding: 0;
}
.callout-bs-equipment > .callout-title {
  background: linear-gradient(180deg, #245f83, #174766);
  color: #fff;
  justify-content: center;
  margin: 0;
  padding: 0.45rem 0.65rem;
}

@media (max-width: 1180px) {
  .note.pc-wiki-layout-test .callout-pc-shell,
  .callout-bs-quest-dashboard { grid-template-columns: 1fr; }
  .note.pc-wiki-layout-test .callout-pc-rail { margin-top: var(--pc-gap); position: static; }
  .callout-bs-item-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callout-pc-global-nav > p:not(.callout-title):not(.callout-lead) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  :is(.callout-pc-global-nav, .callout-pc-page-tabs) > p:not(.callout-title):not(.callout-lead),
  .callout-bs-item-overview { grid-template-columns: 1fr; }
}

/* Public Summurizer website ------------------------------------------------- */
.public-site {
  background:
    radial-gradient(circle at 76% 4%, rgba(36, 136, 184, 0.16), transparent 30rem),
    linear-gradient(155deg, #050a10, #07121c 52%, #05070f);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.public-header {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(5, 11, 18, 0.9);
  border-bottom: 1px solid rgba(50, 101, 129, 0.68);
  display: grid;
  gap: 1.2rem;
  grid-template-columns: auto 1fr auto;
  min-height: 4.6rem;
  padding: 0 clamp(1rem, 4vw, 3.5rem);
  position: sticky;
  top: 0;
  z-index: 80;
}

.public-brand {
  align-items: center;
  color: #eaf7ff;
  display: inline-flex;
  gap: 0.75rem;
  text-decoration: none;
}

.public-brand > span {
  align-items: center;
  background: linear-gradient(145deg, #1d6c92, #0b2e42);
  border: 1px solid var(--accent);
  color: #ddf7ff;
  display: inline-flex;
  font: 800 1rem/1 Georgia, "Times New Roman", serif;
  height: 2.25rem;
  justify-content: center;
  transform: rotate(45deg);
  width: 2.25rem;
}

.public-brand > span i { display: inline-block; font-style: normal; transform: rotate(-45deg); }
.public-brand strong { font: 700 1.08rem/1 Georgia, "Times New Roman", serif; letter-spacing: 0.03em; }

.public-nav {
  align-items: center;
  display: flex;
  gap: 0.2rem;
  justify-content: center;
}

.public-nav a {
  border-bottom: 2px solid transparent;
  color: #9bacba;
  font-size: 0.78rem;
  font-weight: 750;
  padding: 1.45rem 0.85rem 1.25rem;
  text-decoration: none;
}

.public-nav a:hover,
.public-nav a.is-active {
  border-bottom-color: var(--accent);
  color: #e5f6ff;
}

.public-notes-button {
  background: linear-gradient(135deg, var(--accent), #278db9);
  border-radius: 0.45rem;
  color: #041019;
  font-size: 0.77rem;
  font-weight: 850;
  padding: 0.65rem 0.9rem;
  text-decoration: none;
}

.public-main {
  flex: 1;
  margin: 0 auto;
  max-width: 94rem;
  padding: 0 clamp(1rem, 4vw, 3.5rem) clamp(3rem, 8vw, 7rem);
  width: 100%;
}

.public-hero {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 6rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
  min-height: min(48rem, calc(100vh - 4.6rem));
  padding: clamp(3rem, 8vw, 8rem) 0;
}

.public-kicker {
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  margin: 0;
  text-transform: uppercase;
}

.public-hero h1,
.public-page-heading h1 {
  color: #eef8fd;
  font: 700 clamp(3rem, 8vw, 6.8rem)/0.92 Georgia, "Times New Roman", serif;
  letter-spacing: -0.045em;
  margin: 0.65rem 0 1.25rem;
  max-width: 12ch;
}

.public-hero-lead {
  color: #aebdca;
  font-size: clamp(1rem, 2vw, 1.22rem);
  line-height: 1.72;
  max-width: 46rem;
}

.public-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}

.public-session-card {
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(88, 185, 230, 0.025) 22px 24px),
    linear-gradient(145deg, rgba(12, 31, 45, 0.98), rgba(7, 16, 25, 0.98));
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0.7rem;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.session-card-top {
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem;
}

.session-card-top span { color: var(--gold); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.14em; }
.session-card-top strong { color: #eaf6fc; font: 700 1.3rem Georgia, "Times New Roman", serif; }
.public-session-card ol { list-style: none; margin: 0; padding: 0.35rem 1.25rem 1.1rem; }
.public-session-card li { align-items: center; border-bottom: 1px solid rgba(29, 64, 87, 0.58); display: grid; gap: 0.9rem; grid-template-columns: 2.2rem 1fr; padding: 0.95rem 0; }
.public-session-card li:last-child { border-bottom: 0; }
.public-session-card li > span { color: var(--accent); font: 800 0.72rem ui-monospace, Consolas, monospace; }
.public-session-card li div { display: grid; gap: 0.2rem; }
.public-session-card li strong { color: #dce8f0; font-size: 0.88rem; }
.public-session-card li small { color: var(--muted); }

.public-section { border-top: 1px solid rgba(50, 101, 129, 0.45); padding: clamp(3rem, 7vw, 6rem) 0; }
.public-section-heading { display: grid; gap: 0.55rem; margin-bottom: 2rem; max-width: 54rem; }
.public-section-heading h2,
.guide-contribute h2 { color: #eaf5fb; font: 700 clamp(2rem, 5vw, 3.7rem)/1.05 Georgia, "Times New Roman", serif; margin: 0; }

.public-feature-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-feature-grid article,
.public-command-pair article {
  background: rgba(9, 23, 34, 0.88);
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 1.3rem;
}

.public-feature-grid article > span { color: var(--gold); font: 800 0.68rem ui-monospace, Consolas, monospace; letter-spacing: 0.12em; }
.public-feature-grid h3 { color: #e3eff6; font: 700 1.08rem Georgia, "Times New Roman", serif; margin: 0.65rem 0 0.4rem; }
.public-feature-grid p,
.public-command-pair p { color: var(--muted); font-size: 0.86rem; line-height: 1.62; margin: 0; }

.public-command-pair { align-items: center; display: grid; gap: 1rem; grid-template-columns: 1fr auto 1fr; }
.public-command-pair > div { color: var(--accent); font-size: 1.8rem; }
.public-command-pair code { color: var(--accent-strong); display: block; font-size: 1rem; margin-bottom: 0.7rem; }
.text-link { display: inline-block; font-size: 0.84rem; font-weight: 800; margin-top: 1.4rem; }

.public-page-heading {
  border-bottom: 1px solid rgba(50, 101, 129, 0.55);
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
}
.public-page-heading h1 { font-size: clamp(3rem, 7vw, 5.6rem); margin-bottom: 0.8rem; overflow-wrap: anywhere; }
/* A command card or group reached by a guide's link lands below the bar. */
.command-group, .public-command-card { scroll-margin-top: 5.5rem; }
@media (max-width: 560px) {
  /* A signed-in name that is one long word overflowed the Account page at
     3rem (website QA report, 11 September 2026). */
  .public-page-heading h1 { font-size: clamp(2rem, 10vw, 3rem); }
}
.public-page-heading > p:last-child { color: #aebdca; line-height: 1.65; max-width: 50rem; }

.command-group { padding-top: 3rem; }
.command-group h2 { color: #e7f2f8; font: 700 1.65rem Georgia, "Times New Roman", serif; margin: 0 0 1rem; }
.command-grid { align-items: start; display: grid; gap: 0.7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-command-card { background: rgba(9, 23, 34, 0.88); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; }
.public-command-card > div { align-items: center; display: flex; gap: 0.7rem; justify-content: space-between; }
.public-command-card code { color: var(--accent-strong); font-size: 0.9rem; font-weight: 800; }
.public-command-card span { background: rgba(88, 185, 230, 0.1); border: 1px solid rgba(88, 185, 230, 0.25); border-radius: 999px; color: #9ec8dc; font-size: 0.62rem; padding: 0.2rem 0.45rem; }
.public-command-card p { color: var(--muted); font-size: 0.82rem; line-height: 1.5; margin: 0.55rem 0 0; }
.command-args { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.45rem 0 0; }
.command-arg { background: rgba(88, 185, 230, 0.12); border: 1px solid rgba(88, 185, 230, 0.35); border-radius: 0.3rem; color: #bfe3f5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; line-height: 1.4; padding: 0.05rem 0.4rem; }
.command-arg.is-optional { background: transparent; border-style: dashed; color: #8fb3c6; }
.command-arg.is-optional::after { content: "?"; opacity: 0.7; }
.command-example { background: rgba(4, 12, 20, 0.75); border: 1px solid var(--border); border-radius: 0.45rem; display: grid; font-size: 0.78rem; gap: 0.2rem 0.6rem; grid-template-columns: max-content 1fr; line-height: 1.45; margin: 0.65rem 0 0; padding: 0.5rem 0.65rem; }
.command-example dt { color: #7fa6bb; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding-top: 0.1rem; text-transform: uppercase; }
.command-example dd { color: #d6e4ee; margin: 0; overflow-wrap: anywhere; }
.command-example dd:first-of-type { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem; }
.command-watch { color: var(--accent-strong); display: inline-block; font-size: 0.76rem; font-weight: 700; margin-top: 0.55rem; }
.command-group-note { color: var(--muted); margin: -0.4rem 0 1rem; max-width: 60rem; }
.public-mention-card code { font-size: 0.82rem; overflow-wrap: anywhere; }
.public-info-strip { align-items: center; background: rgba(210, 173, 85, 0.07); border: 1px solid rgba(210, 173, 85, 0.35); border-radius: 0.5rem; display: flex; gap: 1rem; margin-top: 3rem; padding: 1rem; }
.public-info-strip strong { color: #e3c777; white-space: nowrap; }
.public-info-strip span { color: #adbac6; font-size: 0.82rem; }

.guide-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 3rem; }
.guide-grid article { background: rgba(9, 23, 34, 0.9); border: 1px solid var(--border); border-radius: 0.55rem; padding: clamp(1.2rem, 3vw, 2rem); }
.guide-grid article > span { color: var(--gold); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.12em; }
.guide-grid h2 { color: #e8f3f9; font: 700 1.45rem Georgia, "Times New Roman", serif; margin: 0.65rem 0 1rem; }
.guide-grid ol { color: #aab8c5; line-height: 1.8; padding-left: 1.25rem; }
.guide-grid a { font-size: 0.8rem; font-weight: 800; }
.guide-start .public-actions { margin-top: 1.2rem; }
.guide-layout { display: grid; gap: clamp(1.2rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr); justify-content: center; padding-top: 3rem; }
.guide-contents { align-self: start; background: rgba(9, 23, 34, 0.9); border: 1px solid var(--border); border-radius: 0.55rem; padding: 1.2rem 1.4rem; }
.public-site .guide-contents ol { color: #aab8c5; font-size: 0.92rem; line-height: 1.55; list-style: none; margin: 0.7rem 0 0; padding-left: 0; }
.public-site .guide-contents li { margin: 0.35rem 0; }
.public-site .guide-contents a { color: #cfe3ee; font-weight: 700; text-decoration: none; }
.public-site .guide-contents a:hover { color: var(--accent-strong); }
.guide-contents .button { box-sizing: border-box; margin-top: 1.1rem; text-align: center; width: 100%; }
@media (min-width: 981px) {
  .guide-layout { grid-template-columns: 17rem minmax(0, 64rem); }
  .guide-contents { position: sticky; top: 5.5rem; }
}
.guide-article { display: grid; gap: 0.8rem; min-width: 0; }
.guide-clip { margin: 0.2rem 0 0.8rem; scroll-margin-top: 5.5rem; }
.guide-clip video { aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--border); border-radius: 0.8rem; display: block; max-width: 56rem; width: 100%; }
.guide-clip figcaption { color: #aab8c5; font-size: 0.9rem; margin-top: 0.45rem; }
.guide-tutorial { margin: 0 0 2rem; }
.guide-tutorial video { max-width: 100rem; scroll-margin-top: 5.5rem; }
.guide-tutorial figcaption { font-size: 1rem; }
.public-site .guide-article article { scroll-margin-top: 5.5rem; }
.public-site .guide-article article { background: rgba(9, 23, 34, 0.9); border: 1px solid var(--border); border-radius: 0.55rem; padding: clamp(1.2rem, 3vw, 2rem); }
.public-site .guide-article article > span { color: var(--gold); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.12em; }
.public-site .guide-article h2 { color: #e8f3f9; font: 700 1.45rem Georgia, "Times New Roman", serif; margin: 0.65rem 0 1rem; }
.public-site .guide-article h3 { color: #d7e7f0; font: 700 1.05rem Georgia, "Times New Roman", serif; margin: 1.4rem 0 0.4rem; }
.public-site .guide-article p, .public-site .guide-article li { color: #aab8c5; font-size: 1rem; line-height: 1.75; }
.public-site .guide-article p { margin: 0.6rem 0; }
.public-site .guide-article ol, .public-site .guide-article ul { margin: 0.4rem 0; padding-left: 1.25rem; }
.public-site .guide-article li { margin: 0.2rem 0; }
.public-site .guide-article code { color: var(--accent-strong); font-weight: 800; }
.public-site .guide-article a { font-weight: 800; }
.public-site .guide-article p.aside { border-left: 3px solid var(--gold); color: #cdbf92; font-style: italic; margin: 0.9rem 0; padding-left: 0.9rem; }
.public-site .guide-article p.example { background: rgba(5, 14, 22, 0.8); border: 1px solid var(--border); border-radius: 0.45rem; margin: 0.6rem 0; padding: 0.6rem 0.8rem; }
.public-site .guide-article p.example code { font-size: 0.9rem; }
.guide-invite { align-items: center; display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.2rem; }
.guide-invite span { color: var(--muted); font-size: 0.82rem; line-height: 1.5; max-width: 28rem; }
/* A big screen: fill the page's own width and read larger (Harry, 12 September 2026). */
@media (min-width: 1281px) {
  /* This page alone may outgrow the site's 94rem column (Harry: "make it wider"). */
  .public-site .public-main:has(.guide-layout) { max-width: 128rem; }
  .guide-layout { gap: 3.5rem; grid-template-columns: 20rem minmax(0, 100rem); }
  .guide-contents { padding: 1.6rem 1.8rem; }
  .public-site .guide-contents ol { font-size: 1.02rem; line-height: 1.6; }
  .public-site .guide-contents li { margin: 0.5rem 0; }
  .guide-article { gap: 1.1rem; }
  .public-site .guide-article article { padding: 2.4rem 2.8rem; }
  .public-site .guide-article h2 { font-size: 1.95rem; }
  .public-site .guide-article h3 { font-size: 1.28rem; margin-top: 1.7rem; }
  .public-site .guide-article p, .public-site .guide-article li { font-size: 1.14rem; line-height: 1.8; }
  .public-site .guide-article p.example code { font-size: 1.02rem; }
  .guide-invite span { font-size: 0.95rem; max-width: 34rem; }
}
@media (min-width: 1800px) {
  .public-site .guide-article p, .public-site .guide-article li { font-size: 1.22rem; line-height: 1.8; }
  .public-site .guide-article h2 { font-size: 2.15rem; }
  .public-site .guide-article h3 { font-size: 1.4rem; }
  .public-site .guide-contents ol { font-size: 1.1rem; }
  .public-site .guide-article p.example code { font-size: 1.1rem; }
}
.guide-contribute { background: linear-gradient(135deg, rgba(13, 43, 60, 0.78), rgba(8, 20, 30, 0.9)); border: 1px solid var(--border); border-radius: 0.6rem; margin-top: 0.8rem; padding: clamp(1.5rem, 4vw, 3rem); }
.guide-contribute p:last-child { color: var(--muted); line-height: 1.6; max-width: 48rem; }

.notes-access-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.65fr); padding-top: 3rem; }
.notes-access-card,
.notes-access-help { background: rgba(9, 23, 34, 0.94); border: 1px solid var(--border); border-radius: 0.6rem; padding: clamp(1.2rem, 3vw, 2rem); }
.notes-access-card { border-top: 3px solid var(--accent); }
.notes-access-card > button[type="submit"] { margin-top: 0.5rem; }
.notes-access-help { align-self: start; }
.notes-access-help > span { color: var(--gold); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.notes-access-help ol { color: #c1cfda; line-height: 1.7; padding-left: 1.2rem; }
.notes-access-help p { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; line-height: 1.55; margin-top: 1.2rem; padding-top: 1rem; }

.public-footer {
  align-items: center;
  background: #050a10;
  border-top: 1px solid rgba(50, 101, 129, 0.55);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  padding: 2rem clamp(1rem, 4vw, 3.5rem);
}
.public-footer > div { display: grid; gap: 0.25rem; }
.public-footer strong { color: #e8f4fa; font: 700 1rem Georgia, "Times New Roman", serif; }
.public-footer span { color: var(--muted); font-size: 0.75rem; }
.public-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.public-footer a { color: #9eafbd; font-size: 0.75rem; text-decoration: none; }

.portal-landing {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0 auto;
  max-width: 82rem;
  min-height: 100vh;
  padding: clamp(1.25rem, 5vw, 5rem) clamp(1rem, 4vw, 3rem);
  place-content: center;
}

.landing-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(88, 185, 230, 0.2), transparent 23rem),
    repeating-linear-gradient(135deg, transparent 0 26px, rgba(88, 185, 230, 0.025) 26px 28px),
    linear-gradient(145deg, rgba(8, 25, 38, 0.98), rgba(5, 13, 21, 0.98));
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0.8rem;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.35);
  overflow: hidden;
  padding: clamp(1.4rem, 5vw, 4.2rem);
  position: relative;
}

.landing-mark {
  align-items: center;
  background: linear-gradient(145deg, #1e668b, #0a2a3d);
  border: 1px solid #58b9e6;
  box-shadow: 0 0 2rem rgba(88, 185, 230, 0.18);
  color: #d7f5ff;
  display: flex;
  font: 800 1.45rem/1 Georgia, "Times New Roman", serif;
  height: 3rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  transform: rotate(45deg);
  width: 3rem;
}

.landing-mark span { transform: rotate(-45deg); }
.landing-mark::after {
  content: "";
  inset: 0.25rem;
  border: 1px solid rgba(139, 220, 255, 0.42);
  position: absolute;
}

.landing-eyebrow {
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  margin: 0;
  text-transform: uppercase;
}

.landing-hero h1 {
  color: #f2f8fc;
  font: 700 clamp(2.5rem, 7vw, 5.4rem)/0.98 Georgia, "Times New Roman", serif;
  letter-spacing: -0.035em;
  margin: 0.5rem 0 1rem;
  max-width: 13ch;
}

.landing-lead {
  color: #afc0cf;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
  max-width: 43rem;
}

.campaign-lookup {
  background: rgba(3, 10, 16, 0.68);
  border: 1px solid rgba(50, 101, 129, 0.8);
  border-radius: 0.65rem;
  margin-top: 2rem;
  max-width: 48rem;
  padding: clamp(0.85rem, 2vw, 1.15rem);
}

.campaign-lookup label {
  color: #d8e7f1;
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.55rem;
}

.campaign-lookup-control {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.campaign-lookup-control input {
  min-width: 0;
}

.campaign-lookup-control button {
  min-width: 9.5rem;
}

.landing-help {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0.75rem 0 0;
}

.landing-help strong { color: var(--accent-strong); }

.landing-features {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-features article {
  background: rgba(9, 23, 34, 0.92);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 1.2rem;
}

.landing-features span {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.landing-features h2 {
  color: #e8f2f8;
  font: 700 1.05rem/1.2 Georgia, "Times New Roman", serif;
  margin: 0.45rem 0;
}

.landing-features p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
  margin: 0;
}

.login-back {
  color: var(--muted);
  display: inline-block;
  font-size: 0.78rem;
  margin-bottom: 1.2rem;
  text-decoration: none;
}

.login-back:hover { color: var(--accent-strong); }

.login-card,
.message-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  margin: min(15vh, 8rem) auto;
  max-width: 30rem;
  padding: clamp(1.25rem, 5vw, 2rem);
}

.field {
  display: grid;
  gap: 0.45rem;
  margin: 1.1rem 0;
}

label {
  font-weight: 700;
}

input {
  background: #100e15;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  color: var(--text);
  font: inherit;
  padding: 0.75rem;
  width: 100%;
}

.password-control {
  align-items: stretch;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.password-toggle {
  min-width: 8.5rem;
  white-space: nowrap;
}

.error {
  color: var(--danger);
}

.notice {
  color: var(--accent);
}

.request-card {
  background: linear-gradient(145deg, rgba(9, 23, 34, 0.98), rgba(7, 16, 25, 0.98));
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0.55rem;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.24);
  margin: 1rem auto;
  max-width: 56rem;
  padding: clamp(1.1rem, 3vw, 2rem);
}

.request-card h2 { color: var(--accent-strong); margin: 0.15rem 0 0.5rem; }
.request-card .eyebrow { color: var(--gold); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em; }
.request-card .notice { background: rgba(88, 185, 230, 0.1); border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.75rem; }
.request-card .notice.error { background: rgba(255, 146, 157, 0.08); border-color: var(--red-border); color: var(--danger); }
.request-target { background: var(--background-raised); border: 1px solid var(--border); border-radius: 0.4rem; display: grid; gap: 0.35rem; grid-template-columns: 6rem minmax(0, 1fr); padding: 0.75rem; }
.request-target dt { color: var(--muted); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
.request-target dd { color: var(--text); margin: 0; overflow-wrap: anywhere; }
.request-form { display: grid; gap: 0.55rem; margin-top: 1rem; }
.request-form label { color: var(--accent-strong); font-size: 0.78rem; font-weight: 800; margin-top: 0.4rem; }
.request-form input,
.request-form select,
.request-form textarea { background: var(--background); border: 1px solid var(--border); border-radius: 0.4rem; color: var(--text); font: inherit; padding: 0.72rem; }
.request-form textarea { min-height: 12rem; resize: vertical; }
.request-form input:focus,
.request-form select:focus,
.request-form textarea:focus { border-color: var(--focus); outline: 2px solid rgba(241, 199, 91, 0.18); }
.request-form button { justify-self: start; margin-top: 0.65rem; }

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

@media (max-width: 760px) {
  .public-header {
    gap: 0.7rem;
    grid-template-columns: 1fr auto;
    padding-block: 0.75rem;
  }

  .public-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .public-nav a { padding: 0.7rem 0.65rem 0.55rem; white-space: nowrap; }
  .public-notes-button { grid-column: 2; grid-row: 1; }
  .public-hero { display: block; min-height: 0; padding-block: 4rem; }
  .public-session-card { margin-top: 2.5rem; }
  .public-feature-grid,
  .command-grid,
  .guide-grid,
  .notes-access-grid { grid-template-columns: 1fr; }
  .public-command-pair { grid-template-columns: 1fr; }
  .public-command-pair > div { transform: rotate(90deg); text-align: center; }
  .public-command-card > div { align-items: flex-start; flex-direction: column; }
  .public-info-strip,
  .public-footer { align-items: flex-start; flex-direction: column; }
  .public-page-heading h1 { font-size: clamp(2.7rem, 16vw, 4.5rem); }

  .portal-landing { place-content: start; }

  .campaign-lookup-control,
  .landing-features {
    grid-template-columns: 1fr;
  }

  .campaign-lookup-control button { width: 100%; }

  .shell {
    display: block;
  }

  .sidebar {
    border-bottom: 1px solid var(--border);
    border-right: 0;
    height: auto;
    max-height: 48vh;
    overflow-y: auto;
    padding: 1rem;
    position: static;
  }

  .content {
    padding: 1rem;
  }

  .folder-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .password-control {
    grid-template-columns: 1fr;
  }

  .dnd-warframe-campaign-home {
    display: block;
  }

  .dnd-warframe-campaign-home > .callout-wf-rail {
    position: static;
  }

  .statblock-field {
    gap: 0.1rem;
    grid-template-columns: 1fr;
  }

  .statblock-abilities {
    grid-template-columns: repeat(3, 1fr);
  }

  .vault-search-control,
  .full-search-control,
  .relation-columns {
    grid-template-columns: 1fr;
  }
}


/* Website-only campaign-home cleanup and multi-campaign switcher. */
.dnd-warframe-campaign-home {
  grid-template-columns: minmax(0, 2fr) minmax(21rem, 0.9fr);
}

.dnd-warframe-campaign-home > h1 {
  display: none;
}

.callout-wf-banner > .callout-title,
.callout-wf-banner p:not(:has(img)) {
  display: none;
}

.callout-wf-category-table p {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(5, minmax(7.5rem, 1fr));
  margin: 0.5rem 0;
}

.callout-wf-category-table p > a {
  align-items: center;
  background: rgba(16, 35, 46, 0.58);
  border: 1px solid var(--line);
  border-radius: 0.2rem;
  display: flex;
  font-size: 0.76rem;
  font-weight: 800;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.55rem;
  text-align: center;
  text-decoration: none;
}

.callout-wf-category-table p > a:hover {
  background: rgba(35, 127, 174, 0.32);
}

.query-table {
  table-layout: auto;
}

.query-table th,
.query-table td {
  hyphens: none;
  min-width: 7rem;
  overflow-wrap: normal;
  word-break: normal;
}

.query-table th:first-child,
.query-table td:first-child {
  min-width: 14rem;
}

.saved-campaign-grid {
  display: grid;
  gap: 1rem;
  /* At most four to a row, then a new row (Harry, 12 September 2026). */
  grid-template-columns: repeat(auto-fill, minmax(max(18rem, calc((100% - 3rem) / 4)), 1fr));
  margin: 1.5rem 0;
}

.saved-campaign-card {
  background: linear-gradient(145deg, rgba(14, 34, 46, 0.98), rgba(5, 14, 20, 0.98));
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  box-shadow: inset 0 1px rgba(135, 221, 255, 0.08);
  padding: 1.25rem;
}

.saved-campaign-card h2 {
  color: var(--accent-strong);
  margin: 0.25rem 0 0.55rem;
}

.saved-campaign-card p {
  color: var(--muted);
  min-height: 3rem;
}

.saved-campaign-kicker {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.saved-campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-start;
}

@media (max-width: 1400px) {
  .dnd-warframe-campaign-home {
    grid-template-columns: minmax(0, 1fr);
  }

  .dnd-warframe-campaign-home > .callout-wf-main,
  .dnd-warframe-campaign-home > .callout-wf-rail {
    grid-column: 1;
  }

  .dnd-warframe-campaign-home > .callout-wf-rail {
    position: static;
  }
}

@media (max-width: 850px) {
  .callout-wf-category-table p {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Summurizer private review image evidence */
.review-image-evidence {
  background: rgba(5, 18, 27, 0.72);
  border: 1px solid rgba(93, 191, 237, 0.24);
  border-radius: 0.55rem;
  margin-top: 1rem;
  padding: 1rem;
}

.review-image-evidence h3 {
  color: var(--accent-strong);
  margin: 0 0 0.75rem;
}

.review-evidence-gallery {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: 0.85rem;
}

.review-evidence-image {
  background: #02080d;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  display: block;
  overflow: hidden;
}

.review-evidence-image img {
  aspect-ratio: 16 / 10;
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.review-evidence-upload {
  align-items: end;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.review-evidence-upload label,
.review-evidence-upload small {
  color: var(--muted);
}

.review-evidence-upload input[type="file"] {
  background: rgba(2, 10, 16, 0.75);
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  color: var(--text);
  display: block;
  margin-top: 0.35rem;
  padding: 0.55rem;
  width: 100%;
}

.review-evidence-upload small {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .review-evidence-upload {
    grid-template-columns: 1fr;
  }

  .review-evidence-upload small {
    grid-column: 1;
  }
}
/* ================================================================
   ARCANE CODEX theme layer — public pages only (2026-08-16 preview)
   Rev 2: gold reduced to a whisper — kickers, badge text and faint
   hover edges only; structure returns to the steel-blue base.
   Scoped to .public-site so campaign vault, review and account pages
   are untouched.
   ================================================================ */

.public-site {
  --arcane-gold: #cfb572;
  --arcane-gold-soft: rgba(207, 181, 114, 0.22);
  --arcane-violet: #8f7bff;
  --arcane-ink: #05070f;
  background:
    radial-gradient(ellipse 60rem 34rem at 18% -8%, rgba(143, 123, 255, 0.13), transparent),
    radial-gradient(ellipse 52rem 30rem at 88% 12%, rgba(88, 185, 230, 0.10), transparent),
    radial-gradient(ellipse 70rem 40rem at 50% 115%, rgba(207, 181, 114, 0.04), transparent),
    #05070f;
}

/* --- Header: floating translucent bar --------------------------- */
.public-site .public-header {
  backdrop-filter: blur(10px);
  background: rgba(5, 7, 15, 0.82);
  border-bottom: 1px solid rgba(50, 101, 129, 0.45);
}
.public-site .public-brand {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  letter-spacing: 0.08em;
}

/* --- Hero: the arcane frontispiece -------------------------------- */
.public-site .public-hero {
  position: relative;
  border: 1px solid rgba(50, 101, 129, 0.6);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 78% 8%, rgba(143, 123, 255, 0.16), transparent 26rem),
    radial-gradient(circle at 8% 90%, rgba(88, 185, 230, 0.12), transparent 22rem),
    linear-gradient(165deg, #0a0e1f, #070a16 60%, #05070f);
  box-shadow:
    0 0 0 1px rgba(5, 7, 15, 0.9),
    0 2rem 6rem rgba(0, 0, 0, 0.55),
    inset 0 0 8rem rgba(143, 123, 255, 0.05);
}
.public-site .public-hero::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border: 1px solid rgba(207, 181, 114, 0.12);
  border-radius: 0.75rem;
  pointer-events: none;
}

.public-site .public-kicker {
  color: var(--arcane-gold);
  font-variant: small-caps;
  letter-spacing: 0.34em;
  text-transform: lowercase;
}
.public-site .public-kicker::before,
.public-site .public-kicker::after { content: " ✦ "; color: var(--arcane-gold-soft); }

.public-site .public-hero h1 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  /* Real text colour stays legible when dark-mode extensions adapt the page. */
  color: #f6f4ec;
}
.public-site .public-hero-lead { color: #aebdd2; max-width: 38rem; }

/* --- Buttons: sigil-forged ---------------------------------------- */
.public-site .button {
  background: linear-gradient(120deg, #58b9e6, var(--arcane-violet));
  border: 1px solid rgba(159, 220, 247, 0.5);
  border-radius: 0.65rem;
  box-shadow: 0 0.35rem 1.6rem rgba(88, 185, 230, 0.28);
  color: var(--arcane-ink);
  font-weight: 800;
  transition: box-shadow 160ms ease, transform 160ms ease, filter 160ms ease;
}
.public-site .button:hover {
  box-shadow: 0 0.5rem 2.2rem rgba(143, 123, 255, 0.4);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.public-site .button.secondary {
  background: transparent;
  border: 1px solid rgba(88, 185, 230, 0.45);
  box-shadow: none;
  color: #9fdcf7;
}
.public-site .button.secondary:hover {
  background: rgba(88, 185, 230, 0.08);
  border-color: #8bdcff;
  box-shadow: 0 0.35rem 1.6rem rgba(88, 185, 230, 0.18);
}

/* --- Live-session card: a scrying pane ---------------------------- */
.public-site .public-session-card {
  border: 1px solid rgba(50, 101, 129, 0.65);
  border-radius: 0.9rem;
  background:
    linear-gradient(150deg, rgba(13, 19, 38, 0.96), rgba(7, 10, 22, 0.98)),
    repeating-linear-gradient(135deg, transparent 0 26px, rgba(143, 123, 255, 0.05) 26px 28px);
  box-shadow: 0 1.4rem 4.5rem rgba(0, 0, 0, 0.5), inset 0 0 4rem rgba(88, 185, 230, 0.05);
}

/* --- Section headings: illuminated chapter openers ---------------- */
.public-site .public-section-heading h2 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color: #eef0f4;
  letter-spacing: 0.015em;
}
.public-site .public-section-heading .public-kicker {
  color: var(--arcane-gold);
}
.public-site .public-section-heading::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.4rem;
  max-width: 16rem;
  background: linear-gradient(90deg, rgba(207, 181, 114, 0.4), rgba(50, 101, 129, 0.55), transparent);
}

/* --- Feature cards: reliquary tiles -------------------------------- */
.public-site .public-feature-grid article {
  border: 1px solid rgba(50, 101, 129, 0.55);
  border-radius: 0.85rem;
  background: linear-gradient(165deg, rgba(13, 20, 37, 0.92), rgba(7, 11, 21, 0.96));
  box-shadow: 0 0.7rem 2.2rem rgba(0, 0, 0, 0.35);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.public-site .public-feature-grid article:hover {
  border-color: rgba(207, 181, 114, 0.34);
  box-shadow: 0 1.1rem 3rem rgba(0, 0, 0, 0.5);
  transform: translateY(-3px);
}
.public-site .public-feature-grid article > span {
  color: var(--arcane-gold);
}
.public-site .public-feature-grid h3 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

/* --- Command pair: incantations ------------------------------------ */
.public-site .public-command-pair {
  border: 1px solid rgba(50, 101, 129, 0.55);
  border-radius: 0.85rem;
  background: linear-gradient(165deg, rgba(11, 17, 32, 0.95), rgba(6, 9, 18, 0.98));
}
.public-site .public-command-pair code,
.public-site .public-command-pair strong {
  color: #8bdcff;
}

/* --- Footer --------------------------------------------------------- */
.public-site .public-footer {
  border-top: 1px solid rgba(50, 101, 129, 0.4);
  color: #7e8ba0;
}

/* --- Text links ------------------------------------------------------ */
.public-site .text-link { color: #9fdcf7; }
.public-site .text-link:hover { color: var(--arcane-gold); }

/* ================================================================
   ARCANE CODEX — other public pages (commands, guides, notes,
   sign-in/up). Same palette: steel-blue structure, parchment serif
   headings, cyan actions, gold as text-whisper only.
   ================================================================ */

/* --- Page headings (all secondary pages) -------------------------- */
.public-site .public-page-heading h1 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color: #f0ead9;
  letter-spacing: 0.01em;
}
.public-site .public-page-heading::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.55rem;
  max-width: 16rem;
  background: linear-gradient(90deg, rgba(207, 181, 114, 0.4), rgba(50, 101, 129, 0.55), transparent);
}

/* --- /commands ------------------------------------------------------ */
.public-site .public-info-strip {
  border: 1px solid rgba(50, 101, 129, 0.55);
  border-radius: 0.85rem;
  background: linear-gradient(165deg, rgba(13, 20, 37, 0.92), rgba(7, 11, 21, 0.96));
}
.public-site .command-group > h2 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color: #eef0f4;
}
.public-site .public-command-card {
  border: 1px solid rgba(50, 101, 129, 0.55);
  border-radius: 0.85rem;
  background: linear-gradient(165deg, rgba(13, 20, 37, 0.92), rgba(7, 11, 21, 0.96));
  box-shadow: 0 0.7rem 2.2rem rgba(0, 0, 0, 0.35);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.public-site .public-command-card:hover {
  border-color: rgba(207, 181, 114, 0.34);
  transform: translateY(-2px);
}
.public-site .public-command-card code { color: #8bdcff; }

/* --- /guides --------------------------------------------------------- */
.public-site .guide-grid article {
  border: 1px solid rgba(50, 101, 129, 0.55);
  border-radius: 0.85rem;
  background: linear-gradient(165deg, rgba(13, 20, 37, 0.92), rgba(7, 11, 21, 0.96));
  box-shadow: 0 0.7rem 2.2rem rgba(0, 0, 0, 0.35);
  transition: border-color 180ms ease, transform 180ms ease;
}
.public-site .guide-grid article:hover {
  border-color: rgba(207, 181, 114, 0.34);
  transform: translateY(-2px);
}
.public-site .guide-grid h2,
.public-site .guide-grid h3 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
.public-site .guide-contribute {
  border: 1px solid rgba(143, 123, 255, 0.3);
  border-radius: 0.85rem;
  background:
    radial-gradient(circle at 85% 0%, rgba(143, 123, 255, 0.12), transparent 20rem),
    linear-gradient(165deg, rgba(11, 17, 32, 0.95), rgba(6, 9, 18, 0.98));
}

/* --- /notes: campaign access ---------------------------------------- */
.public-site .notes-access-card {
  border: 1px solid rgba(50, 101, 129, 0.65);
  border-radius: 0.9rem;
  background:
    linear-gradient(150deg, rgba(13, 19, 38, 0.96), rgba(7, 10, 22, 0.98)),
    repeating-linear-gradient(135deg, transparent 0 26px, rgba(143, 123, 255, 0.05) 26px 28px);
  box-shadow: 0 1.4rem 4.5rem rgba(0, 0, 0, 0.5), inset 0 0 4rem rgba(88, 185, 230, 0.05);
}
.public-site .notes-access-card h2 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color: #f0ead9;
}
.public-site .notes-access-help {
  border: 1px solid rgba(50, 101, 129, 0.45);
  border-radius: 0.85rem;
  background: rgba(9, 14, 27, 0.7);
}

/* --- Form fields (notes unlock + account pages) ---------------------- */
.public-site .field input,
.public-site .field select,
.public-site .field textarea {
  background: rgba(5, 8, 16, 0.85);
  border: 1px solid rgba(50, 101, 129, 0.65);
  border-radius: 0.55rem;
  color: #dbe6f2;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.public-site .field input:focus,
.public-site .field select:focus,
.public-site .field textarea:focus {
  border-color: #58b9e6;
  box-shadow: 0 0 0 3px rgba(88, 185, 230, 0.18);
  outline: none;
}
.public-site .password-toggle {
  background: transparent;
  border: 1px solid rgba(88, 185, 230, 0.45);
  border-radius: 0.55rem;
  color: #9fdcf7;
}
.public-site .password-toggle:hover {
  background: rgba(88, 185, 230, 0.08);
  border-color: #8bdcff;
}

/* --- Account sign-in / sign-up ---------------------------------------- */
.public-site .account-auth-card {
  border: 1px solid rgba(50, 101, 129, 0.65);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 80% 0%, rgba(143, 123, 255, 0.10), transparent 18rem),
    linear-gradient(150deg, rgba(13, 19, 38, 0.96), rgba(7, 10, 22, 0.98));
  box-shadow: 0 1.4rem 4.5rem rgba(0, 0, 0, 0.5);
}
.public-site .account-auth-card h1,
.public-site .account-auth-card h2 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color: #f0ead9;
}
.public-site .account-safety-card {
  border: 1px solid rgba(50, 101, 129, 0.45);
  border-radius: 0.85rem;
  background: rgba(9, 14, 27, 0.7);
}
.public-site .account-alternate { color: #7e8ba0; }
.public-site .account-alternate a { color: #9fdcf7; }

/* ================================================================
   ARCANE CODEX — online campaign files (the read-only vault).
   Chrome colours only: sidebar, toolbar, folder tiles, breadcrumbs,
   inputs. The note reader keeps its own selectable themes, and the
   Session Name Review workspace (.review-*) is deliberately
   untouched.
   ================================================================ */

.shell {
  --arcane-gold: #dcae4d;
  --arcane-gold-soft: rgba(222, 178, 76, 0.22);
  /* The violet wash that used to sit here has no counterpart in the vault;
     only the campaign's own cyan remains over the vault ground colour. */
  background:
    radial-gradient(ellipse 52rem 30rem at 90% 10%, rgba(88, 185, 230, 0.08), transparent),
    #05070f;
}

/* --- Sidebar: the codex spine ------------------------------------- */
.shell .sidebar {
  background: linear-gradient(180deg, rgba(9, 14, 27, 0.97), rgba(6, 9, 18, 0.99));
  border-right: 1px solid rgba(50, 101, 129, 0.5);
}
.shell .vault-kicker {
  color: var(--arcane-gold);
  font-variant: small-caps;
  letter-spacing: 0.3em;
  text-transform: lowercase;
}
.shell .vault-brand h1 a {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color: #f0ead9;
  letter-spacing: 0.01em;
}
.shell .vault-actions a { color: #9fdcf7; }
.shell .vault-actions a:hover { color: var(--arcane-gold); }
.shell .vault-tree-title {
  color: var(--arcane-gold);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  text-transform: lowercase;
}
.shell .tree-search {
  background: rgba(5, 8, 16, 0.85);
  border: 1px solid rgba(50, 101, 129, 0.65);
  border-radius: 0.55rem;
  color: #dbe6f2;
}
.shell .tree-search:focus {
  border-color: #58b9e6;
  box-shadow: 0 0 0 3px rgba(88, 185, 230, 0.18);
  outline: none;
}

/* --- Content chrome -------------------------------------------------- */
.shell .toolbar {
  background: rgba(8, 12, 24, 0.7);
  border: 1px solid rgba(50, 101, 129, 0.45);
  border-radius: 0.7rem;
}
.shell .breadcrumbs a { color: #9fdcf7; }
.shell .breadcrumbs a:hover { color: var(--arcane-gold); }

/* --- Folder tiles: reliquary drawers -------------------------------- */
.shell .folder-row {
  border: 1px solid rgba(50, 101, 129, 0.55);
  border-radius: 0.85rem;
  background: linear-gradient(165deg, rgba(13, 20, 37, 0.92), rgba(7, 11, 21, 0.96));
  transition: border-color 180ms ease, transform 180ms ease;
}
.shell .folder-row:hover {
  border-color: rgba(222, 178, 76, 0.34);
  transform: translateY(-2px);
}
.shell .entry-link { color: #dbe6f2; }
.shell .entry-link:hover { color: var(--arcane-gold); }
.shell .entry-meta { color: #7e8ba0; }

/* --- Buttons inside the vault ---------------------------------------- */
.shell button.secondary,
.shell .secondary {
  background: transparent;
  border: 1px solid rgba(88, 185, 230, 0.45);
  border-radius: 0.55rem;
  color: #9fdcf7;
}
.shell button.secondary:hover,
.shell .secondary:hover {
  background: rgba(88, 185, 230, 0.08);
  border-color: #8bdcff;
}

/* --- Note frame (reader content keeps its own themes) ---------------- */
.shell .note-banner {
  border: 1px solid rgba(50, 101, 129, 0.55);
  border-radius: 0.9rem;
}
/* ==================================================================
   SIGIL GRADIENT — the campaign's blue-to-violet accent.
   #58b9e6 -> #8f7bff is the bright pair used on call-to-action buttons.
   Behind light text it is darkened along the same hue line so the
   headings stay legible while the blue-to-violet sweep still reads.
   ================================================================== */
.shell {
  --sigil-blue: #58b9e6;
  --sigil-violet: #8f7bff;
  --sigil-sweep: linear-gradient(90deg, #1f6d95, #4a3f8f);
  --sigil-sweep-strong: linear-gradient(90deg, #2a86b4, #6a5acd);
}

/* Panel headers: the most repeated element, so the sweep sets the tone. */
.shell .note .callout[data-callout="bs-panel"] > .callout-title,
.shell .note .callout[data-callout="bs-info"] > .callout-title,
.shell .note .callout[data-callout="bs-filter"] > .callout-title,
.shell .note .callout-bs-panel > .callout-title {
  background: var(--sigil-sweep);
}

/* Table headers inside those panels follow the same sweep. */
.shell .note .query-table th,
.shell .note .markdown-rendered-table th,
.shell .note .bases-view th {
  background: var(--sigil-sweep);
}

/* Each tab is clipped to a parallelogram, so any background on the bar itself
   shows through the angled gaps as coloured slivers. Let the page ground show
   instead and the tabs read as separate shapes.
   `!important` is required, not preference: template-layout.css (the synced
   vault sheet) paints every `bs-` callout with an !important gradient, and
   bs-main-nav is not among its exclusions. Same for the tab text, which that
   sheet forces to cyan on every internal link. */
.shell .note .callout[data-callout="bs-main-nav"],
.shell .note .callout-bs-main-nav {
  background: transparent !important;
}

/* The active campaign tab gets the brighter pair, with dark text: pale text
   on that gradient has almost no contrast. */
.shell .note .callout[data-callout="bs-main-nav"] .internal-link.is-active,
.shell .note .callout[data-callout="bs-main-nav"] strong .internal-link,
.shell .note .callout-bs-main-nav .internal-link.is-active,
.shell .note .callout-bs-main-nav strong .internal-link {
  background: var(--sigil-sweep-strong) !important;
  color: #04121c !important;
  font-weight: 700;
}

.shell .note-actions .button,
.shell .note-actions a.button.secondary {
  background: linear-gradient(120deg, var(--sigil-blue), var(--sigil-violet));
  border: 1px solid rgba(159, 220, 247, 0.5);
  border-radius: 0.65rem;
  box-shadow: 0 0.35rem 1.6rem rgba(88, 185, 230, 0.28);
  color: #05070f;
  font-weight: 700;
  transition: box-shadow 160ms ease, filter 160ms ease;
}

.shell .note-actions .button:hover,
.shell .note-actions a.button.secondary:hover {
  box-shadow: 0 0.5rem 2.2rem rgba(143, 123, 255, 0.4);
  color: #05070f;
  filter: brightness(1.06);
}
.shell .note-relations {
  border: 1px solid rgba(50, 101, 129, 0.45);
  border-radius: 0.85rem;
  background: rgba(9, 14, 27, 0.7);
}

/* --- Wiki-note tables: remove the blue-to-red header fade ----------- */
.note.bs-wiki .query-table th {
  background: linear-gradient(90deg, #17486b, #10283e);
  color: #e7edf5;
}

/* --- Vault files/folders: +5% gold ----------------------------------- */
.shell .vault-mark {
  background: linear-gradient(135deg, transparent 42%, var(--arcane-gold) 43% 56%, transparent 57%);
  border-color: rgba(222, 178, 76, 0.5);
  box-shadow: 0 0 1.1rem rgba(222, 178, 76, 0.35);
}
.shell .folder-row {
  border-color: rgba(150, 130, 84, 0.5);
}
.shell .folder-row:hover {
  border-color: rgba(222, 178, 76, 0.5);
  box-shadow: 0 0.5rem 1.8rem rgba(0, 0, 0, 0.4), 0 0 1.6rem rgba(222, 178, 76, 0.08);
}
.shell .tree-icon { color: var(--arcane-gold); }
.shell .entry-meta {
  color: #c2a45f;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  text-transform: lowercase;
}
.shell .vault-tree details > summary::marker,
.shell .vault-tree details > summary::-webkit-details-marker {
  color: var(--arcane-gold);
}

/* --- Campaign unlock page: the sealed door --------------------------- */
.login-card {
  border: 1px solid rgba(50, 101, 129, 0.65);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 80% 0%, rgba(143, 123, 255, 0.10), transparent 18rem),
    linear-gradient(150deg, rgba(13, 19, 38, 0.96), rgba(7, 10, 22, 0.98));
  box-shadow: 0 1.4rem 4.5rem rgba(0, 0, 0, 0.5);
}
.login-card h1,
.login-card h2 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color: #f0ead9;
}
.login-card .field input {
  background: rgba(5, 8, 16, 0.85);
  border: 1px solid rgba(50, 101, 129, 0.65);
  border-radius: 0.55rem;
  color: #dbe6f2;
}
.login-card .field input:focus {
  border-color: #58b9e6;
  box-shadow: 0 0 0 3px rgba(88, 185, 230, 0.18);
  outline: none;
}
.login-card .password-toggle {
  background: transparent;
  border: 1px solid rgba(88, 185, 230, 0.45);
  border-radius: 0.55rem;
  color: #9fdcf7;
}
.login-back { color: #9fdcf7; }
.login-back:hover { color: #dcae4d; }

/* --- Files: +5% more gold -------------------------------------------- */
.shell .folder-row {
  border-color: rgba(196, 158, 74, 0.42);
}
.shell .folder-row:hover {
  border-color: rgba(222, 178, 76, 0.6);
  box-shadow: 0 0.5rem 1.8rem rgba(0, 0, 0, 0.4), 0 0 2rem rgba(222, 178, 76, 0.14);
}
.shell .entry-link { color: #ecdcae; }
.shell .vault-tree a { color: #cfd9e6; }
.shell .vault-tree a:hover { color: #dcae4d; }
.shell .vault-tree summary { color: #dcc37a; }
.shell .breadcrumbs span:last-child,
.shell .breadcrumbs [aria-current] { color: #dcae4d; }
.shell .toolbar { border-color: rgba(196, 158, 74, 0.3); }

/* Published pages must match the vault, so the gold recolouring that used to
   sit here is gone: it repainted panel titles #e3ba5c in Palatino over the
   vault's own #dcebf5 Georgia, and put gold borders on panels and the shell.
   template-layout.css is the vault's stylesheet and is now left to win.
   Gold survives where the vault itself uses it (table headers, list markers). */
.shell .note-banner {
  border-color: rgba(222, 178, 76, 0.34);
  box-shadow: 0 0 2.4rem rgba(222, 178, 76, 0.08);
}
.shell .note-banner-icon { color: #dcae4d; }

/* --- Note lists: red bullet markers become gold ----------------------- */
.shell .note li::marker,
.note.bs-wiki li::marker,
.callout-bs-info li::marker {
  color: #dcae4d;
}


/* The headline is real HTML: visible text, accessibility and indexing share
   one source. CSS styles it but must never replace or hide its wording. */
.public-site .public-hero h1 {
  max-width: none;
  font: 700 clamp(2.6rem, 5.6vw, 4.6rem)/1.1 "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  letter-spacing: 0.01em;
  margin: 0.4rem 0 1.1rem;
}


/* ARCANE CODEX — hero placement (approved 2026-08-16): tighter band,
   slogan seated level with the Live Session card, matched side insets. */
.public-site .public-hero {
  min-height: min(36rem, calc(100vh - 4.6rem));
  padding: clamp(2rem, 5vw, 4.5rem) clamp(2rem, 4.5vw, 4.5rem);
}
.public-site .public-hero h1 {
  margin: 0.3rem 0 1rem;
}

/* Shared first-session content is rendered by the same source on every
   entry point. Keep long command names and steps readable at phone widths. */
.first-session { min-width: 0; }
.first-session p { max-width: 80ch; line-height: 1.65; }
.onboarding-checklist {
  display: grid;
  max-width: 85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
  padding-left: 1.5rem;
  line-height: 1.65;
}
.onboarding-checklist li,
.onboarding-account-steps li { padding: 0.4rem; overflow-wrap: anywhere; }
.guide-grid .onboarding-checklist { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) {
  .onboarding-checklist { grid-template-columns: minmax(0, 1fr); }
}


/* ARCANE CODEX — app tabs share the public glow (review-* untouched). */
.shell, .account-page, .portal-workspace {
  background:
    radial-gradient(ellipse 60rem 34rem at 18% -8%, rgba(143, 123, 255, 0.13), transparent),
    radial-gradient(ellipse 52rem 30rem at 88% 12%, rgba(88, 185, 230, 0.10), transparent),
    radial-gradient(ellipse 70rem 40rem at 50% 115%, rgba(207, 181, 114, 0.04), transparent),
    #05070f;
}


/* ARCANE CODEX — site-wide glow: every tab inherits from body. */
body {
  background:
    radial-gradient(ellipse 60rem 34rem at 18% -8%, rgba(143, 123, 255, 0.16), transparent),
    radial-gradient(ellipse 52rem 30rem at 88% 12%, rgba(88, 185, 230, 0.12), transparent),
    radial-gradient(ellipse 70rem 40rem at 50% 115%, rgba(207, 181, 114, 0.05), transparent),
    #05070f;
}


/* ARCANE CODEX — vault-exact tree (measured from live Obsidian 2026-08-16):
   folders #4a7ec8 underlined, icons #c49e4a, active #cfe3f5 + gold edge. */
.shell .vault-tree .tree-link {
  color: #4a7ec8;
  text-decoration: none;
}
.shell .vault-tree summary > .tree-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #4a7ec8;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.shell .vault-tree .tree-icon {
  color: #c49e4a;
}
.shell .vault-tree .tree-link:hover {
  color: #6f9fd0;
  background: rgba(111, 159, 208, 0.12);
}
.shell .vault-tree .tree-link.is-active {
  color: #cfe3f5;
  background: linear-gradient(90deg, rgba(220, 174, 77, 0.42), rgba(220, 174, 77, 0.20));
  box-shadow: inset 2px 0 #dcae4d;
}


/* The rail used to hold only the vault's Quick Create launcher, so the whole
   thing was hidden online and the main column absorbed its width. The server
   now drops Quick Create on its own, and rails carry real reference content —
   a location's General Information and Connected Areas, a record's Session
   Pack — so hiding the rail was hiding the content. It renders again. */
/* `bs-wiki-layout-test` is a class ON the note, not a descendant of it, so a
   descendant combinator never matched and the rail width stayed reserved. */
/* The rail column is no longer collapsed. Every shell's rail now carries real
   reference content, so reserving its width is not dead space any more —
   collapsing it was what pushed location and PC sidebars down the page. */

/* ---------------------------------------------------------------------------
   PARTY CARD PORTRAITS (2026-08-29)
   The card head is already a 100px band with the name bottom-aligned over it:
   it was always meant to hold PC art, but nothing ever painted anything there,
   so every card showed a blank blue block. Paint the portrait when a PC has
   one, and show their initial when they do not, so the space reads as
   deliberate instead of as a broken image.
   Set art per PC with `portrait: z_Assets/<file>.png` in the PC's frontmatter.
--------------------------------------------------------------------------- */
.shell .note .bs-party-card__head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* The vault sheet sets a 100px band, which letterboxes a tall character piece
   down to a thin slice. Give the art real room here rather than editing the
   synced vault stylesheet, so a re-sync cannot quietly undo it. The card grows
   to match so the stat rows keep their space. */
/* mobile.css sets `.note.bs-pc-home .bs-party-card__head { min-height:10.25rem;
   background:#174e70 }` — that flat blue was the "empty" band — and it loads
   after this file, so an equally specific rule here loses. Match its selector
   and add `.shell` to win outright. */
.shell .note.bs-pc-home .bs-party-card__head {
  min-height: 260px;
}
.shell .note.bs-pc-home .bs-party-card {
  min-height: 430px;
}
.shell .note .bs-party-card__head.has-portrait {
  background-image: var(--bs-party-portrait);
  background-size: cover;
  /* Character art is usually a tall full-body piece, and the head sits near
     the top. Bias the crop upward so the card shows a face, not a torso. */
  background-position: center 10%;
  background-repeat: no-repeat;
}
/* Keep the name legible over whatever the art happens to be, while letting
   the picture run all the way down behind it. The scrim only darkens the last
   third, so the art reads as the card rather than as a banner above it. */
.shell .note .bs-party-card__head.has-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(4, 10, 20, 0) 62%,
    rgba(4, 10, 20, 0.72) 88%,
    rgba(4, 10, 20, 0.92) 100%
  );
  z-index: -1;
}
.shell .note .bs-party-card__head.has-portrait .bs-party-card__initial {
  display: none;
}
.shell .note .bs-party-card__initial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font: 700 3.4rem/1 Georgia, "Times New Roman", serif;
  color: rgba(255, 255, 255, 0.17);
  letter-spacing: 0.04em;
  pointer-events: none;
}
.shell .note .bs-party-card__name {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* ---------------------------------------------------------------------------
   PC INFO RAIL DENSITY (2026-08-29)
   The rail's reference tables were set at the same scale as body copy, which
   made a sidebar of one-word values take more height than the write-up beside
   it. Tighten type and cell padding so the rail reads as reference material.
   Overridden here rather than in template-layout.css, which is synced from the
   vault and would lose the change on the next sync.
--------------------------------------------------------------------------- */
.shell .note .pc-info-rail table {
  font-size: 0.72rem;
}
.shell .note .pc-info-rail td {
  padding: 2px 5px;
  line-height: 1.3;
}
.shell .note .pc-rail-heading {
  padding: 4px 7px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.shell .note .pc-info-rail {
  padding: 5px;
}
.shell .note .pc-rail-section + .pc-rail-section {
  margin-top: 6px;
}

/* ---------------------------------------------------------------------------
   RAILS SCROLL WITH THE PAGE (2026-08-29)
   Both rails were sticky and height-capped, so a long sidebar pinned itself to
   the viewport and scrolled inside its own box. On a record with a full set of
   reference panels that hides the lower ones behind an inner scrollbar. The
   rail now flows with the page and is as tall as its content.
--------------------------------------------------------------------------- */
.shell .note.bs-wiki-layout-test .callout-bs-rail,
.shell .note.bs-wiki .callout-bs-rail,
.shell .note.pc-wiki-layout-test .callout-pc-rail {
  position: static;
  top: auto;
  max-height: none;
  overflow-y: visible;
  scrollbar-gutter: auto;
}

/* ---------------------------------------------------------------------------
   A SHELL WITHOUT A RAIL FILLS ITS FRAME (2026-08-29)
   Records that carry a rail keep two columns; records that do not — lore and
   quest pages — would otherwise still reserve the rail's width and leave the
   text stopping short of the gold border. `:has()` decides per page, so no
   list of page types has to be kept in sync.
--------------------------------------------------------------------------- */
.shell .note .callout[data-callout="bs-shell"]:not(:has(.callout-bs-rail)),
.shell .note .callout[data-callout="bs-shell"]:not(:has(.callout-bs-rail)) > .callout-content,
.shell .note .callout[data-callout="bs-entity-shell"]:not(:has(.callout-bs-rail)),
.shell .note .callout[data-callout="bs-entity-shell"]:not(:has(.callout-bs-rail)) > .callout-content,
.shell .note .callout[data-callout="pc-shell"]:not(:has(.callout-pc-rail)),
.shell .note .callout[data-callout="pc-shell"]:not(:has(.callout-pc-rail)) > .callout-content {
  grid-template-columns: minmax(0, 1fr) !important;
}

.fold-all-controls {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
}
.fold-all-controls button {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   GROUPED DIRECTORY TABLES (2026-08-29)
   One table, grouped by its first column, with a collapsible band per value —
   the vault's Loot Directory view rather than a separate panel per category.
--------------------------------------------------------------------------- */
.shell .note table.is-grouped .group-band {
  cursor: pointer;
  user-select: none;
}
.shell .note table.is-grouped .group-band > th {
  background: linear-gradient(180deg, #6d2530, #521b24);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #f3e4e6;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.3rem 0.6rem;
  text-align: left;
}
.shell .note table.is-grouped .group-band:hover > th {
  background: linear-gradient(180deg, #7c2b37, #5d1f29);
}
.shell .note table.is-grouped .group-band__chevron {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.85;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 120ms ease;
}
.shell .note table.is-grouped .group-band.is-collapsed .group-band__chevron {
  transform: translateY(0) rotate(-45deg);
}
.shell .note table.is-grouped .group-band__count {
  display: inline-block;
  min-width: 1.35rem;
  margin-right: 0.5rem;
  padding: 0 0.32rem;
  border-radius: 3px;
  background: var(--sigil-blue, #58b9e6);
  color: #06202c;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.shell .note table.is-grouped .group-band:focus-visible > th {
  outline: 2px solid var(--sigil-blue, #58b9e6);
  outline-offset: -2px;
}

/* Loot home: the bottom row holds two panels, not three. Recently Found
   carries four columns of prose and gets the larger share; the supplies
   table is narrow by nature. Left as a 3-up grid it stranded an empty
   third column and squeezed both panels for no reason. */
/* The panels are laid out by the nested grid on .callout-content, not by the
   callout itself, so both have to be told about the two-column split. */
.shell .note.bs-loot-home .callout[data-callout="bs-grid-3"],
.shell .note.bs-loot-home .callout[data-callout="bs-grid-3"] > .callout-content {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
  .shell .note.bs-loot-home .callout[data-callout="bs-grid-3"],
  .shell .note.bs-loot-home .callout[data-callout="bs-grid-3"] > .callout-content {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==================================================================
   TIER BROWSING — the rarity and creature-type index pages (2026-08-29)
   Two levels: an index of tiers on the Loot and Bestiary homes, then a
   page per tier. Both lean harder on the campaign's blue-to-violet sigil
   pair than the rest of the site, so the browse reads as its own layer
   rather than another directory table.
   ================================================================== */
.shell {
  --sigil-sweep-deep: linear-gradient(100deg, #16496b 0%, #2f4b96 48%, #4a3f8f 100%);
  --sigil-edge: rgba(143, 123, 255, 0.42);
}

/* The index panel and every tier page's own table panel. The synced vault
   sheet paints and borders every `bs-` callout with `!important`, so the
   violet has to be declared the same way to land. The attribute selector is
   repeated to raise specificity: that vault rule carries eight
   `:not([data-callout=...])` clauses, so `!important` alone does not
   outrank it. */
.shell .note .callout[data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"] {
  background: linear-gradient(150deg, rgba(29, 26, 62, 0.94), rgba(9, 12, 28, 0.96)) !important;
  border-color: var(--sigil-edge) !important;
  box-shadow: 0 0.5rem 1.9rem rgba(74, 63, 143, 0.22);
}

.shell .note .callout[data-callout-metadata~="sigil"] > .callout-title,
.shell .note.bs-tier-page .callout[data-callout="bs-place-filter"] > .callout-title {
  background: var(--sigil-sweep-strong);
}

/* Table headers on the tier pages take the deeper sweep, so the blue end
   sits under the first column and the violet end under the last. The vault
   sheet pins every `th` to a flat navy with `!important`, which is also why
   the site-wide sigil sweep above has never shown on a table. */
.shell .note .callout[data-callout-metadata~="sigil"] .query-table th,
.shell .note .callout[data-callout-metadata~="sigil"] table thead th,
.shell .note.bs-tier-page .query-table th,
.shell .note.bs-tier-page table thead th {
  background: var(--sigil-sweep-deep) !important;
  border-bottom-color: var(--sigil-edge) !important;
}

.shell .note .callout[data-callout-metadata~="sigil"] .query-table th:hover,
.shell .note .callout[data-callout-metadata~="sigil"] table thead th:hover,
.shell .note.bs-tier-page .query-table th:hover,
.shell .note.bs-tier-page table thead th:hover {
  background: linear-gradient(100deg, #1b5b83 0%, #3a5bb4 48%, #5b4eab 100%) !important;
}

.shell .note .callout[data-callout-metadata~="sigil"] tbody tr:hover {
  background: linear-gradient(90deg, rgba(88, 185, 230, 0.09), rgba(143, 123, 255, 0.13));
}

/* A violet wash behind the tier pages themselves, strongest at the top so it
   sits under the hero and fades out before the table. */
.shell .note.bs-tier-page {
  background-image: radial-gradient(120% 46% at 22% 0%, rgba(74, 63, 143, 0.3) 0%, rgba(74, 63, 143, 0) 68%);
}

/* ==================================================================
   THE SWEEP REACHES THE REST OF THE SITE (2026-08-29)
   The blue-to-violet header was only ever on `bs-panel`, so directory
   pages carried it while every character sheet, NPC, location and item
   page kept a flat blue bar. Same treatment everywhere now.
   ================================================================== */
.shell .note .callout[data-callout="pc-panel"] > .callout-title,
.shell .note .callout[data-callout="pc-note"] > .callout-title,
.shell .note .callout[data-callout="bs-equipment"] > .callout-title,
.shell .note .callout[data-callout="bs-item-overview"] > .callout-title,
.shell .note .callout[data-callout="bs-secret"] > .callout-title,
.shell .note .callout[data-callout="bs-place-filter"] > .callout-title,
.shell .note .callout[data-callout="bs-date-filter"] > .callout-title,
.shell .note .callout-pc-panel > .callout-title,
.shell .note .callout-pc-note > .callout-title {
  background: var(--sigil-sweep);
}

/* ==================================================================
   MORE GOLD ON THE FRAME (2026-08-29)
   The gold edge is what separates the page from the ground; it was set
   low enough to read as a hairline. Brighter border, wider glow.
   ================================================================== */
.shell .note {
  border-color: rgba(222, 178, 76, 0.26) !important;
  box-shadow:
    0 0 3.4rem rgba(222, 178, 76, 0.085),
    0 0 1.1rem rgba(222, 178, 76, 0.05),
    0 1.2rem 4rem rgba(0, 0, 0, 0.45) !important;
}

/* Table headers keep the vault's gold underline, warmed up to match. */
.shell .note .query-table th,
.shell .note table thead th {
  border-bottom-color: rgba(222, 178, 76, 0.72) !important;
}

.shell .note-banner {
  border-color: rgba(222, 178, 76, 0.5);
  box-shadow: 0 0 3.2rem rgba(222, 178, 76, 0.16);
}

/* ==================================================================
   WIKI NAVIGATION FOOTER — colour (2026-08-29)
   It closes every page, so a flat navy block read as an afterthought.
   The header takes the sigil sweep like every other panel, the row
   labels get their own violet ground, and the link rows alternate so
   the seven categories separate at a glance.
   ================================================================== */
.shell .note .callout[data-callout="bs-wiki-nav"] > .callout-title {
  background: var(--sigil-sweep-strong);
  color: #f0f5ff;
}

.shell .note .callout[data-callout="bs-wiki-nav"] td:first-child {
  background: linear-gradient(100deg, rgba(31, 109, 149, 0.42), rgba(74, 63, 143, 0.5));
  border-color: rgba(143, 123, 255, 0.3);
  color: #e8dcb4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shell .note .callout[data-callout="bs-wiki-nav"] td:last-child {
  background: rgba(20, 32, 61, 0.45);
  border-color: rgba(143, 123, 255, 0.22);
}

.shell .note .callout[data-callout="bs-wiki-nav"] tr:nth-child(even) td:last-child {
  background: rgba(12, 20, 42, 0.5);
}

.shell .note .callout[data-callout="bs-wiki-nav"] tr:hover td:last-child {
  background: linear-gradient(90deg, rgba(88, 185, 230, 0.12), rgba(143, 123, 255, 0.16));
}

.shell .note .callout[data-callout="bs-wiki-nav"] td:last-child a:hover {
  color: #f2f6ff;
  text-shadow: 0 0 0.7rem rgba(143, 123, 255, 0.75);
}

/* ==================================================================
   LOOT HOME BOTTOM ROW — no internal scroll (2026-08-29)
   The vault sheet caps those two panels at 280px and scrolls inside
   them, which put a scrollbar on a six-row table. The page scrolls;
   the panel should just be as tall as its contents.
   ================================================================== */
.shell .note.bs-loot-home .callout[data-callout="bs-grid-3"] > .callout-content > .callout[data-callout="bs-panel"] > .callout-content {
  max-height: none !important;
  overflow: visible !important;
}

/* ==================================================================
   TIER PANELS — less violet (2026-08-29)
   The index panels were reading as purple blocks rather than as the
   campaign's navy with a violet accent. Ground pulled back toward the
   site's own blue; the sweep and edge stay, quieter.
   ================================================================== */
.shell {
  --sigil-sweep-deep: linear-gradient(100deg, #164a6d 0%, #24457f 55%, #3a3670 100%);
  --sigil-edge: rgba(122, 137, 214, 0.34);
}

.shell .note .callout[data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"][data-callout-metadata~="sigil"] {
  background: linear-gradient(150deg, rgba(15, 24, 52, 0.94), rgba(7, 10, 22, 0.96)) !important;
}

.shell .note .callout[data-callout-metadata~="sigil"] > .callout-title {
  background: var(--sigil-sweep);
}

.shell .note .callout[data-callout-metadata~="sigil"] tbody tr:hover {
  background: linear-gradient(90deg, rgba(88, 185, 230, 0.08), rgba(122, 137, 214, 0.09));
}

/* The violet wash behind a tier page was doing the same thing. */
.shell .note.bs-tier-page {
  background-image: radial-gradient(120% 46% at 22% 0%, rgba(36, 69, 127, 0.26) 0%, rgba(36, 69, 127, 0) 68%);
}


/* ==================================================================
   ENTITY RAIL IS THE PC RAIL (2026-08-29)
   Every value below is read off `.pc-info-rail` / `.pc-rail-heading`
   on a live PC page rather than guessed, so a bestiary, NPC or
   location sidebar is the same component as a character sheet's:
   centred Georgia heading on the flat blue bar, Georgia table head
   over a gold rule, bold right-aligned field column in cyan, values
   left in body grey. The blue-violet sweep stays everywhere else — a
   rail is reference furniture, not a feature panel.
   ================================================================== */
.shell .note .callout[data-callout="bs-rail"] .callout[data-callout="bs-panel"] > .callout-title,
.shell .note .callout-bs-rail .callout-bs-panel > .callout-title {
  background: linear-gradient(180deg, #17486b, #0f3550);
  border-bottom: 1px solid #1d5275;
  color: #dcebf5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 7px;
  text-align: center;
  text-transform: uppercase;
}

/* The vault sheet paints every `bs-` callout through a rule carrying eight
   `:not()` clauses, so the attribute is repeated here to outrank it —
   `!important` on its own loses. */
.shell .note .callout[data-callout="bs-rail"] .callout[data-callout="bs-panel"][data-callout="bs-panel"][data-callout="bs-panel"][data-callout="bs-panel"][data-callout="bs-panel"][data-callout="bs-panel"][data-callout="bs-panel"][data-callout="bs-panel"] {
  background: linear-gradient(180deg, #08131e, #050c13) !important;
  border-color: rgba(50, 101, 129, 0.45) !important;
}

.shell .note .callout[data-callout="bs-rail"] .callout[data-callout="bs-panel"] > .callout-content,
.shell .note .callout-bs-rail .callout-bs-panel > .callout-content {
  font-size: 0.72rem;
  line-height: 1.45;
  padding: 5px;
}

.shell .note .callout[data-callout="bs-rail"] table,
.shell .note .callout-bs-rail table {
  background: #061019;
  font-size: 0.72rem;
}

.shell .note .callout[data-callout="bs-rail"] th,
.shell .note .callout-bs-rail th {
  background: #0d1a2e !important;
  border-bottom-color: rgba(222, 178, 76, 0.55) !important;
  color: #bec9d7;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  padding: 0.65rem 0.8rem;
  text-align: left;
}

.shell .note .callout[data-callout="bs-rail"] td,
.shell .note .callout-bs-rail td {
  background: rgba(5, 13, 19, 0.7);
  border-color: rgba(50, 101, 129, 0.45);
  padding: 0.65rem 0.8rem;
}

/* The field column is the label, so it reads as one: bold, cyan, and
   right-aligned against the value it names. */
.shell .note .callout[data-callout="bs-rail"] td:first-child,
.shell .note .callout-bs-rail td:first-child {
  color: #58b9e6;
  font-weight: 700;
  text-align: right;
}

.shell .note .callout[data-callout="bs-rail"] td:not(:first-child),
.shell .note .callout-bs-rail td:not(:first-child) {
  color: #dce8f0;
  text-align: left;
}

.shell .note .callout[data-callout="bs-rail"] li,
.shell .note .callout-bs-rail li {
  line-height: 1.45;
}

.shell .note .callout[data-callout="bs-rail"] .callout[data-callout="bs-panel"] + .callout[data-callout="bs-panel"] {
  margin-top: 6px;
}

/* ==================================================================
   ENTITY SHELL HONOURS --bs-rail-width (2026-08-29)
   `bs_rail_width` in a record's frontmatter was reaching the page as a
   custom property, but the track that actually won was content-sized,
   so the rail sat at its own max-content width (318px) and raising the
   frontmatter value changed nothing. Scoped above the 1280px
   breakpoint so the narrow-viewport collapse still applies.
   ================================================================== */
@media (min-width: 1281px) {
  .shell .note .callout[data-callout="bs-entity-shell"] > .callout-content,
  .shell .note .callout-bs-entity-shell > .callout-content {
    grid-template-columns: minmax(0, 1fr) var(--bs-rail-width, 450px);
  }
}

/* ==================================================================
   PANELS DO NOT STRETCH TO THEIR NEIGHBOUR (2026-08-29)
   Grid rows default to `stretch`, so an eight-row table paired with a
   thirty-row one was drawn as tall as the thirty — hundreds of pixels
   of empty panel under the short one.
   ================================================================== */
.shell .note .callout[data-callout^="bs-grid-"] > .callout-content,
.shell .note .callout[data-callout="bs-rail"] > .callout-content,
.shell .note .callout[data-callout="pc-rail"] > .callout-content {
  align-items: start;
}

/* ==================================================================
   MAIN COLUMN ROWS DO NOT ABSORB SPARE HEIGHT (2026-08-29)
   Three separate causes stacked up here. Grid's default `align-content`
   is stretch, so spare column height was shared between the rows;
   `align-items` then stretched each row's item to fill it; and
   campaign-portal-mobile.css pins the campaign home to
   `auto auto 1fr 1fr`, which padded a short row to match a very tall
   one. That last one was the thousand-pixel gap.
   ================================================================== */
.shell .note .callout[data-callout="bs-main"] > .callout-content,
.shell .note .callout[data-callout="pc-main"] > .callout-content,
.shell .note .callout-bs-main > .callout-content,
.shell .note .callout-pc-main > .callout-content {
  align-content: start;
  align-items: start;
  grid-template-rows: none;
}

/* ================================================================
   SPELL & FACT REVIEW — brought into the Arcane Codex language.

   The review workspace was deliberately left out of the codex skin, so
   it read as a different product from the wiki it writes into. These
   rules give it the campaign's own ground, gold frame and cyan/violet
   sweep, and lean on the vault's serif for headings the way every other
   page here does. Structure is untouched: this is the same markup the
   review flow already emits, wearing the site's clothes.

   Appended last on purpose — it overrides the earlier .review-* block
   at equal specificity rather than fighting it with !important.
   ================================================================ */

.review-workspace {
  --r-ground: #05070f;
  --r-panel: linear-gradient(180deg, #08131e, #050c13);
  --r-edge: rgba(50, 101, 129, 0.45);
  --r-edge-soft: rgba(50, 101, 129, 0.25);
  --r-gold: rgba(222, 178, 76, 0.26);
  --r-gold-line: rgba(222, 178, 76, 0.55);
  --r-text: #dce8f0;
  --r-muted: #8fa3bd;
  --r-blue: #58b9e6;
  --r-violet: #8f7bff;
  --r-sweep: linear-gradient(90deg, #1f6d95, #4a3f8f);
  --r-sweep-strong: linear-gradient(90deg, #2a86b4, #6a5acd);
  --r-rail-head: linear-gradient(180deg, #17486b, #0f3550);
  --r-good: #6fbd7b;
  --r-warn: #d3aa51;
  --r-bad: #da6c6c;
  --r-serif: Georgia, "Times New Roman", serif;
  --r-sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-mono: ui-monospace, Consolas, monospace;

  background:
    radial-gradient(ellipse 52rem 30rem at 90% 6%, rgba(88, 185, 230, 0.07), transparent),
    var(--r-ground);
  color: var(--r-text);
  font-family: var(--r-sans);
}

/* --- chrome ------------------------------------------------------- */

.review-workspace .review-appbar {
  /* Fully opaque, not 0.95. The appbar is sticky, so anything less lets the
     page scroll visibly through it - on a phone the "Master Vault update
     waiting" notice ghosted straight through the title. */
  background: linear-gradient(150deg, rgb(20, 32, 61), rgb(5, 7, 15));
  border-bottom: 1px solid var(--r-gold);
}
.review-workspace .review-appbar strong { color: #f0f5fb; }
.review-workspace .review-appbar span { color: var(--r-muted); }

.review-workspace .review-side-rail {
  background: linear-gradient(180deg, rgba(8, 19, 30, 0.9), rgba(5, 12, 19, 0.9));
  border-right: 1px solid var(--r-edge-soft);
}
.review-workspace .review-rail-section { border-color: var(--r-edge-soft); }

.review-workspace .review-page {
  max-width: 1580px;
  margin: 0 auto;
  padding: 16px 18px 60px;
}

/* --- the session card, the page's one gold frame ------------------ */

.review-workspace .review-session-card {
  border: 1px solid var(--r-gold);
  border-radius: 6px;
  background: linear-gradient(150deg, rgba(20, 32, 61, 0.95), rgba(5, 7, 15, 0.97));
  box-shadow: 0 0 3.4rem rgba(222, 178, 76, 0.085);
  padding: 13px 18px;
  margin-bottom: 12px;
}
.review-workspace .review-session-heading {
  display: flex;
  gap: 26px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.review-workspace .review-session-heading > div:first-child { flex: 1 1 300px; }
.review-workspace .review-eyebrow {
  font: 700 0.64rem/1 var(--r-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--r-blue);
  margin: 0 0 5px;
}
.review-workspace .review-session-card h1 {
  font: 400 1.75rem/1.1 var(--r-serif);
  margin: 0 0 3px;
  color: var(--r-text);
}
.review-workspace .review-state-line {
  color: var(--r-muted);
  font-size: 0.82rem;
  margin: 0;
}
.review-workspace .review-safe-note {
  border: 1px solid rgba(111, 189, 123, 0.4);
  border-radius: 5px;
  background: rgba(111, 189, 123, 0.08);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-workspace .review-safe-note strong { color: var(--r-good); font-size: 0.8rem; }
.review-workspace .review-safe-note span { color: var(--r-muted); font-size: 0.75rem; }

/* --- the counters ------------------------------------------------- */

.review-workspace .review-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.review-workspace .review-stat {
  border: 1px solid var(--r-edge);
  border-radius: 5px;
  background: rgba(5, 13, 19, 0.7);
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--r-muted);
  font-variant-numeric: tabular-nums;
}
.review-workspace .review-stat b,
.review-workspace .review-stat strong { color: var(--r-text); font-size: 0.95rem; }
.review-workspace .review-stat-icon { color: var(--r-blue); }

/* --- tabs --------------------------------------------------------- */

.review-workspace .review-mode-tabs {
  display: flex;
  gap: 6px;
  margin: 0;
  border: 0;
}
.review-workspace .review-mode-tab {
  border: 1px solid var(--r-edge);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: rgba(5, 13, 19, 0.6);
  padding: 8px 18px;
  color: var(--r-muted);
  font-size: 0.86rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.review-workspace .review-mode-tab:hover { border-color: rgba(143, 123, 255, 0.55); color: var(--r-text); }
.review-workspace .review-mode-tab.is-active {
  background: var(--r-sweep);
  color: #fff;
  font-weight: 600;
  border-color: rgba(143, 123, 255, 0.4);
}
.review-workspace .review-mode-tab.is-active small { color: rgba(255, 255, 255, 0.72); }
.review-workspace .review-mode-tab strong { font-weight: 600; }
.review-workspace .review-mode-tab small { display: block; font-size: 0.7rem; color: var(--r-muted); }
.review-workspace .review-mode-tab b {
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 0.75rem;
}
.review-workspace .review-mode-icon { color: var(--r-blue); }
.review-workspace .review-mode-tab.is-active .review-mode-icon { color: #cfe9f8; }

/* --- the working panel and its tables ----------------------------- */

.review-workspace .review-stage {
  border: 1px solid var(--r-edge);
  border-radius: 0 5px 5px 5px;
  background: var(--r-panel);
  overflow: hidden;
}
.review-workspace .review-stage > * { border-color: var(--r-edge-soft); }

.review-workspace table { width: 100%; border-collapse: collapse; }
.review-workspace thead th {
  background: var(--r-rail-head);
  border-bottom: 1px solid var(--r-gold-line);
  color: #dcebf5;
  font: 700 0.72rem/1 var(--r-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
}
.review-workspace tbody td {
  border-bottom: 1px solid var(--r-edge-soft);
  padding: 13px 12px;
  vertical-align: top;
}
.review-workspace tbody tr:hover { background: rgba(88, 185, 230, 0.04); }

/* --- controls ----------------------------------------------------- */

.review-workspace input,
.review-workspace select,
.review-workspace textarea {
  background: rgba(5, 13, 19, 0.85);
  border: 1px solid var(--r-edge);
  border-radius: 5px;
  color: var(--r-text);
}
.review-workspace input:focus,
.review-workspace select:focus,
.review-workspace textarea:focus { outline: none; border-color: var(--r-blue); }

.review-workspace button {
  border: 1px solid rgba(159, 220, 247, 0.5);
  background: var(--r-sweep-strong);
  color: #04121c;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 6px;
  padding: 9px 16px;
}
.review-workspace button:hover:not(:disabled) { filter: brightness(1.1); background: var(--r-sweep-strong); }
.review-workspace button:disabled { opacity: 0.4; filter: none; }
.review-workspace button.secondary {
  background: rgba(5, 13, 19, 0.7);
  border-color: var(--r-edge);
  color: var(--r-muted);
  font-weight: 600;
}
.review-workspace button.secondary:hover:not(:disabled) {
  background: rgba(5, 13, 19, 0.7);
  border-color: rgba(143, 123, 255, 0.6);
  color: var(--r-text);
  filter: none;
}

/* --- filter chips ------------------------------------------------- */

.review-workspace .review-filter-link {
  border: 1px solid var(--r-edge);
  border-radius: 20px;
  background: rgba(5, 13, 19, 0.7);
  color: var(--r-muted);
  font-size: 0.79rem;
  padding: 4px 11px;
  text-decoration: none;
}
.review-workspace .review-filter-link:hover { border-color: rgba(143, 123, 255, 0.6); color: var(--r-text); }
.review-workspace .review-filter-link.is-active {
  background: linear-gradient(115deg, rgba(88, 185, 230, 0.28), rgba(143, 123, 255, 0.34));
  border-color: rgba(143, 123, 255, 0.55);
  color: #fff;
}
/* the mode tabs reuse the filter-link class but are not chips */
.review-workspace .review-mode-tab.review-filter-link { border-radius: 5px 5px 0 0; padding: 8px 18px; }

/* --- spelling or another name, asked once per family member -------- */

.review-workspace input[type="checkbox"],
.review-workspace input[type="radio"] { width: auto; }

.review-workspace .review-family-member {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.review-workspace .review-family-pick {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.review-workspace .review-family-kind {
  display: inline-flex;
  border: 1px solid var(--r-edge);
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}
.review-workspace .review-family-kind label {
  position: relative;
  display: inline-flex;
  margin: 0;
}
/* The radio stays in the accessibility tree and keeps working without
   script; only its painted box is replaced by the pill behind it. */
.review-workspace .review-family-kind input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.review-workspace .review-family-kind span {
  padding: 4px 11px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--r-muted);
}
.review-workspace .review-family-kind input:checked + span {
  background: rgba(143, 123, 255, 0.2);
  color: #dcd6ff;
}
.review-workspace .review-family-kind input[value="alias"]:checked + span {
  background: rgba(222, 178, 76, 0.18);
  color: #f0dca6;
}
.review-workspace .review-family-kind input:focus-visible + span {
  outline: 2px solid var(--r-blue);
  outline-offset: -2px;
}
.review-workspace .review-family-kind input[value="handle"]:checked + span {
  background: rgba(88, 185, 230, 0.2);
  color: #bfe3f7;
}

/* --- the grouped spelling table ----------------------------------- */

.review-workspace .review-groups { display: flex; flex-direction: column; gap: 10px; }

.review-workspace .review-group {
  border: 1px solid var(--r-edge);
  border-radius: 5px;
  background: var(--r-panel);
  overflow: hidden;
}
.review-workspace .review-group.settled { opacity: 0.72; }

.review-workspace .review-group-head {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 10px 13px;
  background: var(--r-rail-head);
  border-bottom: 1px solid var(--r-gold-line);
}
.review-workspace .review-group-name {
  font: 400 1.16rem/1.2 var(--r-serif);
  color: #eaf3fa;
}
.review-workspace .review-group-where {
  font: 0.78rem var(--r-mono);
  color: #bfe3f7;
}
.review-workspace .review-group-count {
  font-size: 0.79rem;
  color: var(--r-muted);
  font-variant-numeric: tabular-nums;
}
.review-workspace .review-group-status {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r-muted);
}
.review-workspace .review-group-status.ok { color: var(--r-good); }

/* Each family owns a table, so fixed widths are what make them line up. */
.review-workspace .review-group-table { table-layout: fixed; }
.review-workspace .review-group-member td {
  border-bottom: 1px solid var(--r-edge-soft);
  padding: 9px 13px;
  vertical-align: middle;
}
.review-workspace .review-group-member:last-child td { border-bottom: 0; }
.review-workspace .review-group-member.settled { opacity: 0.6; }

.review-workspace .review-group-pick { width: 40%; }
.review-workspace .review-group-pick label {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin: 0;
}
.review-workspace .review-group-heard,
.review-workspace .review-group-conf {
  width: 8%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.review-workspace .review-group-conf { font-weight: 700; }
.review-workspace .review-group-conf.hi { color: var(--r-good); }
.review-workspace .review-group-conf.mid { color: var(--r-warn); }
.review-workspace .review-group-conf.lo { color: var(--r-muted); }
.review-workspace .review-group-tier {
  width: 16%;
  font-size: 0.75rem;
  color: var(--r-muted);
  white-space: nowrap;
}
.review-workspace .review-group-kind { width: 28%; text-align: right; }
.review-workspace .review-group-apart {
  font-size: 0.72rem;
  color: var(--r-muted);
  font-style: italic;
}

.review-workspace .review-group-actions {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 12px 13px;
  border-top: 1px solid var(--r-edge-soft);
  background: rgba(88, 185, 230, 0.04);
}
.review-workspace .review-group-destination { font-size: 0.8rem; color: var(--r-muted); }
.review-workspace .review-group-destination select { margin-top: 4px; }

.review-workspace .review-tag-picker {
  flex: 1 1 320px;
  border: 1px solid var(--r-edge);
  border-radius: 5px;
  padding: 9px 12px;
  background: rgba(5, 13, 19, 0.6);
}
.review-workspace .review-tag-picker > summary {
  cursor: pointer;
  font: 700 0.66rem/1 var(--r-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r-muted);
}
.review-workspace .review-tag-picker[open] > summary { color: var(--r-blue); }
.review-workspace .review-tag-note {
  font-size: 0.76rem;
  color: var(--r-muted);
  margin: 9px 0;
}
.review-workspace .review-tag-family { margin-top: 9px; }
.review-workspace .review-tag-family-name {
  font: 700 0.66rem/1 var(--r-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--r-muted);
  margin: 0 0 5px;
}
.review-workspace .review-tag-family.is-selected .review-tag-family-name { color: var(--r-blue); }
.review-workspace .review-tag-family-name small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0.8;
}
.review-workspace .review-tag-option {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 0 7px 5px 0;
  padding: 3px 9px;
  border: 1px solid var(--r-edge);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--r-muted);
}
.review-workspace .review-tag-option:hover { border-color: rgba(143, 123, 255, 0.55); color: var(--r-text); }
.review-workspace .review-tag-option:has(input:checked) {
  background: linear-gradient(115deg, rgba(88, 185, 230, 0.26), rgba(143, 123, 255, 0.3));
  border-color: rgba(143, 123, 255, 0.55);
  color: #fff;
}
.review-workspace .review-group-proposal {
  font-size: 0.84rem;
  color: var(--r-blue);
  white-space: nowrap;
}

/* --- the grouped table on a narrow screen -------------------------- */
/* Five columns cannot share 375px. The right-hand one carries the
   three-way Spelling/Alias/OOC control, so at table widths it was simply
   cut off the edge: on a phone you could not mark an alias at all. Each
   spelling becomes a stacked block instead, with the control full width
   where it is reachable by thumb. */

@media (max-width: 720px) {
  .review-workspace .review-group-table,
  .review-workspace .review-group-table > tbody,
  .review-workspace .review-group-member,
  .review-workspace .review-group-member > td {
    display: block;
    width: auto;
  }
  .review-workspace .review-group-member {
    padding: 11px 13px;
    border-bottom: 1px solid var(--r-edge-soft);
  }
  .review-workspace .review-group-member:last-child { border-bottom: 0; }
  .review-workspace .review-group-member > td {
    padding: 0;
    border-bottom: 0;
  }
  .review-workspace .review-group-pick { font-size: 1.02rem; }

  /* count, match and tier read as one line under the name */
  .review-workspace .review-group-heard,
  .review-workspace .review-group-conf,
  .review-workspace .review-group-tier {
    display: inline-block;
    text-align: left;
    margin: 5px 12px 0 0;
    font-size: 0.82rem;
  }

  .review-workspace .review-group-kind { margin-top: 9px; text-align: left; }
  .review-workspace .review-group-kind .review-family-kind { display: flex; width: 100%; }
  .review-workspace .review-group-kind .review-family-kind label { flex: 1 1 0; }
  .review-workspace .review-group-kind .review-family-kind span {
    width: 100%;
    text-align: center;
    padding: 9px 4px;
  }

  .review-workspace .review-group-head { gap: 6px 11px; }
  .review-workspace .review-group-status { margin-left: 0; }

  .review-workspace .review-group-actions { flex-direction: column; align-items: stretch; }
  .review-workspace .review-group-destination select { width: 100%; }
  .review-workspace .review-group-actions button { width: 100%; padding: 12px 16px; }
  .review-workspace .review-tag-option { padding: 7px 12px; }
}

@media (max-width: 720px) {
  /* These three read as one line under the name. The block rule above is
     `.review-group-member > td`, which outranks a plain class selector, so
     they have to be named as cells to win. */
  .review-workspace .review-group-member > td.review-group-heard,
  .review-workspace .review-group-member > td.review-group-conf,
  .review-workspace .review-group-member > td.review-group-tier {
    display: inline-block;
    margin: 4px 10px 0 0;
  }
  .review-workspace .review-group-member { padding: 9px 12px; }
  .review-workspace .review-group-pick { font-size: 0.98rem; }
  .review-workspace .review-group-kind { margin-top: 7px; }
  .review-workspace .review-group-kind .review-family-kind span {
    padding: 7px 4px;
    font-size: 0.66rem;
  }
}

/* A member the extractor filed under a different directory. Shown rather than
   hidden: the reviewer needs to see that Cloud Kill is a Spell sitting in a
   PC's family, which is the reason not to tick it. */
.review-workspace .review-group-mismatch {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(222, 178, 76, 0.5);
  background: rgba(222, 178, 76, 0.12);
  color: #f0dca6;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The DM tab. It had no styles at all until 9 September 2026, so a hidden page
   printed as raw template markdown and ran off the side of a phone. */
/* The page itself sits in the same column as a review page, so the DM tab and the
   checker read as one website rather than two. */
.dm-page > .dm-block,
.dm-page > section {
  margin-inline: auto;
  max-width: 90rem;
}
.dm-page {
  padding: clamp(0.8rem, 2vw, 1.6rem);
}

.dm-page .dm-block {
  background: rgba(13, 18, 27, 0.97);
  border: 1px solid #30394a;
  border-radius: 0.65rem;
  margin: 0 0 0.9rem;
  padding: clamp(0.9rem, 2.2vw, 1.4rem);
}
.dm-page .dm-block > h2 {
  color: #f1f4fa;
  font-family: Georgia, serif;
  font-size: clamp(1.25rem, 3.2vw, 1.7rem);
  margin: 0 0 0.2rem;
}
.dm-page .dm-counts { color: #9dc2ff; font-size: 0.82rem; font-weight: 700; margin: 0.35rem 0 0.8rem; }
.dm-page .dm-record {
  background: #101722;
  border: 1px solid #293344;
  border-left: 3px solid #6281ff;
  border-radius: 0.45rem;
  margin-top: 0.7rem;
  padding: 0.75rem 0.85rem;
}
.dm-page .dm-record h3 {
  align-items: center;
  color: #f1f4fa;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.02rem;
  gap: 0.5rem;
  margin: 0;
}
.dm-page .dm-chip {
  background: #3a2a0b;
  border: 1px solid #7c5a18;
  border-radius: 999px;
  color: #ffd47c;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.16rem 0.5rem;
  text-transform: uppercase;
}
/* A vault path is long and has no spaces: let it break rather than push the page wide. */
.dm-page .dm-path {
  color: #7f8a9d;
  font-size: 0.72rem;
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dm-page .dm-said-as { color: #9dc2ff; font-size: 0.78rem; margin: 0.4rem 0 0; }
.dm-page .dm-empty { color: #8390a4; font-size: 0.82rem; font-style: italic; margin: 0.5rem 0 0; }
.dm-page .dm-panel {
  color: #9dc2ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0.7rem 0 0.2rem;
  text-transform: uppercase;
}
.dm-page .dm-lines p,
.dm-page .dm-secrets li {
  color: #dce3ef;
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0.2rem 0;
  overflow-wrap: anywhere;
}
.dm-page .dm-secrets { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* The How-to guide's title is one long capitalised word (SUMMURIZER): keep it
   on one line at every width instead of breaking it mid-word (12 September 2026). */
.public-site .public-page-heading.guide-heading h1 { font-size: clamp(2.1rem, 8.4vw, 4.4rem); overflow-wrap: normal; }

/* A campaign the owner opened to everyone (14 September 2026): the front
   page's "look inside" cards and the public card on /campaigns. */
.public-example-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.public-example-card {
  background: rgba(9, 23, 34, 0.88);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 0.55rem;
  padding: 1.3rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.public-example-card h3 { color: #e3eff6; font: 700 1.3rem Georgia, "Times New Roman", serif; margin: 0; }
.public-example-card small { color: var(--muted); font-size: 0.8rem; margin-top: -0.35rem; }
.public-example-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.62; margin: 0; }
.public-example-card .button { justify-self: start; margin-top: 0.3rem; }

.saved-campaign-card--public { border-left: 3px solid var(--gold); }