:root {
  --keyboard-inset: 0px;
  --ink: #17202a;
  --muted: #617181;
  --line: #c6d0da;
  --panel: #ffffff;
  --paper: #f5f1e8;
  --accent: #2f6480;
  --accent-dark: #1f455b;
  --danger: #a33c3c;
  --good: #2d695d;
  --warning: #9a6817;
  --shadow: 0 16px 34px rgba(31, 42, 53, 0.13);
  --body-wash-a: rgba(47, 100, 128, 0.14);
  --body-wash-b: rgba(150, 62, 82, 0.10);
  --panel-bg: rgba(255, 255, 255, 0.94);
  --focus-bg: rgba(255, 255, 255, 0.98);
  --sheet-bg: rgba(255, 255, 255, 0.96);
  --control-bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #fbfcfd;
  --surface-muted: #edf1f4;
  --surface-active: #f4fafc;
  --user-bg: #fff7e8;
  --success-bg: #f4fbf8;
  --pill-bg: #f7fafb;
  --disabled-ink: #8a98a6;
  --button-ink: #ffffff;
  --portrait-bg: linear-gradient(145deg, #d7e4e7, #b87a66 50%, #61756c);
  --meter-bg: #edf1f4;
  --meter-fill: linear-gradient(90deg, var(--danger), #d39a39, var(--good));
}

body[data-theme="dark"] {
  --ink: #edf4f8;
  --muted: #9fb0bf;
  --line: #34485a;
  --panel: #162330;
  --paper: #0d141b;
  --accent: #5f9fba;
  --accent-dark: #9fd0e5;
  --danger: #e28282;
  --good: #7fc6ae;
  --warning: #f0bd66;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
  --body-wash-a: rgba(95, 159, 186, 0.13);
  --body-wash-b: rgba(196, 111, 134, 0.10);
  --panel-bg: rgba(22, 35, 48, 0.96);
  --focus-bg: rgba(13, 20, 27, 0.99);
  --sheet-bg: rgba(22, 35, 48, 0.96);
  --control-bg: #101a23;
  --surface: #172532;
  --surface-soft: #101a23;
  --surface-muted: #243543;
  --surface-active: #1f3a4a;
  --user-bg: #332b1e;
  --success-bg: #173229;
  --pill-bg: #182734;
  --disabled-ink: #708292;
  --button-ink: #081018;
  --portrait-bg: linear-gradient(145deg, #223b48, #7d5150 50%, #435e55);
  --meter-bg: #1b2a36;
  --meter-fill: linear-gradient(90deg, #9b5555, #b98637, #5fa894);
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    linear-gradient(135deg, var(--body-wash-a), transparent 42%),
    linear-gradient(225deg, var(--body-wash-b), transparent 44%),
    var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  max-width: 100%;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--button-ink);
  border-radius: 6px;
  min-height: 38px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

button.ghost {
  background: var(--control-bg);
  color: var(--accent-dark);
}

button.danger {
  border-color: var(--danger);
  color: var(--danger);
}

.file-button {
  border: 1px solid var(--accent);
  background: var(--control-bg);
  color: var(--accent-dark);
  border-radius: 6px;
  min-height: 38px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.file-button input {
  display: none;
}

.file-button.disabled {
  opacity: 0.55;
  pointer-events: none;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control-bg);
  color: var(--ink);
  padding: 9px 10px;
}

textarea {
  min-height: 112px;
  resize: vertical;
}

.mention-editor-shell {
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  min-width: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.story-mention-shell {
  grid-column: 1 / -1;
  max-height: min(38dvh, 360px);
  min-height: 112px;
}

.generation-mention-shell {
  max-height: min(36dvh, 340px);
  min-height: 112px;
}

.mention-editor-shell textarea {
  border: 0;
  border-radius: 0;
  font: inherit;
  line-height: 1.35;
  position: relative;
  z-index: 2;
}

.story-mention-shell #story-message {
  height: 100%;
  max-height: min(38dvh, 360px);
  min-height: inherit;
  overflow-y: auto;
  padding-bottom: 16px;
  scroll-padding-bottom: 16px;
}

.generation-mention-shell #character-generation-reply {
  height: 100%;
  max-height: min(36dvh, 340px);
  min-height: inherit;
  overflow-y: auto;
  padding-bottom: 16px;
  scroll-padding-bottom: 16px;
}

.story-mention-shell .mention-highlight-input {
  background: transparent;
  color: transparent;
}

.mention-highlight-input {
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
}

.mention-highlight-input::placeholder {
  color: var(--muted);
}

.mention-highlight-input::selection {
  background: rgba(95, 159, 186, 0.32);
}

.mention-highlight-preview {
  border: 1px solid transparent;
  box-sizing: border-box;
  color: var(--ink);
  font: inherit;
  line-height: 1.35;
  inset: 0;
  margin: 0;
  overflow: hidden;
  padding: 9px 10px;
  pointer-events: none;
  position: absolute;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  z-index: 1;
}

.mention-editor-shell:focus-within .mention-highlight-input {
  background: var(--control-bg);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

.mention-editor-shell:focus-within .mention-highlight-preview {
  visibility: hidden;
}

.mention-line {
  border-radius: 4px;
  display: inline;
  font-weight: inherit;
  padding: 0;
}

.mention-question {
  background: rgba(211, 154, 57, 0.18);
  color: #8a5a13;
}

.mention-reply {
  background: rgba(47, 100, 128, 0.18);
  color: var(--accent-dark);
}

.mention-no-reply {
  background: rgba(97, 113, 129, 0.14);
  color: var(--muted);
  text-decoration: line-through;
}

.mention-dialogue,
.mention-dialogue-accept,
.mention-dialogue-decline {
  background: rgba(20, 184, 166, 0.16);
  color: #0f766e;
}

.mention-dialogue-decline {
  text-decoration: line-through;
}

body[data-theme="dark"] .mention-question {
  color: #f1c477;
}

body[data-theme="dark"] .mention-reply {
  color: #9fd0e5;
}

body[data-theme="dark"] .mention-dialogue,
body[data-theme="dark"] .mention-dialogue-accept,
body[data-theme="dark"] .mention-dialogue-decline {
  color: #2dd4bf;
}

.mention-autocomplete {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 2px;
  max-height: 248px;
  overflow: auto;
  padding: 4px;
  position: absolute;
  z-index: 5000;
}

.mention-autocomplete[hidden] {
  display: none;
}

.mention-autocomplete button {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  display: grid;
  gap: 2px;
  justify-items: start;
  min-height: 38px;
  padding: 7px 9px;
  text-align: left;
}

.mention-autocomplete button.active,
.mention-autocomplete button:hover {
  background: var(--surface-active);
  border-color: var(--accent);
}

.mention-name {
  font-weight: 800;
}

.mention-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.player-question-panel {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  display: grid;
  flex: 1 1 100%;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 8px;
}

.player-question-item {
  align-items: start;
  border-left: 4px solid #d39a39;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-left: 8px;
}

.player-question-item.answered {
  border-left-color: var(--good);
  opacity: 0.78;
}

.player-question-item p {
  margin: 2px 0;
}

.question-state {
  color: var(--good);
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
}

.dialogue-request-panel {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  display: grid;
  flex: 1 1 100%;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 8px;
}

.dialogue-request-item {
  align-items: start;
  border-left: 4px solid #14b8a6;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-left: 8px;
}

.dialogue-request-item.answered {
  border-left-color: var(--good);
  opacity: 0.78;
}

.dialogue-request-item p {
  margin: 2px 0;
}

.dialogue-request-item small {
  color: var(--muted);
  display: block;
}

.large-textarea {
  min-height: 280px;
  font-family: Arial, Helvetica, sans-serif;
}

.app-header {
  width: min(1880px, calc(100% - 28px));
  margin: 18px auto 12px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
}

h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

h2 {
  font-size: 1.2rem;
}

main {
  width: min(1880px, calc(100% - 28px));
  margin: 0 auto 40px;
}

.session-pill {
  border: 1px solid var(--line);
  background: var(--control-bg);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  font-weight: 700;
}

.session-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.desktop-session-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.header-campaign-control,
.menu-campaign-control {
  align-items: center;
  color: var(--muted);
  display: flex;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
}

.header-campaign-control select {
  max-width: 260px;
  min-height: 38px;
  width: auto;
}

.app-menu {
  position: relative;
}

.app-menu summary {
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent-dark);
  cursor: pointer;
  display: none;
  font-weight: 800;
  list-style: none;
  min-height: 38px;
  padding: 8px 12px;
  user-select: none;
}

.app-menu summary::-webkit-details-marker {
  display: none;
}

.app-menu summary::after {
  content: " +";
}

.app-menu[open] summary::after {
  content: " -";
}

.app-menu-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.campaign-file-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.advanced-tools {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 6px;
  margin-top: 10px;
  padding: 0;
}

.advanced-tools summary {
  color: var(--accent-dark);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
  padding: 9px 10px;
  user-select: none;
}

.advanced-tools summary::-webkit-details-marker {
  display: none;
}

.advanced-tools summary::after {
  content: " +";
}

.advanced-tools[open] summary::after {
  content: " -";
}

.advanced-tools .stack {
  border-top: 1px solid var(--line);
  padding: 10px;
}

.login-panel,
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.login-panel {
  max-width: 560px;
  padding: 18px;
}

.campaign-choice-panel {
  margin-inline: auto;
}

.landing-view,
.campaign-choice-screen,
.welcome-screen {
  display: grid;
  gap: 22px;
  min-height: calc(100dvh - 130px);
}

.landing-view {
  align-items: center;
  grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr);
}

.campaign-choice-screen,
.welcome-screen {
  align-items: center;
  grid-template-columns: minmax(320px, 0.85fr) minmax(360px, 1.15fr);
}

.campaign-choice-screen .landing-montage,
.welcome-screen .landing-montage {
  order: 2;
}

.landing-copy,
.campaign-choice-copy,
.welcome-panel {
  display: grid;
  gap: 14px;
  max-width: 680px;
}

.landing-copy h2,
.campaign-choice-copy h2,
.welcome-panel h2 {
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 0.98;
}

.landing-lede,
#welcome-copy {
  color: var(--ink);
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  line-height: 1.58;
  margin: 0;
  max-width: 62ch;
}

.landing-login-form,
.campaign-choice-form {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) auto;
  max-width: 620px;
}

.landing-login-form label,
.campaign-choice-form label {
  color: var(--muted);
  display: grid;
  font-size: 0.82rem;
  font-weight: 900;
  gap: 5px;
  text-transform: uppercase;
}

.landing-login-form input,
.campaign-choice-form select {
  min-height: 46px;
}

.landing-login-form button,
.campaign-choice-form button,
#enter-dashboard {
  min-height: 46px;
  padding-inline: 18px;
}

.driax-map-link {
  align-items: center;
  background: var(--control-bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent-dark);
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 42px;
  padding: 8px 14px;
  text-decoration: none;
  width: fit-content;
}

.driax-map-link:hover,
.driax-map-link:focus {
  background: var(--surface-active);
  outline: none;
}

.landing-montage {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(48px, 9dvh));
  min-height: 520px;
}

.landing-montage.compact {
  min-height: 430px;
}

.landing-image-tile {
  background: var(--surface-muted);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.landing-image-tile img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.landing-image-tile::after {
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.42));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.landing-image-tile.placeholder {
  background:
    linear-gradient(145deg, rgba(47, 100, 128, 0.36), rgba(150, 62, 82, 0.24)),
    var(--surface-muted);
}

.landing-image-tile.tile-1 {
  grid-column: 1 / span 3;
  grid-row: 1 / span 3;
}

.landing-image-tile.tile-2 {
  grid-column: 4 / span 3;
  grid-row: 1 / span 2;
}

.landing-image-tile.tile-3 {
  grid-column: 4 / span 2;
  grid-row: 3 / span 2;
}

.landing-image-tile.tile-4 {
  grid-column: 1 / span 2;
  grid-row: 4 / span 3;
}

.landing-image-tile.tile-5 {
  grid-column: 3 / span 2;
  grid-row: 4 / span 3;
}

.landing-image-tile.tile-6 {
  grid-column: 5 / span 2;
  grid-row: 5 / span 2;
}

.landing-image-tile.tile-7 {
  grid-column: 6 / span 1;
  grid-row: 3 / span 2;
}

.landing-image-tile.tile-8 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}

.welcome-steps {
  display: grid;
  gap: 10px;
  margin: 4px 0;
}

.welcome-steps div {
  border-left: 3px solid var(--accent);
  display: grid;
  gap: 3px;
  padding: 6px 0 6px 12px;
}

.welcome-steps span {
  color: var(--muted);
  line-height: 1.45;
}

.welcome-campaign-switcher {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(220px, 1fr) auto;
  max-width: 620px;
}

.welcome-campaign-switcher label {
  color: var(--muted);
  display: grid;
  font-size: 0.82rem;
  font-weight: 900;
  gap: 5px;
  text-transform: uppercase;
}

.welcome-campaign-switcher select,
.welcome-campaign-switcher button {
  min-height: 42px;
}

.welcome-campaign-switcher .status {
  grid-column: 1 / -1;
  margin: 0;
}

.welcome-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 700px) {
  .mention-highlight-preview {
    padding: 7px 8px;
  }

  .player-question-item {
    grid-template-columns: 1fr;
  }

  .player-question-item .inline-actions {
    justify-content: start;
  }

  .landing-view,
  .campaign-choice-screen,
  .welcome-screen {
    gap: 16px;
  }

  .landing-copy h2,
  .campaign-choice-copy h2,
  .welcome-panel h2 {
    font-size: clamp(2rem, 14vw, 3.4rem);
  }

  .landing-login-form,
  .campaign-choice-form {
    grid-template-columns: 1fr;
  }

  .landing-montage,
  .landing-montage.compact {
    gap: 7px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(56px, 18vw));
    min-height: 300px;
  }

  .landing-image-tile.tile-1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }

  .landing-image-tile.tile-2 {
    grid-column: 3 / span 2;
    grid-row: 1 / span 1;
  }

  .landing-image-tile.tile-3 {
    grid-column: 3 / span 2;
    grid-row: 2 / span 2;
  }

  .landing-image-tile.tile-4 {
    grid-column: 1 / span 2;
    grid-row: 3 / span 2;
  }

  .landing-image-tile.tile-5,
  .landing-image-tile.tile-6,
  .landing-image-tile.tile-7,
  .landing-image-tile.tile-8 {
    display: none;
  }
}

.inline-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 35;
  background:
    linear-gradient(135deg, var(--body-wash-a), transparent 42%),
    linear-gradient(225deg, var(--body-wash-b), transparent 44%),
    var(--paper);
  padding: 8px 0;
}

.mode-tabs [data-view] {
  align-items: center;
  background: var(--control-bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent-dark);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
}

.mode-tabs [data-view].active {
  background: var(--accent);
  color: var(--button-ink);
}

.mode-tabs [data-view].attention:not(.active) {
  border-color: #67d391;
  color: #9ff0bd;
  box-shadow: 0 0 0 2px rgba(103, 211, 145, 0.16);
}

.mode-tabs [data-view].attention.active {
  box-shadow: 0 0 0 3px rgba(103, 211, 145, 0.24);
}

.workspace,
.sheet-layout,
.admin-grid,
.setup-layout {
  display: grid;
  gap: 12px;
}

.dashboard-view {
  display: grid;
  gap: 12px;
}

.dashboard-panel {
  display: grid;
  gap: 12px;
}

.dashboard-toolbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.dashboard-player-control {
  align-items: center;
  display: flex;
  gap: 6px;
  margin: 0;
}

.dashboard-player-control select {
  min-width: 150px;
}

.dashboard-create-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.dashboard-create-form[hidden] {
  display: none;
}

.dashboard-create-form textarea {
  min-height: 84px;
}

.dashboard-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-summary span {
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  padding: 6px 9px;
}

.dashboard-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.monster-manual-view {
  display: grid;
  gap: 12px;
}

.monster-manual-render {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(230px, 0.28fr) minmax(0, 1fr);
  min-height: 680px;
}

.monster-manual-sidebar {
  border-right: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-right: 12px;
}

.monster-manual-source {
  display: grid;
  gap: 2px;
}

.monster-manual-source span {
  color: var(--muted);
  font-size: 0.86rem;
}

.monster-manual-search {
  display: grid;
  gap: 4px;
}

.monster-profile-list {
  display: grid;
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}

.monster-profile-list button {
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  display: grid;
  gap: 3px;
  padding: 9px;
  text-align: left;
}

.monster-profile-list button.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

.monster-profile-list small {
  color: var(--muted);
}

.monster-manual-raw textarea,
.monster-profile-raw textarea {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  min-height: 280px;
  white-space: pre;
}

.monster-manual-raw textarea {
  min-height: 220px;
}

.monster-profile-editor {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.monster-editor-header {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr);
}

.monster-editor-header > div,
.monster-editor-grid {
  display: grid;
  gap: 10px;
}

.monster-editor-header > div {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.monster-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monster-editor-card {
  display: grid;
  gap: 9px;
}

.monster-editor-card h3 {
  font-size: 1rem;
  margin: 0;
}

.monster-editor-card textarea {
  min-height: 72px;
}

.monster-combat-stats {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.monster-combat-stats span {
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  display: grid;
  gap: 2px;
  min-height: 54px;
  padding: 8px;
}

.monster-combat-stats b {
  color: var(--ink);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.monster-stat-table,
.monster-attack-table,
.monster-skill-table,
.monster-spell-table,
.monster-mechanics-table {
  border-collapse: collapse;
  width: 100%;
}

.monster-stat-table th,
.monster-stat-table td,
.monster-attack-table th,
.monster-attack-table td,
.monster-skill-table th,
.monster-skill-table td,
.monster-spell-table th,
.monster-spell-table td,
.monster-mechanics-table th,
.monster-mechanics-table td {
  border-bottom: 1px solid var(--line);
  padding: 7px 6px;
  text-align: left;
  vertical-align: top;
}

.monster-stat-table thead th,
.monster-attack-table thead th,
.monster-skill-table thead th,
.monster-spell-table thead th,
.monster-mechanics-table thead th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.monster-canonical-link,
.monster-active-upgrade {
  display: block;
  font-size: 0.72rem;
  margin-top: 4px;
}

.monster-canonical-link {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
}

.monster-active-upgrade {
  border-left: 2px solid var(--accent);
  color: var(--muted);
  padding-left: 6px;
}

.monster-resolver-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.monster-resolver-grid h4,
.monster-editor-card h4 {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 4px 0 0;
  text-transform: uppercase;
}

.monster-combat-kit {
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 10px;
  padding: 10px;
}

.monster-combat-kit p {
  margin: 4px 0 0;
}

.monster-combat-kit dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.monster-combat-kit dl div {
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
}

.monster-combat-kit dt {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.monster-combat-kit dd {
  margin: 3px 0 0;
}

.monster-ability-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.monster-ability-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 6px;
  padding: 9px;
}

.monster-ability-card header {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.monster-ability-card header span,
.monster-ability-card small {
  color: var(--muted);
}

.monster-ability-card p {
  margin: 0;
}

.monster-loadout-summary {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.86rem;
  gap: 10px;
  margin-bottom: 8px;
}

.monster-loadout-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.monster-loadout-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 5px;
  padding: 9px;
}

.monster-loadout-card header {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.monster-loadout-card header span,
.monster-loadout-card small,
.monster-loadout-rule {
  color: var(--muted);
}

.monster-loadout-card p,
.monster-loadout-rule {
  margin: 0;
}

.monster-loadout-deltas {
  display: grid;
  gap: 4px;
  margin: 0;
}

.monster-loadout-deltas div {
  display: grid;
  gap: 4px;
  grid-template-columns: 66px minmax(0, 1fr);
}

.monster-loadout-deltas dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.monster-loadout-deltas dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.monster-loadout-rule {
  font-size: 0.86rem;
  margin-top: 8px;
}

@media (max-width: 920px) {
  .monster-manual-render,
  .monster-editor-header,
  .monster-editor-header > div,
  .monster-editor-grid {
    grid-template-columns: 1fr;
  }

  .monster-manual-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
    padding-right: 0;
  }

  .monster-combat-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monster-combat-kit dl {
    grid-template-columns: 1fr;
  }
}

.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--line-strong);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.dashboard-card.question {
  border-left-color: #d46bd9;
}

.dashboard-card.response,
.dashboard-card.dm_turn,
.dashboard-card.dm_turn_unprocessed {
  border-left-color: #f0b64f;
}

.dashboard-card.dm_turn_processing {
  border-left-color: #5fb8d4;
}

.dashboard-card.level_up {
  border-left-color: #67d391;
}

.dashboard-card.unread {
  border-left-color: #5fb8d4;
}

.dashboard-card.passed,
.dashboard-card.waiting_dm,
.dashboard-card.waiting_others {
  border-left-color: #8c9aa5;
}

.dashboard-card.passed {
  border-left-color: #38bdf8;
}

.dashboard-card-main {
  align-items: start;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.dashboard-portraits {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  isolation: isolate;
  min-height: 48px;
  padding-right: 6px;
  text-decoration: none;
}

.dashboard-portrait {
  align-items: center;
  background: var(--portrait-bg);
  border: 2px solid var(--surface);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(10, 25, 35, 0.18);
  color: #fff;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 900;
  height: 46px;
  justify-content: center;
  margin-right: -10px;
  overflow: hidden;
  position: relative;
  width: 46px;
}

.dashboard-portrait img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.dashboard-portrait.more {
  background: var(--control-bg);
  color: var(--accent-dark);
  margin-right: 0;
}

.dashboard-portraits.empty-portraits {
  background: var(--control-bg);
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  min-height: 38px;
  padding: 8px 10px;
}

.dashboard-portraits:hover .dashboard-portrait,
.dashboard-portraits:focus-visible .dashboard-portrait {
  border-color: var(--accent);
}

.dashboard-card h3 {
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.dashboard-card p {
  margin: 0;
}

.dashboard-card-actions {
  flex: 0 0 auto;
}

.dashboard-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.dashboard-badge {
  align-items: center;
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.1;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  white-space: normal;
}

.dashboard-badge.question {
  border-color: #d46bd9;
  color: #f0a8f4;
}

.dashboard-badge.response,
.dashboard-badge.dm_turn,
.dashboard-badge.dm_turn_unprocessed {
  border-color: #f0b64f;
  color: #ffd48a;
}

.dashboard-badge.dm_turn_processing {
  border-color: #5fb8d4;
  color: #a9e7f6;
}

.dashboard-badge.level_up {
  border-color: #67d391;
  color: #9ff0bd;
}

.dashboard-badge.unread {
  border-color: #5fb8d4;
  color: #a9e7f6;
}

.dashboard-detail,
.dashboard-preview {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.workspace {
  grid-template-columns: minmax(0, 1fr) clamp(410px, 26vw, 500px);
  height: calc(100dvh - 178px);
  min-height: 560px;
  align-items: stretch;
}

.chat-column {
  min-height: 0;
}

.sheet-layout {
  grid-template-columns: 300px minmax(0, 1fr);
}

.admin-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.setup-layout .sheet-render {
  grid-column: 1 / -1;
}

.scene-control-panel {
  grid-column: 1 / -1;
}

.battlefield-audit-panel {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
}

.battlefield-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.battlefield-meta span {
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  padding: 5px 8px;
}

.battlefield-meta strong {
  color: var(--ink);
  margin-right: 4px;
}

.battlefield-pending {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--accent);
  border-radius: 8px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 12px;
}

.battlefield-pending p,
.battlefield-audit-head h3,
.battlefield-audit-head p,
.battlefield-phase h4 {
  margin: 0;
}

.battlefield-table-wrap {
  overflow-x: auto;
}

.battlefield-table {
  min-width: 680px;
}

.reaction-track {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  margin-right: 6px;
  vertical-align: middle;
}

.reaction-dot {
  border: 1px solid var(--accent);
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  position: relative;
  width: 10px;
}

.reaction-dot.available {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.reaction-dot.spent {
  background: color-mix(in srgb, var(--danger) 45%, transparent);
  border-color: var(--danger);
}

.reaction-dot.spent::after {
  background: var(--danger);
  content: "";
  height: 2px;
  left: -2px;
  position: absolute;
  top: 4px;
  transform: rotate(-35deg);
  width: 14px;
}

.combat-setup-panel {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 12px 0;
  padding: 10px 12px;
}

.combat-tracker-panel {
  background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
}

.combat-tracker-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.combat-tracker-head h3,
.combat-tracker-head p {
  margin: 0;
}

.combat-tracker-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.combat-tracker-pill.active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

.combat-tracker-pill.complete {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}

.combat-tracker-table {
  min-width: 920px;
}

.combat-tracker-table td,
.combat-tracker-table th {
  white-space: nowrap;
}

.combat-tracker-table td:first-child {
  white-space: normal;
}

.combat-tracker-table small {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  margin-top: 2px;
}

.combat-tracker-career {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.combat-tracker-career summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 800;
}

.combat-setup-panel summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
}

.combat-setup-panel summary span {
  color: var(--ink);
  font-weight: 800;
}

.combat-setup-panel summary small {
  color: var(--muted);
  font-size: 0.8rem;
}

.combat-setup-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  margin-top: 12px;
}

.combat-setup-grid label {
  color: var(--muted);
  display: grid;
  font-size: 0.78rem;
  gap: 4px;
  text-transform: uppercase;
}

.combat-setup-grid input,
.combat-setup-grid select,
.combat-setup-grid textarea {
  min-width: 0;
  text-transform: none;
}

.combat-setup-grid textarea {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  min-height: 94px;
  resize: vertical;
}

.combat-setup-wide {
  grid-column: 1 / -1;
}

.combat-setup-check {
  align-items: center;
  display: flex !important;
  gap: 8px !important;
  grid-template-columns: auto 1fr;
  text-transform: none !important;
}

.combat-setup-check input {
  width: auto;
}

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

.combat-setup-box {
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-column: span 2;
  padding: 10px;
}

.combat-setup-box h4 {
  color: var(--accent);
  font-size: 0.78rem;
  margin: 0;
  text-transform: uppercase;
}

.combat-setup-add-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.combat-setup-chip-list {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
}

.combat-setup-chip {
  align-items: center;
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex !important;
  font-size: 0.82rem !important;
  gap: 6px !important;
  padding: 5px 8px;
  text-transform: none !important;
}

.combat-setup-chip input {
  width: auto;
}

.combat-setup-number-list {
  display: grid;
  gap: 6px;
}

.combat-setup-inline-number {
  align-items: center;
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: minmax(0, 1fr) 80px;
  text-transform: none !important;
}

.combat-setup-inline-number span {
  color: var(--ink);
  font-size: 0.86rem;
}

.combat-setup-inline-number small {
  color: var(--muted);
}

.battlefield-audit-head {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

.battlefield-audit-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.6fr);
  margin-top: 10px;
}

.battlefield-audit-grid h4 {
  font-size: 0.78rem;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.battlefield-initiative {
  table-layout: auto;
}

.battlefield-phases {
  display: grid;
  gap: 12px;
}

.battlefield-phase {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}

.battlefield-phase ol {
  margin: 0;
  padding-left: 20px;
}

.battlefield-phase li + li {
  margin-top: 4px;
}

.battlefield-raw {
  margin-top: 14px;
}

.battlefield-raw pre {
  background: var(--surface-muted);
  max-height: 420px;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .battlefield-audit-panel {
    justify-self: start;
    max-width: calc(100vw - 12px);
    width: calc(100vw - 12px);
  }

  .battlefield-pending {
    align-items: stretch;
    flex-direction: column;
  }

  .battlefield-audit-grid {
    grid-template-columns: 1fr;
  }

  .combat-setup-grid {
    grid-template-columns: 1fr;
  }

  .combat-setup-box {
    grid-column: 1;
  }
}

.scene-control-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.scene-control-meta span,
.scene-control-chip {
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  padding: 5px 8px;
}

.scene-control-chip strong {
  color: var(--ink);
  margin-right: 5px;
}

.scene-control-party-npcs {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.scene-control-party-npcs h3 {
  font-size: 0.92rem;
  margin: 0;
}

.scene-control-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
}

.scene-control-card.active {
  border-color: var(--accent);
}

.scene-control-card-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.scene-control-card-tools {
  align-items: flex-end;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.scene-control-card h3,
.scene-control-card h4,
.scene-control-card p {
  margin: 0;
}

.scene-control-card h3 {
  font-size: 1rem;
}

.scene-control-card h4 {
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.scene-control-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.scene-control-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.scene-control-grid section {
  min-width: 0;
}

.scene-control-grid ul {
  margin: 0;
  padding-left: 18px;
}

.scene-control-guidance {
  background: var(--surface-muted);
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.9rem;
  padding: 8px 10px;
}

.campaign-documents-view {
  display: grid;
  gap: 12px;
}

.npc-dialogue-lab {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding-bottom: 14px;
}

.npc-dialogue-lab.expanded {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
  grid-template-rows: auto auto minmax(0, 1fr);
  inset: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  padding: 14px;
  position: fixed;
  z-index: 2147482000;
}

.npc-dialogue-lab.expanded #npc-dialogue-lab-render {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.npc-dialogue-lab.expanded .npc-dialogue-lab-grid {
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 0.7fr);
}

.npc-dialogue-lab.expanded .npc-dialogue-lab-transcript {
  max-height: none;
}

@media (max-width: 900px) {
  .npc-dialogue-lab.expanded {
    border-radius: 8px;
    inset: max(6px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    padding: 10px;
  }

  .npc-dialogue-lab.expanded .npc-dialogue-lab-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.focused-dialogue-expanded {
  overflow: hidden;
}

body.focused-dialogue-expanded .story-form {
  pointer-events: none;
  visibility: hidden;
}

.npc-dialogue-availability {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
}

.npc-dialogue-availability.blocked {
  border-left-color: var(--danger);
}

.npc-dialogue-availability span {
  color: var(--muted);
  font-size: 0.9rem;
}

.npc-dialogue-lab.pc-only .npc-dialogue-availability {
  display: none;
}

.npc-dialogue-lab-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
}

.npc-dialogue-lab-grid.pc-only {
  grid-template-columns: minmax(0, 1fr);
}

.npc-dialogue-lab-grid.pc-only .npc-dialogue-lab-meta {
  display: none;
}

.npc-dialogue-lab-form {
  display: grid;
  gap: 10px;
}

.npc-dialogue-lab-npc-choices {
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 8px 10px 10px;
}

.npc-dialogue-lab-npc-choices legend {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0 4px;
  text-transform: uppercase;
}

.npc-dialogue-lab-npc-choices label {
  align-items: center;
  display: flex;
  gap: 7px;
}

.npc-dialogue-lab-npc-choices input {
  min-width: 0;
  width: auto;
}

.npc-dialogue-lab-hint {
  color: var(--muted);
  font-size: 0.86rem;
  margin: -2px 0 0;
}

.npc-dialogue-lab-meta {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.npc-dialogue-lab-meta h3 {
  font-size: 0.95rem;
  margin: 0;
}

.npc-dialogue-lab-memory {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
}

.npc-dialogue-lab-memory ul {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  max-height: 320px;
  overflow: auto;
  padding: 0;
}

.npc-dialogue-lab-memory li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 7px 8px;
}

.npc-dialogue-lab-updates {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.npc-dialogue-lab-updates li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.86rem;
  padding: 7px 8px;
}

.npc-dialogue-lab-updates span {
  color: var(--muted);
}

.npc-dialogue-lab-transcript {
  display: grid;
  gap: 10px;
  max-height: min(460px, 46vh);
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.npc-dialogue-lab-message {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  line-height: 1.48;
  padding: 10px;
}

.npc-dialogue-lab-message.pc {
  background: var(--surface-muted);
}

.npc-dialogue-lab-message.npc {
  background: var(--control-bg);
}

.npc-dialogue-lab-message-header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.npc-dialogue-lab-message-header strong {
  color: var(--accent-strong);
  font-size: 0.94rem;
}

.npc-dialogue-lab-message-header span {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 2px 7px;
}

.npc-dialogue-lab-audience {
  background: rgba(118, 197, 218, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  display: grid;
  gap: 2px;
  padding: 7px 9px;
}

.npc-dialogue-lab-audience span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.npc-dialogue-lab-audience strong {
  color: var(--text);
  font-size: 0.9rem;
}

.npc-dialogue-declined {
  background: rgba(246, 201, 107, 0.08);
  border: 1px solid rgba(246, 201, 107, 0.45);
  border-left: 3px solid var(--accent-strong);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.88rem;
  padding: 8px 10px;
}

.npc-dialogue-declined strong {
  color: var(--accent-strong);
}

.npc-dialogue-lab-message-body {
  display: grid;
  gap: 9px;
}

.npc-dialogue-lab-paragraph .message-text-block,
.npc-dialogue-lab-paragraph .message-text-block p {
  margin: 0;
}

.campaign-documents-render {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  min-height: calc(100dvh - 245px);
}

.campaign-document-sidebar {
  border-right: 1px solid var(--line);
  display: grid;
  gap: 12px;
  max-height: calc(100dvh - 250px);
  overflow: auto;
  padding-right: 12px;
}

.campaign-document-source {
  display: grid;
  gap: 4px;
}

.campaign-document-source span,
.campaign-document-group small {
  color: var(--muted);
  font-size: 0.82rem;
}

.campaign-document-group {
  display: grid;
  gap: 6px;
}

.campaign-document-group h3 {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.campaign-document-group button {
  align-items: start;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 8px;
  text-align: left;
}

.campaign-document-group button:hover,
.campaign-document-group button:focus-visible,
.campaign-document-group button.active {
  background: var(--control-bg);
  border-color: var(--line);
}

.campaign-document-group button.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.campaign-document-reader {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.campaign-document-reader header {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 10px;
}

.campaign-document-reader h2 {
  margin: 0;
}

.document-format {
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 8px;
}

.campaign-document-markdown {
  font-size: 0.96rem;
  line-height: 1.65;
  max-width: 980px;
}

.campaign-document-markdown .message-heading {
  margin-bottom: 8px;
  margin-top: 22px;
}

.campaign-document-markdown p,
.campaign-document-markdown ul,
.campaign-document-markdown ol {
  margin-bottom: 12px;
}

.campaign-document-markdown li + li {
  margin-top: 4px;
}

.scene-template-overview {
  display: grid;
  gap: 14px;
}

.scene-template-summary {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  max-width: 980px;
  padding: 10px 12px;
}

.scene-template-summary span {
  color: var(--muted);
  font-size: 0.88rem;
}

.scene-template-family {
  display: grid;
  gap: 8px;
}

.scene-template-family h3 {
  margin: 0;
}

.scene-template-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.scene-template-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.scene-template-card-heading {
  display: grid;
  gap: 4px;
}

.scene-template-card-heading code {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: normal;
}

.scene-template-card-body {
  font-size: 0.9rem;
  line-height: 1.5;
}

.scene-template-card-body p,
.scene-template-card-body ul,
.scene-template-card-body ol {
  margin-bottom: 8px;
}

.scene-template-raw-source {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-width: 980px;
  padding: 10px 12px;
}

.campaign-document-pre {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
  max-height: calc(100dvh - 340px);
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

.panel {
  padding: 14px;
}

.sheet-picker-section {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.sheet-picker-section h2 {
  margin-bottom: 0;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
}

.panel-actions,
.inline-actions,
.generation-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.play-actions-drawer {
  margin-left: auto;
  position: relative;
}

.play-actions-drawer summary {
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent-dark);
  cursor: pointer;
  display: block;
  font-weight: 800;
  list-style: none;
  min-height: 32px;
  padding: 6px 10px;
  text-align: center;
  user-select: none;
}

.play-actions-drawer summary::-webkit-details-marker {
  display: none;
}

.play-actions-drawer summary::after {
  content: " +";
}

.play-actions-drawer[open] summary::after {
  content: " -";
}

.play-actions-drawer .panel-actions {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  justify-content: flex-start;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: min(560px, calc(100vw - 32px));
  z-index: 60;
}

.mobile-only-tool {
  display: none;
}

.question-alert-button {
  display: none;
  flex: 0 0 auto;
  gap: 4px;
  font-weight: 900;
  min-height: 32px;
  min-width: 34px;
  padding: 5px 8px;
  position: relative;
}

.question-alert-label {
  font-size: 0.78rem;
}

.question-alert-button .chat-unread-badge {
  font-size: 0.62rem;
  height: 1.35em;
  margin-left: 3px;
  min-width: 1.35em;
}

.question-alert-button:not(.has-open) .chat-unread-badge {
  display: none;
}

.question-alert-button.has-open {
  background: #d39a39;
  border-color: #ffd28a;
  color: #061018;
  box-shadow: 0 0 0 2px rgba(211, 154, 57, 0.18);
}

.scene-image-focus {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.82rem;
  font-weight: 800;
  gap: 6px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.scene-image-focus select {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  min-height: 36px;
  min-width: 190px;
  padding: 6px 8px;
  text-transform: none;
  width: auto;
}

.combat-intent-lab {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 12px;
  inset: 12px;
  margin: 0;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  position: fixed;
  scrollbar-gutter: stable;
  z-index: 12000;
}

.combat-intent-lab-form {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.loot-lab {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  display: grid;
  gap: 12px;
  margin: 8px 0 12px;
  padding: 12px;
}

.loot-lab-form {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding-bottom: 12px;
}

.loot-form-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.loot-section-heading {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.loot-section-heading h3,
.loot-section-heading h4 {
  margin: 0;
}

.loot-packet,
.loot-stash {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 10px;
}

.loot-columns {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.loot-columns h5 {
  color: var(--accent-dark);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.loot-item-list {
  display: grid;
  gap: 6px;
}

.loot-item {
  background: rgba(0, 0, 0, 0.12);
  border-left: 3px solid var(--accent);
  display: grid;
  gap: 2px;
  padding: 8px;
}

.loot-item span {
  color: var(--muted);
  font-size: 0.84rem;
}

.loot-item p,
.loot-note,
.loot-history p {
  margin: 0;
}

.loot-stash-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.loot-stash-summary span {
  background: var(--pill-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 8px;
}

.combat-intent-header,
.combat-intent-summary {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.combat-intent-header h3 {
  margin: 0;
}

.combat-intent-header {
  background: linear-gradient(180deg, var(--surface-soft) 85%, rgba(16, 28, 35, 0));
  margin: -12px -12px 0;
  padding: 12px 12px 10px;
  position: sticky;
  top: -12px;
  z-index: 5;
}

.combat-intent-header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.combat-intent-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.combat-intent-result {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  min-height: 0;
  padding-top: 12px;
}

.combat-intent-result h4 {
  color: var(--accent-dark);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.combat-intent-plan {
  background: rgba(116, 163, 186, 0.08);
  border: 1px solid rgba(116, 163, 186, 0.45);
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 10px;
}

.combat-intent-result > .inline-actions {
  background: linear-gradient(180deg, rgba(16, 28, 35, 0.86), var(--surface-soft) 35%);
  border-top: 1px solid var(--line);
  bottom: -12px;
  margin: 0 -12px -12px;
  padding: 10px 12px 12px;
  position: sticky;
  z-index: 4;
}

.combat-intent-section-title {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.combat-intent-plan-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

.combat-intent-plan-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
  padding: 10px;
}

.combat-intent-action-card-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.combat-intent-action-card-head select {
  max-width: 190px;
}

.combat-intent-action-card-body {
  display: grid;
  gap: 8px;
}

.combat-intent-action-editor.is-collapsed {
  gap: 0;
  padding-bottom: 8px;
  padding-top: 8px;
}

.combat-intent-action-editor.is-collapsed .combat-intent-action-card-body {
  display: none;
}

.combat-intent-action-editor-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.combat-intent-action-editor textarea {
  min-height: 76px;
  resize: vertical;
}

.combat-intent-target-side-toggle {
  align-self: end;
  min-height: 36px;
}

.combat-intent-hero-die-toggle {
  align-self: end;
  min-height: 36px;
}

.combat-intent-action-movement {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.combat-intent-action-movement h5 {
  color: var(--accent-dark);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.combat-intent-action-editor .is-hidden {
  display: none;
}

.combat-intent-plan-card h4,
.combat-intent-plan-reactions h4 {
  color: var(--text);
  font-size: 0.9rem;
  letter-spacing: 0;
  margin: 0;
  text-transform: none;
}

.combat-intent-plan-card p,
.combat-intent-plan-reactions ul {
  margin: 0;
}

.combat-intent-plan-slot {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.combat-intent-plan-reactions {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.combat-intent-reaction-list {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr;
}

.combat-intent-reaction-card {
  align-items: end;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(56px, 0.3fr) repeat(3, minmax(150px, 1fr));
  padding: 8px;
}

.combat-intent-reaction-card .check {
  margin-bottom: 5px;
}

@media (max-width: 760px) {
  .combat-intent-reaction-card {
    grid-template-columns: 1fr;
  }
}

.combat-intent-plan-reactions ul {
  display: grid;
  gap: 4px;
  padding-left: 18px;
}

.combat-intent-warnings {
  background: rgba(211, 154, 57, 0.12);
  border: 1px solid rgba(211, 154, 57, 0.45);
  color: var(--text);
  margin: 0;
  padding: 8px 10px 8px 26px;
}

.combat-intent-concentration-warning {
  align-items: start;
  background: rgba(184, 70, 62, 0.14);
  border: 1px solid rgba(218, 99, 88, 0.7);
  color: var(--text);
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.combat-intent-concentration-warning[hidden] {
  display: none;
}

.combat-intent-concentration-warning strong {
  color: #ffb2a8;
}

.combat-intent-check-list,
.combat-intent-movement-checks,
.combat-intent-resource-checks {
  display: grid;
  gap: 6px;
}

.combat-intent-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.intent-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 8px;
}

.combat-intent-json {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
}

.chat-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.chat-panel:has(.initialise-scene-form:not([hidden])) {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}

.chat-panel:has(.campaign-start-panel:not([hidden])) {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}

.chat-panel:has(.initialise-scene-form:not([hidden])):has(.campaign-start-panel:not([hidden])) {
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
}

.chat-tab-bar {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 10px;
  min-width: 0;
  position: relative;
  top: auto;
  z-index: 30;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  padding: 6px 8px;
}

.speech-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: max-content;
}

@media (max-width: 820px) {
  .chat-tab-bar {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .turn-status-panel {
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
  }

  .turn-status-header .muted,
  .turn-status-item .muted {
    display: none;
  }

  .speech-controls {
    justify-content: flex-start;
    min-width: 0;
  }

  .campaign-start-dm-grid {
    grid-template-columns: 1fr;
  }

  .campaign-start-actions {
    justify-content: stretch;
  }

  .campaign-start-actions button {
    flex: 1 1 150px;
  }
}

.initialise-scene-form {
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
}

.initialise-scene-form textarea {
  min-height: 110px;
}

.campaign-start-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  max-height: min(66dvh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.campaign-start-panel:has([data-campaign-start-action="vote"]) {
  padding-bottom: 0;
}

.campaign-start-header,
.campaign-start-card-title,
.campaign-start-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.campaign-start-header h3,
.campaign-start-card-title h3 {
  margin: 0;
}

.campaign-start-dm-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.campaign-start-choice,
.campaign-workshop {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding: 9px 10px;
}

.campaign-workshop-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.campaign-workshop-header h4 {
  margin: 0;
}

.campaign-workshop-log {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.campaign-workshop-message {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
  padding: 8px;
}

.campaign-workshop-message.seed {
  border-left: 3px solid var(--accent);
}

.campaign-workshop-form {
  display: grid;
  gap: 7px;
}

.campaign-workshop-form textarea {
  min-height: 78px;
}

.campaign-start-premise {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.campaign-start-premise textarea {
  min-height: 76px;
}

.campaign-start-region-anchor {
  border-left: 3px solid var(--accent);
}

.campaign-start-region-anchor-row {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(220px, 360px) auto;
  justify-content: start;
}

.campaign-start-region-anchor-row label {
  display: grid;
  gap: 5px;
}

.campaign-start-actions {
  align-content: start;
  justify-content: flex-end;
}

.campaign-start-levels {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding: 9px 10px;
}

.campaign-start-levels-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.campaign-start-levels-header h4 {
  margin: 0;
}

.campaign-start-level-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.campaign-start-level-grid label {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 72px;
  margin: 0;
}

.campaign-start-level-grid input {
  width: 72px;
}

.campaign-start-level-grid select {
  grid-column: 1 / -1;
}

.campaign-start-ideas {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.campaign-start-card {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding: 9px;
}

.campaign-start-card.selected {
  border-color: var(--good);
  box-shadow: inset 3px 0 0 var(--good);
}

@media (max-width: 1100px) {
  .campaign-start-ideas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .campaign-start-ideas {
    grid-template-columns: 1fr;
  }
}

.campaign-start-vote-label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  font-weight: 800;
  max-width: 160px;
}

.campaign-start-vote-instructions {
  background: var(--surface-active);
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  gap: 8px;
  line-height: 1.45;
  padding: 9px 10px;
}

.campaign-start-vote-footer {
  align-items: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin: 0 -10px;
  padding: 10px;
  position: sticky;
  z-index: 5;
}

.campaign-start-vote-footer .muted {
  margin: 0;
}

.campaign-start-map-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-start-suggestion {
  display: grid;
  gap: 5px;
  font-weight: 800;
}

.campaign-start-suggestion textarea {
  font-weight: 400;
  min-height: 82px;
}

.campaign-start-player-suggestions {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding: 9px 10px;
}

.campaign-start-player-suggestions ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.campaign-start-handoff {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.campaign-start-handoff summary {
  cursor: pointer;
  font-weight: 800;
}

.campaign-workshop-summary-review {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
}

.campaign-workshop-refine {
  display: grid;
  gap: 5px;
  font-weight: 800;
}

.campaign-workshop-refine textarea {
  font-weight: 400;
  min-height: 76px;
}

.chat-perspectives {
  display: flex;
  flex: 1 1 auto;
  gap: 6px;
  flex-wrap: nowrap;
  grid-column: 1 / -1;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.chat-perspectives button {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
  background: var(--control-bg);
  color: var(--accent-dark);
}

.chat-perspectives button.active {
  background: var(--accent);
  color: var(--button-ink);
}

.chat-perspectives button:disabled {
  border-color: var(--line);
  background: var(--surface-muted);
  color: var(--disabled-ink);
  cursor: not-allowed;
  opacity: 0.72;
}

.chat-perspectives button:disabled .turn-marker {
  opacity: 0.55;
}

.chat-perspectives button:disabled .turn-marker.question-due {
  opacity: 0.95;
}

.tab-player-name {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.turn-status-panel {
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
  margin: 0;
  min-width: 220px;
  padding: 6px 8px;
}

.chat-tab-bar .turn-status-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

.turn-edit-notice {
  color: var(--text);
  display: block;
  font-weight: 700;
  line-height: 1.25;
  max-width: 100%;
  text-align: center;
}

.chapter-close-suggestion {
  align-items: flex-start;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 8px 0;
  padding: 10px;
}

.chapter-close-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.chapter-close-heading,
.chapter-close-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chapter-close-heading span,
.chapter-close-meta span {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 5px;
}

.chapter-close-suggestion p {
  color: var(--ink);
  margin: 0;
}

.chapter-close-suggestion button {
  flex: 0 0 auto;
}

.usage-summary {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  padding: 5px 8px;
}

.usage-summary-tools {
  width: 100%;
}

.play-actions-drawer .panel-actions .mobile-only-tool {
  display: none;
}

.usage-summary strong {
  color: var(--ink);
}

.usage-summary-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.campaign-usage-panel {
  align-content: start;
  display: flex;
  flex-direction: column;
  max-height: min(72dvh, 760px);
  min-height: 0;
  overflow: hidden;
}

.usage-detail {
  display: grid;
  gap: 12px;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.usage-detail-header {
  align-items: flex-start;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 10px;
}

.usage-detail-header strong {
  color: var(--ink);
  font-size: 1.25rem;
}

.usage-detail-metrics {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.usage-detail-metrics span {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 6px;
}

.usage-detail-section {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.usage-detail-section h3 {
  font-size: 0.95rem;
  margin: 0;
}

.usage-table-wrap {
  border: 1px solid var(--line);
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  padding-bottom: 8px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.usage-detail-table {
  min-width: 640px;
  table-layout: auto;
  width: 100%;
}

.usage-detail-table th,
.usage-detail-table td {
  font-size: 0.85rem;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 7px 8px;
  white-space: normal;
}

.usage-detail-table th:nth-child(2),
.usage-detail-table td:nth-child(2),
.usage-detail-table th:nth-child(3),
.usage-detail-table td:nth-child(3) {
  text-align: right;
  white-space: nowrap;
}

.usage-call-table {
  min-width: 1320px;
}

.usage-call-table th:nth-child(4),
.usage-call-table td:nth-child(4),
.usage-call-table th:nth-child(5),
.usage-call-table td:nth-child(5) {
  white-space: nowrap;
}

.usage-call-table th:nth-child(2),
.usage-call-table td:nth-child(2),
.usage-call-table th:nth-child(3),
.usage-call-table td:nth-child(3) {
  text-align: left;
}

.usage-call-table th:nth-child(4),
.usage-call-table td:nth-child(4),
.usage-call-table th:nth-child(5),
.usage-call-table td:nth-child(5) {
  text-align: right;
}

.usage-col-call {
  width: 17%;
}

.usage-col-model {
  width: 13%;
}

.usage-col-mode {
  width: 12%;
}

.usage-col-time {
  width: 8%;
}

.usage-col-cost {
  width: 8%;
}

.usage-col-tokens {
  width: 13%;
}

.usage-col-requests {
  width: 13%;
}

.usage-col-context {
  width: 26%;
}

.usage-token-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 6px;
}

.usage-prompt-diagnostics {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  margin-bottom: 4px;
}

.usage-token-stack span {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--muted);
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 4px;
  white-space: nowrap;
}

.usage-tool-requests {
  max-width: 210px;
}

.usage-tool-requests summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
  list-style-position: inside;
  white-space: nowrap;
}

.usage-tool-request-list {
  display: grid;
  gap: 4px;
  margin-top: 5px;
  max-height: 140px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.usage-tool-request {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 2px;
  padding: 4px 5px;
}

.usage-tool-request strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.usage-tool-request span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
  max-height: 3.75em;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.turn-status-header {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.turn-status-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
}

.turn-status-note {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}

.turn-status-note span {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  padding: 3px 6px;
}

.turn-status-note.auto-send-issue {
  color: var(--warning);
}

.turn-status-note.auto-send-issue span {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning) 58%, transparent);
}

.turn-status-note.auto-send-issue.error {
  color: var(--danger);
}

.turn-status-note.auto-send-issue.error span {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 56%, transparent);
}

.turn-status-item {
  border: 1px solid var(--line);
  background: var(--pill-bg);
  display: inline-grid;
  grid-template-columns: auto auto auto;
  gap: 5px;
  align-items: center;
  min-height: 28px;
  padding: 4px 7px;
}

.turn-marker {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.tab-marker {
  flex: 0 0 auto;
}

.turn-marker.waiting {
  background: var(--danger);
}

.turn-marker.pass {
  background: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.turn-marker.submitted {
  background: var(--good);
}

.turn-marker.question-due {
  background: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.22), inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .turn-marker.question-due {
  background: #c084fc;
  box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.24);
}

.turn-marker.combat-pending {
  background: #facc15;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.32);
}

body[data-theme="dark"] .turn-marker.combat-pending {
  background: #fde047;
  box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.34), inset 0 0 0 1px rgba(0, 0, 0, 0.34);
}

.turn-marker.dialogue-request {
  background: #14b8a6;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.24), inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .turn-marker.dialogue-request {
  background: #2dd4bf;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.24);
}

.turn-response-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.turn-alert-actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.turn-alert-action.combat {
  border-color: #d6a600;
  color: #8a6a00;
}

body[data-theme="dark"] .turn-alert-action.combat {
  color: #fde047;
}

.turn-alert-action.dialogue {
  border-color: #14b8a6;
  color: #0f766e;
}

body[data-theme="dark"] .turn-alert-action.dialogue {
  color: #2dd4bf;
}

.response-target {
  border: 1px solid var(--line);
  background: var(--pill-bg);
  padding: 7px 9px;
}

.play-action-picker-shell {
  position: relative;
}

.play-action-picker-toggle {
  min-height: 36px;
}

.play-action-picker {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 28px));
  max-height: min(360px, 70vh);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.play-action-picker-group {
  display: grid;
  gap: 5px;
}

.play-action-picker-heading {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.play-action-preset {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  text-align: left;
  white-space: normal;
}

.question-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.question-viewer {
  display: grid;
  gap: 8px;
}

.question-nav {
  align-items: center;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
}

.question-nav .muted {
  text-align: center;
}

.question-item {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 9px;
}

.question-item.open {
  border-left: 4px solid #d39a39;
}

.question-item.answered {
  border-left: 4px solid var(--good);
}

.question-error {
  border: 1px solid rgba(205, 78, 78, 0.55);
  background: rgba(205, 78, 78, 0.12);
  color: #ffd5d5;
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.35;
  margin-top: 8px;
  padding: 8px;
}

.ooc-chat-log {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  display: grid;
  gap: 8px;
  max-height: 260px;
  min-height: 120px;
  overflow: auto;
  padding: 8px;
}

.ooc-message {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--surface);
  padding: 8px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ooc-message.mine {
  background: var(--user-bg);
}

.ooc-message.mentions-me {
  border-left-color: #d39a39;
  box-shadow: inset 0 0 0 1px rgba(211, 154, 57, 0.35);
}

.ooc-mention {
  color: #ffd28a;
  font-weight: 800;
}

.chat-unread-badge {
  display: inline-grid;
  min-width: 1.55em;
  height: 1.55em;
  place-items: center;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #061018;
  font-family: var(--sans);
  font-size: 0.7em;
  font-weight: 900;
  vertical-align: middle;
}

.chat-unread-badge.mention {
  background: #d39a39;
  color: #061018;
}

#ooc-chat-panel.has-ooc-unread {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
}

#ooc-chat-panel.has-ooc-mention {
  border-color: #d39a39;
}

.ooc-chat-form {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 8px;
}

.ooc-chat-form textarea {
  min-height: 44px;
}

.answer-text {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 8px;
}

.question-answer-form {
  display: grid;
  gap: 8px;
}

.chat-navigator {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(220px, 1fr);
  margin-bottom: 8px;
  min-width: 0;
  padding: 6px 8px;
}

.chat-turn-nav {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.chat-chapter-select {
  max-width: 220px;
  min-height: 30px;
  min-width: 120px;
  padding: 4px 26px 4px 8px;
}

.chat-turn-nav button,
.chat-search-form button {
  min-height: 30px;
  padding: 5px 9px;
}

.chat-search-form {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(120px, 1fr) auto auto auto auto;
  min-width: 0;
}

.chat-search-form input {
  min-height: 30px;
  padding: 5px 8px;
}

.modal-backdrop {
  align-items: center;
  background: rgba(3, 8, 12, 0.72);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 80;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-panel {
  background: var(--sheet-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  max-width: 620px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
  -webkit-overflow-scrolling: touch;
  width: min(620px, 100%);
}

.modal-panel > .panel-title {
  background: var(--sheet-bg);
  margin: -14px -14px 10px;
  padding: 14px 14px 10px;
  position: sticky;
  top: -14px;
  z-index: 2;
}

.modal-panel textarea {
  min-height: 140px;
}

.retire-character-options {
  display: grid;
  gap: 8px;
}

.retire-character-options button {
  align-items: flex-start;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  gap: 4px;
  justify-items: start;
  min-height: 0;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.retire-character-options button:hover,
.retire-character-options button:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.retire-character-options span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.retire-character-note {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.question-inbox-mode #question-modal-form {
  display: none;
}

.bug-report-modal-panel {
  max-width: 680px;
}

.bug-report-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.bug-report-item {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding: 10px;
}

.bug-report-item.fixed {
  border-color: color-mix(in srgb, var(--success, #36b37e) 65%, var(--line));
}

.bug-report-item.needs_discussion,
.bug-report-item.need_more_info {
  border-color: color-mix(in srgb, var(--warning, #f0b64f) 65%, var(--line));
}

.bug-report-item strong {
  color: var(--ink);
}

.bug-report-item p {
  margin: 0;
}

.bug-report-reply {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  color: var(--ink);
  padding: 8px 10px;
}

.chat-log {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  overflow: auto;
  padding: 12px;
  display: block;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.chat-log .message + .message,
.chat-log .empty + .message,
.chat-log .message + .empty {
  margin-top: 10px;
}

.message {
  border-left: 4px solid var(--accent);
  background: var(--surface);
  padding: 10px;
}

.message-actions {
  float: right;
  display: flex;
  gap: 6px;
  margin-left: 10px;
}

.message-voice,
.message-action {
  min-height: 28px;
  padding: 4px 9px;
}

.message.user {
  border-left-color: #8a6417;
  background: var(--user-bg);
}

.message.player-action {
  border-left-color: #4f9d7a;
  background: color-mix(in srgb, var(--surface) 76%, #4f9d7a 24%);
}

.message.player-action .message-meta {
  color: color-mix(in srgb, var(--ink) 78%, #4f9d7a 22%);
}

.submitted-actions-block {
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 8px;
}

.submitted-actions-block > .message-meta {
  margin-bottom: 0;
  text-transform: uppercase;
}

.submitted-actions-block .compact-action {
  padding: 8px;
}

.resolved-actions-block {
  background: color-mix(in srgb, var(--surface) 88%, #4f9d7a 12%);
  margin-bottom: 10px;
}

.resolved-actions-block > .message-meta::after {
  content: " DM only";
  color: var(--muted);
  font-weight: 800;
  text-transform: none;
}

.resolved-actions-block .resolved-action {
  background: color-mix(in srgb, var(--surface) 84%, #4f9d7a 16%);
}

.message-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.message-content {
  line-height: 1.3;
}

.chat-search-highlight {
  background: #f2d46b;
  border-radius: 2px;
  color: #111;
  padding: 0 2px;
}

.chat-search-highlight.active {
  background: #ff9f43;
  box-shadow: 0 0 0 2px color-mix(in srgb, #ff9f43 45%, transparent);
}

.message-text-block p {
  margin: 0 0 0.3rem;
}

.message-text-block p:last-child {
  margin-bottom: 0;
}

.message-dice-rolls {
  background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  margin-top: 0.65rem;
  padding: 7px 9px;
}

.message-dice-rolls summary {
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.message-dice-rolls-body {
  border-top: 1px solid var(--line);
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 7px;
  padding-top: 7px;
}

.message-dice-line {
  background: color-mix(in srgb, var(--surface) 86%, white 14%);
  border: 1px solid color-mix(in srgb, var(--line) 82%, white 18%);
  border-left: 4px solid var(--line);
  margin: 0 0 0.45rem;
  padding: 6px 8px;
}

.message-dice-line:last-child {
  margin-bottom: 0;
}

.message-dice-line-neutral {
  background: color-mix(in srgb, #5f7890 13%, var(--surface));
  border-color: color-mix(in srgb, #86a7bf 34%, var(--line));
  border-left-color: #86a7bf;
}

.message-dice-line-success {
  background: color-mix(in srgb, #2f8660 20%, var(--surface));
  border-color: color-mix(in srgb, #65d397 56%, var(--line));
  border-left-color: #65d397;
}

.message-dice-line-failure {
  background: color-mix(in srgb, #b9574f 18%, var(--surface));
  border-color: color-mix(in srgb, #e87970 52%, var(--line));
  border-left-color: #e87970;
}

.message-dice-line-critical {
  background: color-mix(in srgb, #d6b85d 24%, var(--surface));
  border-color: color-mix(in srgb, #f0cf72 62%, var(--line));
  border-left-color: #f0cf72;
}

.message-dice-gap {
  height: 0.3rem;
}

.message-content .visibility-header {
  color: var(--accent-dark);
  display: block;
  font-weight: 900;
  margin: 0 0 0.25rem;
}

.dm-response-block {
  background: color-mix(in srgb, var(--surface) 70%, #d88b35 30%);
  border: 1px solid color-mix(in srgb, var(--line) 65%, #b46224 35%);
  border-left: 5px solid #b46224;
  color: var(--ink);
  margin: 0 0 0.6rem;
  padding: 8px 10px;
}

.dm-response-block:last-child {
  margin-bottom: 0;
}

.dm-response-label {
  color: color-mix(in srgb, var(--ink) 74%, #7d3e16 26%);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.dm-response-block p:last-child,
.dm-response-block .message-list:last-child {
  margin-bottom: 0;
}

.dm-options-block {
  background: color-mix(in srgb, var(--surface) 70%, #38a3d1 30%);
  border: 1px solid color-mix(in srgb, var(--line) 62%, #1b7fa9 38%);
  border-left: 5px solid #1b7fa9;
  color: var(--ink);
  margin: 0 0 0.6rem;
  padding: 8px 10px;
}

.dm-options-block:last-child {
  margin-bottom: 0;
}

.dm-options-label {
  color: color-mix(in srgb, var(--ink) 72%, #0b5e7e 28%);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.dm-options-block p:last-child,
.dm-options-block .message-list:last-child {
  margin-bottom: 0;
}

.message-heading {
  color: var(--accent-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0.65rem 0 0.25rem;
}

.message-text-block .visibility-header + p,
.message-text-block .message-heading + p {
  margin-top: 0;
}

.message-bullet {
  margin: 0.15rem 0;
  padding-left: 18px;
  position: relative;
}

.message-bullet::before {
  content: "•";
  color: var(--accent-dark);
  font-weight: 900;
  left: 3px;
  position: absolute;
}

.message-list {
  margin: 0.25rem 0 0.45rem 1.25rem;
  padding-left: 1rem;
}

.message-list li {
  margin: 0.18rem 0;
  padding-left: 0.1rem;
}

.message-list li::marker {
  color: var(--accent-dark);
  font-weight: 900;
}

.possible-move-heading {
  color: var(--accent-dark);
  font-weight: 900;
  margin: 0.45rem 0 0.2rem;
}

.possible-move-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.possible-move-item {
  padding-left: 0;
}

.possible-move-prefill {
  background: transparent;
  border: 0;
  color: var(--accent-dark);
  cursor: pointer;
  display: inline;
  font: inherit;
  min-height: 0;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.possible-move-prefill:hover,
.possible-move-prefill:focus-visible {
  color: var(--accent);
  outline: none;
}

.scene-decision-reminder {
  background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-dark);
  margin: 0.6rem 0 0.8rem;
  padding: 0.75rem 0.85rem;
}

.scene-decision-reminder summary {
  color: var(--accent-dark);
  cursor: pointer;
  font-weight: 900;
}

.scene-decision-summary {
  margin: 0.45rem 0 0.65rem;
}

.scene-decision-menu {
  display: grid;
  gap: 0.55rem;
}

.scene-decision-option {
  align-items: start;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(2rem, max-content) 1fr;
}

.scene-decision-label {
  font-weight: 900;
  min-width: 1.75rem;
  text-align: left;
}

.scene-decision-option-text {
  font-weight: 800;
}

.scene-decision-meta,
.scene-decision-status,
.scene-decision-npcs {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 0.2rem;
}

.scene-decision-status,
.scene-decision-npcs {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.25rem;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
}

.scene-decision-npcs span {
  display: block;
}

.message-list-depth-1 {
  margin-left: 1rem;
}

.message-list-depth-2 {
  margin-left: 2rem;
}

.message-list-depth-3 {
  margin-left: 3rem;
}

.message-list-depth-4 {
  margin-left: 4rem;
}

.message-content code {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-muted);
  padding: 1px 4px;
}

.message-table-wrap {
  margin: 8px 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.message-table {
  min-width: 620px;
  table-layout: auto;
  white-space: normal;
}

.message-table th,
.message-table td {
  overflow-wrap: normal;
  padding: 10px 12px;
  word-break: normal;
}

.message-table th {
  color: var(--ink);
  font-size: 0.78rem;
  text-transform: none;
  white-space: nowrap;
}

.message-table td:first-child,
.message-table th:first-child {
  font-weight: 800;
  min-width: 9rem;
}

.message-table td:nth-child(2),
.message-table th:nth-child(2) {
  min-width: 5rem;
  white-space: nowrap;
}

.story-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: min(40dvh, 360px);
  min-height: 0;
  overflow: auto;
}

.story-form.response-submitted {
  max-height: min(24dvh, 190px);
}

.response-character-wrap {
  display: grid;
  grid-template-columns: auto minmax(180px, 320px);
  gap: 8px;
  align-items: center;
  justify-content: start;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.response-character-wrap select {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.dm-packet-message {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dm-packet-message textarea {
  min-height: 72px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.form-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-weight: 700;
}

.check input {
  width: auto;
}

.pass-until-control {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex: 1 1 18rem;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  min-width: min(100%, 18rem);
  text-transform: uppercase;
}

.pass-until-control input {
  flex: 1 1 12rem;
  min-width: 10rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  font-weight: 500;
}

.pass-until-control input[readonly] {
  background: var(--surface-muted);
  color: var(--muted);
  cursor: default;
}

.status {
  min-height: 1.2em;
  color: var(--good);
  font-weight: 700;
}

.status.working {
  align-items: center;
  color: var(--accent);
  display: flex;
  gap: 8px;
}

.status.working::before {
  animation: status-spin 0.9s linear infinite;
  border: 2px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-top-color: var(--accent);
  border-radius: 999px;
  content: "";
  flex: 0 0 auto;
  height: 13px;
  width: 13px;
}

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

.status.warning {
  background: color-mix(in srgb, #f5c84b 14%, transparent);
  border: 1px solid color-mix(in srgb, #f5c84b 52%, transparent);
  border-radius: 6px;
  color: #f5c84b;
  padding: 6px 8px;
}

@keyframes status-spin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-status-toast {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
  color: var(--ink);
  display: none;
  gap: 8px;
  left: max(10px, env(safe-area-inset-left, 0px));
  max-height: 34svh;
  max-height: 34dvh;
  overflow: auto;
  padding: 10px;
  position: fixed;
  right: max(10px, env(safe-area-inset-right, 0px));
  z-index: 1200;
}

.mobile-status-toast.error {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface-soft));
  border-color: color-mix(in srgb, var(--danger) 72%, var(--line));
  color: var(--ink);
}

.mobile-status-toast-message {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mobile-status-toast button {
  align-self: start;
  padding: 4px 8px;
}

.watchdog-status {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
  margin: 8px 0;
}

.watchdog-details summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 8px 10px;
}

.watchdog-details summary::-webkit-details-marker {
  display: none;
}

.watchdog-details summary::after {
  content: " +";
  color: var(--accent-dark);
  font-weight: 900;
  margin-left: auto;
}

.watchdog-details[open] summary::after {
  content: " -";
}

.watchdog-body {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding: 9px 10px;
}

.watchdog-events {
  display: grid;
  gap: 5px;
}

.watchdog-event {
  border-left: 3px solid var(--accent);
  color: var(--muted);
  display: grid;
  gap: 2px;
  padding-left: 8px;
}

.watchdog-event.warning {
  border-left-color: #d39a39;
}

.watchdog-event.error {
  border-left-color: var(--danger);
  color: var(--danger);
}

.automation-console {
  display: grid;
  gap: 12px;
}

.automation-summary-grid,
.automation-stat-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.automation-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.automation-summary-grid > div,
.automation-stat-grid > div {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
}

.automation-summary-grid strong,
.automation-stat-grid strong {
  color: var(--accent-dark);
  font-size: 1rem;
}

.automation-campaign-list,
.automation-operation-list {
  display: grid;
  gap: 8px;
}

.automation-campaign-card,
.automation-global-ops {
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
  border: 1px solid var(--line);
}

.automation-campaign-card > summary,
.automation-global-ops > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 9px 10px;
}

.automation-campaign-card > summary::-webkit-details-marker,
.automation-global-ops > summary::-webkit-details-marker {
  display: none;
}

.automation-campaign-card > summary::after,
.automation-global-ops > summary::after {
  color: var(--accent-dark);
  content: " +";
  font-weight: 900;
  margin-left: auto;
}

.automation-campaign-card[open] > summary::after,
.automation-global-ops[open] > summary::after {
  content: " -";
}

.automation-card-body {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 10px;
}

.automation-two-col {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automation-operation {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
}

.automation-operation.failed,
.automation-operation.active,
.automation-operation.submitted,
.automation-operation.pending {
  border-left-color: #d39a39;
}

.automation-operation.completed {
  border-left-color: var(--good);
}

.automation-operation.compact {
  gap: 5px;
  padding: 8px;
}

.automation-operation-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.automation-preview {
  background: var(--input-bg);
  border: 1px solid var(--line);
  color: var(--muted);
  font: inherit;
  max-height: 9rem;
  overflow: auto;
  padding: 8px;
  white-space: pre-wrap;
}

.automation-error {
  color: var(--danger);
  font-weight: 800;
}

.automation-json-repair {
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 800;
  padding: 6px 8px;
}

.automation-json-repair.success {
  border-color: color-mix(in srgb, var(--good) 55%, var(--line));
  color: var(--good);
}

.automation-json-repair.failed {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  color: var(--danger);
}

.automation-metrics-panel {
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 10px;
}

.automation-metric-cards {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.automation-metric-cards > div {
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
}

.automation-metric-cards strong {
  color: var(--accent-dark);
  font-size: 1.1rem;
}

.automation-chart-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
}

.automation-chart {
  color: var(--muted);
  display: block;
  height: auto;
  max-height: 320px;
  width: 100%;
}

.automation-chart-grid line {
  stroke: color-mix(in srgb, var(--line) 70%, transparent);
  stroke-width: 1;
}

.automation-chart-grid text,
.automation-chart-labels text {
  fill: var(--muted);
  font-size: 0.76rem;
}

.automation-chart-axis {
  stroke: var(--line);
  stroke-width: 1.5;
}

.automation-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
}

.automation-chart-legend span {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  gap: 5px;
}

.automation-chart-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.automation-table-wrap {
  border: 1px solid var(--line);
  max-width: 100%;
  overflow: auto;
}

.automation-metrics-table {
  border-collapse: collapse;
  min-width: 680px;
  width: 100%;
}

.automation-metrics-table th,
.automation-metrics-table td {
  border-bottom: 1px solid var(--line);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}

.automation-metrics-table th {
  background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.automation-metrics-table td:not(:first-child),
.automation-metrics-table th:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.automation-metrics-table td:last-child,
.automation-metrics-table th:last-child {
  text-align: left;
  white-space: normal;
}

.muted {
  color: var(--muted);
  line-height: 1.35;
}

.side-column {
  display: grid;
  gap: 12px;
  align-content: start;
  align-self: start;
  max-height: 100%;
  min-width: 0;
  overflow: auto;
  position: sticky;
  top: 64px;
}

.side-column .panel {
  min-width: 0;
}

.side-column .panel-title {
  align-items: start;
}

.side-column .inline-actions {
  min-width: 0;
  row-gap: 6px;
}

.side-column .scene-image-focus {
  min-width: min(100%, 190px);
}

.side-column .scene-image-focus select {
  min-width: 0;
}

.image-strip {
  display: grid;
  gap: 8px;
}

.image-strip img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-muted);
}

.scene-image-failure {
  background: rgba(127, 29, 29, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-radius: 6px;
  color: var(--ink);
  display: grid;
  gap: 6px;
  padding: 10px;
}

.scene-image-failure strong {
  color: #b91c1c;
}

.scene-image-failure details {
  display: grid;
  gap: 4px;
}

.scene-image-failure pre {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0;
  max-height: 140px;
  overflow: auto;
  padding: 8px;
  white-space: pre-wrap;
}

.scene-image-failure button {
  justify-self: start;
}

.scene-image-viewer {
  display: grid;
  gap: 8px;
}

.scene-image-title {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

.scene-image-edit {
  display: grid;
  gap: 6px;
}

.scene-image-title-edit {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.scene-image-title-edit input {
  min-width: 0;
}

.scene-image-edit textarea {
  min-height: 72px;
  resize: vertical;
}

.scene-image-edit-fullscreen {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.scene-image-edit-fullscreen .scene-image-title-edit {
  grid-column: 1 / -1;
}

.scene-image-edit-fullscreen textarea {
  min-height: 48px;
}

.scene-image-button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: zoom-in;
  display: block;
  padding: 0;
  position: relative;
  text-align: left;
  width: 100%;
}

.scene-image-lightbox {
  background: rgba(8, 13, 22, 0.94);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  inset: 0;
  padding: 18px;
  position: fixed;
  z-index: 2147483000;
}

.scene-image-lightbox-frame {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 0;
  position: relative;
}

.scene-image-lightbox img {
  height: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  width: 100%;
}

.scene-image-fullscreen-header {
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: space-between;
}

.scene-image-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.empty {
  color: var(--muted);
  border: 1px dashed var(--line);
  padding: 12px;
  text-align: center;
}

.queue-list,
.roll-list,
.session-list,
.player-list,
.character-links,
.assignment-list,
.campaign-access-list {
  display: grid;
  gap: 8px;
}

.queue-item,
.roll-item,
.session-item,
.player-item,
.character-link,
.assignment-row,
.campaign-access-row {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 9px;
}

.player-item {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.secure-login-details,
.setup-link-output {
  border: 1px solid var(--line);
  background: var(--surface-muted);
  display: grid;
  gap: 8px;
  padding: 9px;
}

.secure-login-details summary {
  cursor: pointer;
  font-weight: 800;
}

.setup-link-output {
  margin-top: 10px;
}

.setup-link-output input {
  font-family: var(--mono);
}

.campaign-access-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.campaign-access-row label,
.campaign-access-support {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 800;
}

.campaign-access-row .muted {
  text-align: right;
}

.campaign-tone-sliders {
  display: grid;
  gap: 8px;
}

.tone-slider-row {
  border: 1px solid var(--line);
  display: grid;
  gap: 6px 10px;
  grid-template-columns: minmax(160px, 1.1fr) minmax(120px, 0.8fr) minmax(160px, 1.4fr) auto minmax(120px, 0.8fr);
  padding: 8px;
}

.tone-slider-label {
  font-weight: 900;
}

.tone-slider-hint {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
}

.tone-slider-row input[type="range"] {
  align-self: center;
  padding: 0;
}

.tone-slider-value {
  align-self: center;
  color: var(--accent-dark);
  font-weight: 900;
  min-width: 82px;
  text-align: center;
}

.campaign-tone-review-output {
  margin-top: 8px;
  max-height: 280px;
  overflow: auto;
  text-align: left;
}

@media (max-width: 720px) {
  .tone-slider-row {
    grid-template-columns: 1fr auto;
  }

  .tone-slider-label,
  .tone-slider-row input[type="range"] {
    grid-column: 1 / -1;
  }

  .tone-slider-hint {
    display: none;
  }
}

.session-item a {
  color: var(--accent-dark);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.session-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
}

.session-item.active {
  border-color: var(--accent);
  background: var(--surface-active);
}

.session-item a,
.session-item .muted {
  grid-column: 1 / -1;
}

.generation-chat {
  display: grid;
  gap: 12px;
  min-height: 68vh;
}

.generation-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.button-link {
  align-items: center;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent-dark);
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  text-decoration: none;
  white-space: nowrap;
}

.button-link.ghost-link {
  background: var(--control-bg);
}

.ui-switch-link {
  min-height: 38px;
}

.status-light {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--line);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  vertical-align: -0.05rem;
}

.status-light.active {
  background: var(--accent);
}

.status-light.complete {
  background: var(--good);
  box-shadow: 0 0 0 3px var(--success-bg), inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.status-light.warning {
  background: var(--warning);
}

.generation-log {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  display: grid;
  align-content: start;
  gap: 10px;
  max-height: 58vh;
  overflow: auto;
  padding: 12px;
}

.cos-generator {
  background: #18211d;
  border: 1px solid #3d5a4a;
  color: #f3f0e8;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.cos-generator > header {
  align-items: start;
  border-bottom: 1px solid #52645a;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 12px;
}

.cos-generator h3 {
  color: #fff9e9;
  font-size: 1.15rem;
  margin: 2px 0 0;
}

.cos-kicker,
.cos-rules-pack {
  color: #e4b963;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-rules-pack {
  border: 1px solid #876f3f;
  padding: 5px 7px;
  white-space: nowrap;
}

.cos-guide-note {
  border-left: 3px solid #e4b963;
  color: #c8d0ca;
  line-height: 1.4;
  margin: 0;
  padding: 6px 10px;
}

.cos-guide-note strong {
  color: #fff9e9;
}

.cos-setup-grid,
.cos-assignment-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cos-generator label {
  color: #d8ded9;
}

.cos-generator input,
.cos-generator select {
  background: #f7f4ea;
  border-color: #8c9a91;
  color: #17201c;
}

.cos-setup-actions {
  align-items: end;
  display: flex;
  gap: 8px;
  grid-column: 1 / -1;
}

.cos-wizard-steps {
  display: flex;
  gap: 6px;
  height: 40px;
  min-height: 40px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}

.cos-wizard-steps span,
.cos-wizard-steps button {
  align-items: center;
  border-bottom: 3px solid #52645a;
  color: #9ea9a2;
  display: flex;
  font-size: 0.8rem;
  font-weight: 800;
  gap: 7px;
  min-height: 34px;
  padding: 4px 2px 7px;
  flex: 1 0 104px;
}

.cos-wizard-steps button {
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
}

.cos-wizard-steps .active {
  border-color: #e4b963;
  color: #fff9e9;
}

.cos-wizard-steps .complete {
  border-color: #6fa682;
  color: #dbe8df;
}

.cos-wizard-steps b {
  align-items: center;
  background: #27332d;
  border: 1px solid #66776d;
  border-radius: 50%;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.cos-gender-choice {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: auto;
  max-width: 1040px;
  width: 100%;
}

.cos-gender-choice button {
  background: #27332d;
  border: 1px solid #52645a;
  border-radius: 6px;
  color: #fff9e9;
  display: grid;
  gap: 8px;
  overflow: hidden;
  padding: 0 0 10px;
}

.cos-gender-choice button:hover,
.cos-gender-choice button:focus-visible {
  border-color: #e4b963;
}

.cos-gender-choice button.selected {
  border-color: #e4b963;
  box-shadow: inset 0 0 0 2px #e4b963;
}

.cos-gender-choice button.selected strong::before {
  color: #f0cf7a;
  content: "Selected: ";
}

.cos-gender-choice strong {
  font-size: 1rem;
}

.cos-gender-next-note {
  color: #c8d2cb;
  margin: 0;
  text-align: center;
}

.cos-choice-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.cos-choice-tabs button {
  background: #27332d;
  border: 1px solid #52645a;
  color: #d8ded9;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
}

.cos-choice-tabs button.active {
  background: #72572a;
  border-color: #e4b963;
  color: #fff;
}

.cos-choice-tabs button.recommended:not(.active) {
  border-color: #799a78;
  color: #e5f0e6;
}

.cos-tab-recommended {
  color: #f0d383;
  margin-left: 6px;
}

.cos-choice-stage {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
}

.cos-carousel-arrow {
  align-items: center;
  background: #27332d;
  border: 1px solid #66776d;
  border-radius: 50%;
  color: #fff9e9;
  display: flex;
  font-size: 1.8rem;
  height: 38px;
  justify-content: center;
  padding: 0;
  width: 38px;
}

.cos-choice-card {
  background: #202a25;
  border: 1px solid #52645a;
  border-radius: 6px;
  display: grid;
  grid-template-columns: minmax(190px, 34%) minmax(0, 1fr);
  min-height: 360px;
  overflow: hidden;
}

.cos-choice-image-frame {
  background: #111713;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.cos-choice-image {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.cos-choice-image-cover {
  object-fit: cover;
}

.cos-sheet-image {
  aspect-ratio: var(--cos-sheet-ratio);
  height: auto;
  min-height: 0;
}

.cos-sheet-image img {
  height: auto;
  max-width: none;
  position: absolute;
  width: 200%;
}

.cos-race-choice-card,
.cos-class-choice-card {
  align-items: stretch;
}

.cos-race-choice-card {
  grid-template-columns: minmax(0, 1fr);
}

.cos-class-choice-card {
  grid-template-columns: minmax(0, 1fr);
}

.cos-race-choice-card .cos-choice-image-frame {
  aspect-ratio: var(--cos-sheet-ratio, 2 / 1);
  height: auto;
  max-width: none;
  min-height: 0;
  width: 100%;
}

.cos-class-choice-card .cos-choice-image-frame {
  aspect-ratio: var(--cos-sheet-ratio, 2 / 1);
  height: auto;
  min-height: 0;
  max-height: 460px;
  max-width: none;
  width: 100%;
}

.cos-class-choice-card .cos-choice-image {
  object-fit: cover;
  object-position: center 35%;
}

.cos-class-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
}

.cos-class-filters button {
  border-radius: 0;
  min-height: 40px;
}

.cos-class-filters button:first-child {
  border-radius: 6px 0 0 6px;
}

.cos-class-filters button:last-child {
  border-radius: 0 6px 6px 0;
}

.cos-class-filters button + button {
  border-left: 0;
}

.cos-image-missing {
  align-items: center;
  color: #9ea9a2;
  display: flex;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

.cos-gender-choice .cos-choice-image-frame {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.cos-gender-choice .cos-sheet-image {
  aspect-ratio: var(--cos-sheet-ratio);
}

.cos-gender-neutral {
  align-items: end;
  background: #202a25;
  display: flex;
  justify-content: center;
}

.cos-gender-neutral-head {
  background: #718078;
  border: 3px solid #aebbb4;
  border-radius: 50%;
  height: 31%;
  left: 50%;
  position: absolute;
  top: 16%;
  transform: translateX(-50%);
  width: 18%;
}

.cos-gender-neutral-body {
  background: #53615a;
  border: 3px solid #aebbb4;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  bottom: -8%;
  height: 52%;
  position: absolute;
  width: 54%;
}

.cos-choice-copy {
  align-content: start;
  display: grid;
  gap: 10px;
  padding: 18px;
}

.cos-campaign-fit {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
}

.cos-campaign-fit strong {
  font-size: 0.78rem;
  text-transform: uppercase;
}

.cos-campaign-fit span {
  font-size: 0.78rem;
  line-height: 1.35;
}

.cos-campaign-fit.recommended {
  background: #294333;
  border-left: 4px solid #83ad78;
  color: #e7f4e7;
}

.cos-campaign-fit.recommended strong {
  color: #f0d383;
}

.cos-campaign-fit.alternate {
  background: #303a40;
  border-left: 4px solid #718793;
  color: #d9e2e6;
}

.cos-campaign-fit.alternate strong {
  color: #b9ccd5;
}

.cos-choice-copy h4 {
  color: #fff9e9;
  font-size: 1.45rem;
  margin: 0;
}

.cos-choice-copy p {
  color: #d2dad4;
  line-height: 1.5;
  margin: 0;
}

.cos-class-spirit {
  background: #27332d;
  border-left: 3px solid #7d967d;
  padding: 9px 11px;
}

.cos-choice-copy .cos-region-character-guidance {
  background: #27332d;
  border-left: 3px solid #6f956e;
  color: #dbe6dc;
  padding: 9px 11px;
}

.cos-region-character-guidance strong {
  color: #f0d383;
}

.cos-choice-copy dl {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.cos-choice-copy .cos-class-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cos-choice-copy dl > div {
  border-left: 3px solid #8c7140;
  padding: 5px 8px;
}

.cos-choice-copy dt,
.cos-ready-summary span {
  color: #c8a95f;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-choice-copy dd {
  color: #fff9e9;
  margin: 2px 0 0;
}

.cos-class-choice-block {
  display: grid;
  gap: 8px;
}

.cos-class-choice-block h5,
.cos-class-pairings > span {
  color: #d8b464;
  font-size: 0.75rem;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.cos-class-choice-panels {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cos-class-choice-panel {
  background: #27332d;
  border: 1px solid #52645a;
  border-radius: 6px;
  display: grid;
  gap: 6px;
  padding: 10px;
}

.cos-class-choice-panel strong,
.cos-class-pairings strong {
  color: #fff1bd;
}

.cos-class-choice-panel p,
.cos-class-pairings p {
  color: #d6dfd9;
  font-size: 0.82rem;
  line-height: 1.42;
}

.cos-builder-workspace {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) clamp(420px, 36vw, 680px);
}

.cos-builder-main {
  align-content: start;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.cos-ai-guide {
  align-self: stretch;
  background: #202a25;
  border: 1px solid #52645a;
  border-top: 3px solid #68a2b8;
  display: grid;
  gap: 12px;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100%;
  max-height: min(780px, calc(100vh - 210px));
  min-height: 520px;
  overflow: hidden;
  padding: 13px;
}

.cos-ai-mobile-toggle {
  display: none;
}

.cos-ai-conversation {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.cos-ai-conversation article {
  background: #27322d;
  border-left: 3px solid #6a9aad;
  padding: 10px 12px;
}

.cos-ai-conversation article.user {
  background: #2b3028;
  border-left-color: #d4ad57;
}

.cos-ai-conversation article > span {
  color: #8ec5d5;
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.cos-ai-composer {
  border-top: 1px solid #52645a;
  display: grid;
  gap: 8px;
  padding-top: 10px;
}

.cos-ai-composer textarea {
  min-height: 78px;
  resize: vertical;
}

.cos-ai-composer > div {
  align-items: center;
  display: flex;
  gap: 10px;
}

.cos-ai-composer > div > button[type="submit"] {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 900;
  min-height: 46px;
}

.cos-ai-action-row {
  flex-wrap: wrap;
}

.cos-confirm-next-button {
  background: #e4b963;
  border-color: #f4d88b;
  color: #17211c;
  flex: 1;
  font-size: 0.95rem;
  font-weight: 900;
  min-height: 46px;
}

.cos-confirm-next-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.cos-ai-composer.choice-ready {
  border-top-color: #e4b963;
}

.cos-ai-composer.choice-ready .cos-confirm-next-button {
  box-shadow: 0 0 0 2px rgba(228, 185, 99, 0.2);
}

.cos-send-guidance {
  background: #2a352c;
  border-left: 3px solid #e4b963;
  color: #dce5df;
  margin: 0;
  padding: 8px 10px;
}

.cos-send-guidance strong {
  color: #f0d383;
}

.cos-section-heading {
  align-items: end;
  display: grid;
  gap: 3px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.cos-section-heading > span {
  color: #e4b963;
  font-size: 0.7rem;
  font-weight: 800;
  grid-column: 1;
  text-transform: uppercase;
}

.cos-section-heading h4 {
  color: #fff9e9;
  font-size: 1.3rem;
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  min-width: 0;
}

.cos-section-heading > strong {
  color: #f0d383;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  max-width: min(52vw, 620px);
  min-width: 0;
  text-align: right;
}

.cos-race-family-step,
.cos-ledger-step,
.cos-spell-step,
.cos-equipment-step,
.cos-portrait-step,
.cos-finalise-step {
  container-type: inline-size;
  display: grid;
  gap: 14px;
}

@container (max-width: 680px) {
  .cos-section-heading {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .cos-section-heading h4 {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .cos-section-heading > strong {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    max-width: 100%;
    text-align: left;
  }
}

.cos-magic-access-strip,
.cos-selected-magic-source {
  background: #26312c;
  border-left: 3px solid #d4ad57;
  display: grid;
  gap: 3px;
  padding: 11px 13px;
}

.cos-magic-access-strip > span,
.cos-selected-magic-source > span {
  color: #8ec5d5;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-magic-access-strip > strong,
.cos-selected-magic-source > strong {
  color: #fff9e9;
}

.cos-magic-access-strip > p,
.cos-selected-magic-source > p {
  color: #bac6be;
  margin: 0;
}

.cos-daily-casting-summary {
  background: #202b26;
  border: 1px solid #52645a;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.cos-daily-casting-summary > div:first-child {
  display: grid;
  gap: 3px;
}

.cos-daily-casting-summary > div:first-child > span,
.cos-daily-casting-cards article > span {
  color: #8ec5d5;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-daily-casting-summary > div:first-child > strong {
  color: #fff9e9;
}

.cos-daily-casting-summary > div:first-child > p,
.cos-daily-casting-cards article > p {
  color: #bac6be;
  margin: 0;
}

.cos-daily-casting-cards {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.cos-daily-casting-cards article {
  background: #26312c;
  border-left: 3px solid #d4ad57;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 11px;
}

.cos-daily-casting-cards article.cantrip {
  border-left-color: #74c59b;
}

.cos-daily-casting-cards article > strong {
  color: #fff9e9;
  font-size: 1.15rem;
}

.cos-daily-casting-cards article > strong small {
  color: #bac6be;
  font-size: 0.72rem;
  font-weight: 700;
}

.cos-daily-casting-cards article > p {
  font-size: 0.75rem;
}

.cos-spell-progression-summary {
  border: 1px solid #52645a;
  display: grid;
  gap: 12px;
  padding: 13px;
}

.cos-starting-spell-package {
  background: #26312c;
  border-left: 3px solid #8ec5d5;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.cos-starting-spell-package > span {
  color: #8ec5d5;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-starting-spell-package > strong {
  color: #fff9e9;
}

.cos-starting-spell-package > p {
  color: #bac6be;
  margin: 0;
}

.cos-spell-allowance-table {
  margin: 0;
  table-layout: fixed;
  width: 100%;
}

.cos-spell-allowance-table th,
.cos-spell-allowance-table td {
  padding: 7px 8px;
  text-align: center;
}

.cos-spell-allowance-table tbody th {
  color: #fff9e9;
}

.cos-spell-wizard-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
}

.cos-spell-wizard-layout > nav {
  align-content: start;
  display: grid;
  gap: 6px;
}

.cos-spell-wizard-layout > nav button {
  align-items: center;
  background: #202b26;
  border: 1px solid #52645a;
  color: #c8d2cc;
  display: grid;
  gap: 2px 8px;
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 52px;
  padding: 7px 9px;
  text-align: left;
}

.cos-spell-wizard-layout > nav button > span {
  align-items: center;
  border: 1px solid #708178;
  border-radius: 50%;
  display: flex;
  grid-row: 1 / 3;
  height: 25px;
  justify-content: center;
  width: 25px;
}

.cos-spell-wizard-layout > nav button > em {
  color: #91a098;
  font-size: 0.72rem;
  font-style: normal;
}

.cos-spell-wizard-layout > nav button.active {
  background: #3d3320;
  border-color: #e4b963;
  color: #fff9e9;
}

.cos-spell-wizard-layout > nav button.complete > span {
  background: #315d48;
  border-color: #74c59b;
  color: #fff;
}

.cos-spell-wizard-layout > nav button.locked {
  cursor: not-allowed;
  opacity: 0.55;
}

.cos-spell-wizard-layout > main {
  border: 1px solid #52645a;
  min-height: 380px;
  padding: 16px;
}

.cos-spell-wizard-chapter {
  display: grid;
  gap: 12px;
}

.cos-spell-wizard-chapter > span {
  color: #e4b963;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-spell-wizard-chapter > h3,
.cos-spell-picker-modal h3 {
  color: #fff9e9;
  margin: 0;
}

.cos-spell-wizard-chapter > p,
.cos-spell-picker-modal header p {
  color: #bac6be;
  margin: 0;
}

.cos-learning-results,
.cos-preparation-levels,
.cos-spell-mini-ledger {
  display: grid;
  gap: 8px;
}

.cos-spell-mini-ledger article {
  background: #26312c;
  border-left: 3px solid #8ec5d5;
  display: grid;
  gap: 3px;
  padding: 9px 11px;
}

.cos-spell-mini-ledger span { color: #8ec5d5; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.cos-spell-mini-ledger strong { color: #fff9e9; }
.cos-spell-mini-ledger p { color: #bac6be; margin: 0; }

.cos-learning-result,
.cos-discovery-result,
.cos-preparation-levels article {
  align-items: center;
  background: #26312c;
  border-left: 3px solid #708178;
  display: grid;
  gap: 4px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.cos-learning-result > span,
.cos-discovery-result > span,
.cos-preparation-levels article span {
  color: #8ec5d5;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-learning-result > strong,
.cos-discovery-result > strong,
.cos-preparation-levels article strong {
  color: #fff9e9;
}

.cos-learning-result > p,
.cos-discovery-result > p,
.cos-preparation-levels article p {
  color: #bac6be;
  grid-column: 1;
  margin: 0;
}

.cos-learning-result.success { border-left-color: #74c59b; }
.cos-learning-result.failure { border-left-color: #d78372; }

.cos-overcast-explanation {
  background: #332d26;
  border-left: 3px solid #e4b963;
  padding: 10px 12px;
}

.cos-overcast-explanation strong { color: #f0d383; }
.cos-overcast-explanation p { color: #d0c9b9; margin: 3px 0 0; }

.cos-discovery-roll {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.cos-spell-picker-backdrop {
  align-items: center;
  background: rgba(5, 9, 7, 0.84);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 22px;
  position: fixed;
  overflow: hidden;
  z-index: 90;
}

.cos-spell-picker-modal {
  background: #18221d;
  border: 1px solid #82968a;
  border-radius: 6px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(88vh, 920px);
  height: min(88svh, 920px);
  height: min(88dvh, 920px);
  max-height: calc(100vh - 44px);
  max-height: calc(100svh - 44px);
  max-height: calc(100dvh - 44px);
  max-width: 1100px;
  min-height: 0;
  overflow: hidden;
  width: min(94vw, 1100px);
}

.cos-spell-picker-modal.has-level-filters {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.cos-spell-picker-modal > header,
.cos-spell-picker-modal > footer {
  align-items: center;
  background: #18221d;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 16px 18px;
  position: sticky;
  z-index: 2;
}

.cos-spell-picker-modal > header { top: 0; }
.cos-spell-picker-modal > footer { bottom: 0; }

.cos-spell-picker-modal > header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cos-spell-picker-modal > header { border-bottom: 1px solid #52645a; }
.cos-spell-picker-modal > footer { border-top: 1px solid #52645a; }
.cos-spell-picker-modal > footer > div { display: flex; gap: 8px; }

.cos-spell-picker-error {
  color: var(--danger, #ef9a9a);
  flex: 1 1 320px;
  font-weight: 800;
  margin: 0;
}
.cos-spell-picker-modal > header span { color: #e4b963; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }

.cos-spell-level-filters {
  background: #202b26;
  border-bottom: 1px solid #52645a;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 16px;
}

.cos-spell-level-filters button {
  background: #18221d;
  border: 1px solid #60756a;
  color: #d7e1da;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 12px;
}

.cos-spell-level-filters button.selected {
  background: #594923;
  border-color: #e4b963;
  color: #fff9e9;
}

.cos-spell-browser-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 0.86fr);
  min-height: 0;
  overflow: hidden;
}

.cos-spell-gallery {
  align-content: start;
  display: grid;
  gap: 9px;
  grid-template-columns: 1fr;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 18px;
}

.cos-spell-gallery-card {
  align-items: flex-start;
  background: #222e28;
  border: 1px solid #53665b;
  border-radius: 4px;
  column-gap: 12px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 96px;
  padding: 13px;
  scroll-margin: 12px;
  touch-action: manipulation;
}

.cos-spell-gallery-card.selected {
  background: #3d3320;
  border-color: #e4b963;
}

.cos-spell-gallery-card.inspected {
  box-shadow: inset 3px 0 0 #8ec5d5;
}

.cos-spell-gallery-card:focus-visible {
  border-color: #8ec5d5;
  box-shadow: 0 0 0 2px rgba(142, 197, 213, 0.28);
  outline: none;
}

.cos-spell-gallery-card input {
  height: 17px;
  margin: 3px 0 0;
  width: 17px;
}
.cos-spell-gallery-card span { display: grid; gap: 4px; min-width: 0; }
.cos-spell-gallery-card b { color: #fff9e9; }
.cos-spell-gallery-card em { color: #8ec5d5; font-size: 0.75rem; font-style: normal; }
.cos-divine-slot-cost {
  color: #f0d383;
  font-size: 0.74rem;
  text-transform: uppercase;
}
.cos-spell-scaling-note {
  color: #9bd0de;
  font-size: 0.74rem;
  text-transform: uppercase;
}
.cos-spell-sphere-requirement {
  color: #f0c58a;
  font-size: 0.74rem;
  text-transform: uppercase;
}
.cos-spell-progression-timeline {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
}
.cos-spell-progression-timeline li {
  align-items: start;
  border-left: 2px solid #60736a;
  display: grid;
  gap: 8px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 4px 0 4px 8px;
}
.cos-spell-progression-timeline li.available { border-left-color: #e4b963; }
.cos-spell-progression-timeline li.future { color: #aebbb4; }
.cos-spell-progression-timeline li strong { color: #f0d383; }
.cos-divine-casting-note {
  border-left: 3px solid #e4b963;
  color: #d8cfbc !important;
  margin-top: 6px !important;
  padding-left: 9px;
}
.cos-divine-casting-note strong { color: #f0d383; }
.cos-spell-gallery-card p {
  color: #bac6be;
  display: -webkit-box;
  line-height: 1.35;
  margin: 5px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.cos-spell-detail {
  background: #17241f;
  border-left: 1px solid #52645a;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.cos-spell-detail-card .cos-spell-progression-timeline {
  margin-top: 2px;
}

.cos-weapon-picker-backdrop {
  align-items: center;
  background: rgba(5, 9, 7, 0.84);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 22px;
  position: fixed;
  z-index: 92;
}

.cos-weapon-picker-modal {
  background: #18221d;
  border: 1px solid #82968a;
  border-radius: 6px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-height: min(88vh, 920px);
  max-width: 1120px;
  overflow: hidden;
  width: min(94vw, 1120px);
}

.cos-weapon-picker-modal > header,
.cos-weapon-picker-modal > footer {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 16px 18px;
}

.cos-weapon-picker-modal > header { border-bottom: 1px solid #52645a; }
.cos-weapon-picker-modal > footer { border-top: 1px solid #52645a; }
.cos-weapon-picker-modal > header span { color: #e4b963; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.cos-weapon-picker-modal > header p { color: #c4cec7; margin: 3px 0 0; }

.cos-weapon-picker-controls {
  background: #202b26;
  border-bottom: 1px solid #52645a;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) minmax(150px, 220px);
  padding: 12px 16px;
}

.cos-weapon-picker-controls label {
  display: grid;
  gap: 4px;
}

.cos-weapon-picker-controls span {
  color: #d9b966;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-weapon-gallery {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
}

.cos-weapon-gallery-card {
  background: #222e28;
  border: 1px solid #53665b;
  border-radius: 4px;
  color: #dce4df;
  cursor: pointer;
  display: grid;
  gap: 8px;
  min-height: 182px;
  padding: 13px;
  text-align: left;
}

.cos-weapon-gallery-card:hover,
.cos-weapon-gallery-card:focus-visible {
  background: #2b382f;
  border-color: #e4b963;
}

.cos-weapon-gallery-card strong {
  color: #fff9e9;
  font-size: 1rem;
}

.cos-weapon-gallery-card dl {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.cos-weapon-gallery-card dl div {
  background: rgba(9, 14, 12, 0.28);
  border: 1px solid rgba(130, 150, 138, 0.32);
  border-radius: 4px;
  padding: 6px 7px;
}

.cos-weapon-gallery-card dt {
  color: #91a69b;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-weapon-gallery-card dd {
  color: #f4f0e4;
  margin: 2px 0 0;
}

.cos-weapon-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.cos-weapon-abilities {
  display: grid;
  gap: 5px;
}

.cos-weapon-abilities > span {
  color: #91a69b;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-weapon-traits span {
  background: #16231d;
  border: 1px solid #60756a;
  border-radius: 999px;
  color: #bfe5d4;
  cursor: help;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
}

.cos-weapon-traits span:hover,
.cos-weapon-traits span:focus-visible {
  background: #263c31;
  border-color: #e4b963;
  color: #fff9e9;
}

.cos-weapon-gallery-card p:not(.cos-weapon-traits) {
  color: #bac6be;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 960px) {
  .cos-spell-browser-layout { grid-template-columns: 1fr; overflow-y: auto; }
  .cos-spell-gallery { grid-template-columns: 1fr; }
  .cos-spell-gallery-card { min-height: 0; }
  .cos-spell-detail { border-left: 0; border-top: 1px solid #52645a; overflow: visible; }
  .cos-weapon-gallery { grid-template-columns: 1fr; }
  .cos-weapon-gallery-card { min-height: 0; }
  .cos-weapon-picker-controls { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .cos-spell-wizard-layout { grid-template-columns: 1fr; }
  .cos-spell-wizard-layout > nav { display: flex; overflow-x: auto; }
  .cos-spell-wizard-layout > nav button { flex: 0 0 210px; }
  .cos-spell-gallery { grid-template-columns: 1fr; }
  .cos-spell-picker-backdrop { align-items: stretch; padding: 8px; }
  .cos-spell-picker-modal {
    height: calc(100vh - 16px);
    height: calc(100svh - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100svh - 16px);
    max-height: calc(100dvh - 16px);
    width: 100%;
  }
  .cos-spell-picker-modal > header,
  .cos-spell-picker-modal > footer { align-items: flex-start; padding: 12px; }
  .cos-spell-picker-modal > footer { flex-direction: column; }
  .cos-spell-picker-modal > footer > div { width: 100%; }
  .cos-spell-picker-modal > footer button { flex: 1; }
  .cos-discovery-roll { grid-template-columns: 1fr; }
  .cos-weapon-picker-backdrop { align-items: stretch; padding: 8px; }
  .cos-weapon-picker-modal { max-height: none; width: 100%; }
  .cos-weapon-picker-modal > header,
  .cos-weapon-picker-modal > footer { align-items: flex-start; padding: 12px; }
  .cos-weapon-picker-modal > footer { flex-direction: column; }
}

.cos-sphere-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cos-sphere-grid button,
.cos-sphere-grid > span {
  align-items: center;
  background: #26332d;
  border: 1px solid #63756a;
  color: #dce4df;
  display: flex;
  justify-content: center;
  min-height: 38px;
  padding: 7px 9px;
  text-align: center;
}

.cos-sphere-grid button.selected,
.cos-sphere-grid > span.fixed,
.cos-sphere-grid.readonly > span {
  background: #72572a;
  border-color: #e4b963;
  color: #fff6d7;
}

.cos-sphere-grid button.recommended {
  border-color: #8ec5d5;
  box-shadow: inset 0 0 0 1px rgba(142, 197, 213, 0.35);
}

.cos-power-source-picker {
  display: grid;
  gap: 12px;
}

.cos-power-source-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 430px;
  overflow: auto;
}

.cos-power-source-grid button {
  align-content: start;
  background: #26312c;
  border: 1px solid #52645a;
  color: #dce4df;
  display: grid;
  gap: 5px;
  min-height: 94px;
  padding: 11px;
  text-align: left;
}

.cos-power-source-grid button > span {
  color: #8ec5d5;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-power-source-grid button > small {
  color: #bac6be;
  line-height: 1.35;
}

.cos-power-source-grid button.recommended {
  border-color: #8ec5d5;
}

.cos-power-source-grid button.selected {
  background: #3d3320;
  border-color: #e4b963;
  box-shadow: inset 0 0 0 1px rgba(228, 185, 99, 0.35);
}

@media (max-width: 760px) {
  .cos-power-source-grid {
    grid-template-columns: 1fr;
    max-height: none;
  }
}

.cos-spell-ledger {
  display: grid;
  gap: 8px;
  max-height: 42vh;
  overflow: auto;
}

.cos-spell-ledger article {
  align-items: start;
  background: #26312c;
  border: 1px solid #52645a;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px;
}

.cos-spell-ledger article span {
  color: #8ec5d5;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-spell-ledger article strong {
  color: #fff9e9;
  display: block;
}

.cos-spell-ledger article p {
  color: #bac6be;
  margin: 4px 0 0;
}

.cos-race-family-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cos-race-filter {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  justify-self: start;
}

.cos-race-filter button {
  background: #26332d;
  border: 1px solid #63756a;
  border-radius: 0;
  color: #dce4df;
  min-height: 38px;
}

.cos-race-filter button:first-child {
  border-radius: 6px 0 0 6px;
}

.cos-race-filter button:last-child {
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

.cos-race-filter button.active {
  background: #72572a;
  border-color: #e4b963;
  color: #fff6d7;
}

.cos-race-family-card {
  background: #26312c;
  border: 1px solid #52645a;
  color: #eef4ef;
  display: grid;
  grid-template-rows: minmax(220px, 30vh) auto;
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.cos-race-family-card.recommended {
  border-color: #d4ad57;
  box-shadow: inset 0 0 0 1px #d4ad57;
}

.cos-race-family-card > .cos-choice-image-frame {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.cos-race-family-card img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.cos-race-family-copy {
  align-content: start;
  display: grid;
  gap: 4px;
  min-height: 118px;
  padding: 10px 12px 13px;
  text-align: left;
}

.cos-race-family-copy > span {
  color: #e4b963;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-race-family-copy > strong {
  color: #fff9e9;
  font-size: 1.05rem;
}

.cos-race-family-copy > small {
  color: #bac6be;
  line-height: 1.35;
}

.cos-race-family-copy > b {
  color: #9fb1a6;
  font-size: 0.7rem;
  margin-top: 4px;
}

.cos-choice-ledger {
  display: grid;
  gap: 8px;
}

.cos-choice-ledger article {
  align-items: start;
  background: #26312c;
  border: 1px solid #52645a;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px;
}

.cos-choice-ledger article div {
  display: grid;
  gap: 3px;
}

.cos-choice-ledger article span {
  color: #8ec5d5;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-choice-ledger article strong {
  color: #fff9e9;
}

.cos-choice-ledger article .cos-ledger-granted {
  align-self: start;
  border: 1px solid #7ea48e;
  color: #b9dfc5;
  padding: 4px 8px;
}

.cos-choice-ledger article p,
.cos-ledger-empty {
  color: #bac6be;
  line-height: 1.4;
  margin: 0;
}

.cos-ledger-empty {
  border: 1px dashed #66776d;
  padding: 20px;
  text-align: center;
}

.cos-trait-suggestion-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.cos-trait-suggestion {
  align-content: start;
  background: #203029;
  border: 1px solid #52645a;
  border-left: 3px solid #d6b761;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.cos-trait-suggestion.selected {
  border-left-color: #91c3d9;
  opacity: 0.82;
}

.cos-trait-suggestion span {
  color: #8ec5d5;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-ledger-effect-label,
.cos-trait-suggestion small {
  color: #d6b761;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-trait-suggestion strong {
  color: #fff9e9;
}

.cos-trait-suggestion p {
  color: #d9e1dc;
  line-height: 1.4;
  margin: 0;
}

.cos-montage-schedule {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.cos-ai-interaction-callout {
  background: #213029;
  border: 1px solid #6f917f;
  border-left: 4px solid #8ec5d5;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.cos-ai-interaction-callout > span {
  color: #8ec5d5;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.cos-ai-interaction-callout > strong {
  color: #fff9e9;
  font-size: 1.05rem;
}

.cos-ai-interaction-callout > p {
  color: #d4ddd7;
  line-height: 1.45;
  margin: 0;
}

.cos-ai-interaction-callout > button {
  justify-self: start;
}

.cos-montage-schedule article {
  background: #222c27;
  border: 1px solid #526158;
  border-left: 3px solid #66776d;
  display: grid;
  gap: 4px;
  min-height: 78px;
  padding: 10px 12px;
}

.cos-montage-schedule article.current {
  background: #2c3327;
  border-left-color: #d4ad57;
}

.cos-montage-schedule article.complete {
  border-left-color: #70a783;
}

.cos-montage-schedule article span {
  color: #8ec5d5;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-montage-schedule article strong {
  color: #fff9e9;
}

.cos-montage-schedule article small {
  color: #bac6be;
  line-height: 1.3;
}

.cos-inline-add,
.cos-equipment-add {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.4fr) auto;
}

.cos-budget-strip {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cos-budget-strip > span {
  background: #26312c;
  border-left: 3px solid #6a9aad;
  display: grid;
  padding: 9px 11px;
}

.cos-budget-strip > span.over {
  border-left-color: #c8625e;
}

.cos-budget-strip small {
  color: #aebbb3;
  text-transform: uppercase;
}

.cos-budget-strip strong {
  color: #fff9e9;
  font-size: 1.08rem;
}

.cos-equipment-sequence button {
  align-items: center;
  display: flex;
  gap: 8px;
}

.cos-equipment-sequence button b {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  font-size: 0.7rem;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.cos-equipment-recommendations {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cos-equipment-pack-heading {
  align-items: baseline;
  display: flex;
  gap: 10px;
}

.cos-equipment-pack-heading span {
  color: #e4b963;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-equipment-pack-heading strong {
  color: #dce9e0;
  font-size: 0.86rem;
}

.cos-equipment-packs {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cos-equipment-pack {
  align-items: end;
  background: #26312c;
  border: 1px solid #52645a;
  border-left: 3px solid #6a9aad;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.cos-equipment-pack.selected {
  border-left-color: #82aa79;
}

.cos-equipment-pack > div {
  display: grid;
  gap: 4px;
}

.cos-equipment-pack span,
.cos-equipment-pack b {
  color: #aebbb3;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.cos-equipment-pack strong {
  color: #fff9e9;
}

.cos-equipment-pack p {
  color: #d4ddd7;
  font-size: 0.82rem;
  line-height: 1.35;
  margin: 0;
}

.cos-equipment-pack details {
  color: #b9c9bf;
  font-size: 0.76rem;
}

.cos-equipment-pack details summary {
  cursor: pointer;
}

.cos-equipment-recommendation {
  align-items: end;
  background: #26312c;
  border-left: 3px solid #e4b963;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px 12px;
}

.cos-equipment-recommendation div {
  display: grid;
  gap: 3px;
}

.cos-equipment-recommendation span,
.cos-equipment-recommendation small {
  color: #aebbb3;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.cos-equipment-recommendation strong {
  color: #fff9e9;
}

.cos-equipment-recommendation p {
  color: #d4ddd7;
  font-size: 0.82rem;
  line-height: 1.35;
  margin: 0;
}

.cos-equipment-catalogue,
.cos-equipment-custom {
  border: 1px solid #52645a;
  padding: 10px 12px;
}

.cos-equipment-catalogue summary,
.cos-equipment-custom summary {
  color: #dce9e0;
  cursor: pointer;
  font-weight: 700;
}

.cos-equipment-catalogue > div {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(240px, 1fr) auto;
  padding-top: 10px;
}

.cos-equipment-catalogue select {
  min-width: 0;
  width: 100%;
}

.cos-equipment-table-wrap {
  overflow-x: auto;
}

.cos-equipment-table {
  border-collapse: collapse;
  min-width: 680px;
  width: 100%;
}

.cos-equipment-table th,
.cos-equipment-table td {
  border-bottom: 1px solid #52645a;
  padding: 8px;
  text-align: left;
}

.cos-equipment-table th {
  color: #e4b963;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.cos-equipment-quantity {
  min-width: 58px;
  width: 64px;
}

.cos-equipment-quality {
  display: grid;
  gap: 3px;
  min-width: 185px;
}

.cos-equipment-quality > span {
  color: #d8b464;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-equipment-quality select {
  min-width: 185px;
}

.cos-equipment-quality small,
.cos-quality-cost {
  color: #b9c6be;
  display: block;
  font-size: 0.68rem;
}

.cos-quality-purchase-panel,
.cos-picker-quality-panel {
  background: #202d27;
  border: 1px solid #8e7434;
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
}

.cos-picker-quality-panel {
  margin: 0 14px 12px;
}

.cos-quality-purchase-control {
  display: grid;
  gap: 5px;
  max-width: 620px;
}

.cos-quality-purchase-control > span {
  color: #fff1bf;
  font-weight: 800;
}

.cos-quality-purchase-control select {
  width: min(100%, 520px);
}

.cos-quality-purchase-control small {
  color: #c4cec8;
  line-height: 1.35;
}

.cos-quality-item-label {
  border: 1px solid #d6b85b;
  color: #f0d98f;
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  margin-left: 0.4rem;
  padding: 0.1rem 0.3rem;
  text-transform: uppercase;
}

.cos-canonical-item-name,
.cos-equipment-item-label {
  display: block;
  margin-top: 0.25rem;
}

.cos-canonical-item-name {
  color: var(--muted);
  font-size: 0.78rem;
}

.cos-equipment-item-label span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cos-equipment-item-label input {
  width: min(14rem, 100%);
  margin-top: 0.15rem;
}

.cos-equipment-add {
  grid-template-columns: minmax(140px, 1.2fr) 72px 92px 92px minmax(170px, 1.5fr) auto;
}

.cos-portrait-work {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 0.8fr) minmax(260px, 1.2fr);
}

.cos-portrait-frame {
  aspect-ratio: 4 / 5;
  background: #26312c;
  border: 1px solid #66776d;
  grid-row: span 4;
  overflow: hidden;
}

.cos-portrait-frame img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.cos-portrait-draft-note {
  background: #26312c;
  border-left: 3px solid #d0a957;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.cos-portrait-draft-note span {
  color: #e0bb66;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-portrait-outline {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.cos-portrait-outline span {
  border: 2px solid #71827a;
  border-radius: 50%;
  height: 28%;
  width: 35%;
}

.cos-portrait-outline b {
  border: 2px solid #71827a;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  height: 34%;
  margin-top: 5%;
  width: 68%;
}

.cos-portrait-work label,
.cos-finalise-step > label {
  display: grid;
  gap: 6px;
}

.cos-portrait-work textarea,
.cos-finalise-step textarea {
  min-height: 120px;
  resize: vertical;
}

.cos-portrait-final-fields {
  display: grid;
  gap: 12px;
}

.cos-portrait-final-fields .cos-section-heading {
  margin-bottom: -2px;
}

.cos-portrait-final-fields textarea {
  min-height: 104px;
}

.cos-final-review {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cos-final-review article {
  background: #26312c;
  border-left: 3px solid #6a9aad;
  display: grid;
  gap: 3px;
  padding: 11px;
}

.cos-final-review article > span {
  color: #8ec5d5;
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-final-review article > strong {
  color: #fff9e9;
}

.cos-final-review article > p {
  color: #bac6be;
  margin: 0;
}

.cos-ai-guide-heading {
  display: grid;
  gap: 3px;
}

.cos-ai-guide-heading span,
.cos-character-so-far > span,
.cos-abilities-heading span,
.cos-ability-card > header span {
  color: #8ec5d5;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-ai-guide-heading strong,
.cos-character-so-far strong {
  color: #fff9e9;
}

.cos-ai-guidance-copy {
  color: #d7dfda;
  font-size: 0.85rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cos-ai-guidance-copy > :first-child {
  margin-top: 0;
}

.cos-ai-guidance-copy > :last-child {
  margin-bottom: 0;
}

.cos-character-so-far {
  border-left: 3px solid #d4ad57;
  display: grid;
  gap: 3px;
  padding: 7px 9px;
}

.cos-character-so-far p {
  color: #bdc9c1;
  font-size: 0.8rem;
  margin: 0;
}

.cos-abilities-step,
.cos-abilities-heading {
  display: grid;
  gap: 12px;
}

.cos-abilities-heading {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
}

.cos-abilities-heading h4 {
  color: #fff9e9;
  font-size: 1.25rem;
  margin: 2px 0 0;
}

.cos-abilities-heading > strong {
  color: #f0d383;
}

.cos-pick-ledger {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cos-pick-token-wrap {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cos-pick-token {
  background: #26312c;
  border: 1px solid #64746b;
  color: #e5ebe7;
  display: grid;
  gap: 3px;
  min-height: 78px;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}

.cos-pick-token.flexible {
  border-color: #6f9db0;
}

.cos-pick-token.active {
  box-shadow: inset 0 0 0 2px #e4b963;
}

.cos-pick-token.spent {
  background: #294333;
}

.cos-pick-token > span {
  color: #c3a456;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-pick-token.flexible > span {
  color: #8ec5d5;
}

.cos-pick-token > small {
  color: #b8c4bc;
  line-height: 1.25;
}

.cos-unselect-ability {
  min-height: 32px;
  width: 100%;
}

.cos-ability-class-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
}

.cos-ability-class-tabs button {
  background: #26312c;
  border: 1px solid #52645a;
  color: #d8ded9;
  flex: 0 0 auto;
}

.cos-ability-class-tabs button.active {
  background: #72572a;
  border-color: #e4b963;
  color: #fff;
}

.cos-ability-class-banner {
  align-items: stretch;
  background: #202a25;
  border: 1px solid #52645a;
  display: grid;
  grid-template-columns: minmax(180px, 32%) minmax(0, 1fr);
  min-height: 150px;
  overflow: hidden;
}

.cos-ability-class-banner .cos-choice-image-frame {
  aspect-ratio: 16 / 9;
  height: 100%;
  min-height: 150px;
}

.cos-ability-class-banner > div:last-child {
  align-content: center;
  display: grid;
  gap: 5px;
  padding: 14px;
}

.cos-ability-class-banner span {
  color: #d6b15f;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-ability-class-banner h4,
.cos-ability-class-banner p {
  margin: 0;
}

.cos-ability-class-banner h4 {
  color: #fff9e9;
  font-size: 1.2rem;
}

.cos-ability-class-banner p {
  color: #cbd5ce;
}

.cos-ability-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cos-ability-card {
  align-content: start;
  background: #222d27;
  border: 1px solid #52645a;
  border-radius: 6px;
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
}

.cos-ability-card.selected {
  border-color: #76a884;
  box-shadow: inset 0 3px 0 #76a884;
}

.cos-ability-card.recommended {
  border-color: #d4ad57;
}

.cos-ability-card > header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 20px;
}

.cos-ability-card > header b {
  background: #5f4b25;
  color: #ffe8aa;
  font-size: 0.62rem;
  padding: 3px 5px;
  text-transform: uppercase;
}

.cos-ability-card h5 {
  color: #fff1bd;
  font-size: 1rem;
  margin: 0;
}

.cos-ability-card p {
  color: #d6dfd9;
  font-size: 0.82rem;
  line-height: 1.42;
  margin: 0;
}

.cos-ability-card details {
  border-top: 1px solid #46584e;
  color: #bdc9c1;
  padding-top: 7px;
}

.cos-ability-card summary {
  color: #d5bd7b;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 800;
}

.cos-ability-followups {
  border-top: 1px solid #52645a;
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.cos-ability-followups label {
  display: grid;
  font-size: 0.75rem;
  gap: 4px;
}

.cos-companion-profile {
  background: #17231e;
  border: 1px solid #4f6458;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 8px;
}

.cos-companion-profile > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cos-companion-profile > div.wide {
  grid-column: 1 / -1;
}

.cos-companion-profile span {
  color: #d5bd7b;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-companion-profile strong {
  color: #e5ebe7;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.cos-ability-complete {
  color: #9ec9aa;
  font-size: 0.75rem;
}

.cos-class-pairings {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cos-class-pairings > span {
  grid-column: 1 / -1;
}

.cos-class-pairings article {
  background: #1d2b25;
  border: 1px solid #4d6557;
  border-radius: 6px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.cos-class-pairings b {
  color: #c8d0ca;
  font-size: 0.78rem;
}

.cos-order-panel,
.cos-god-panel {
  background: #1d2823;
  border: 1px solid #53665b;
  border-top: 3px solid #d2ad59;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.cos-order-guidance,
.cos-order-status,
.cos-local-order p {
  color: #cbd5ce;
  margin: 0;
}

.cos-god-domain-detail {
  background: #23322b;
  border-left: 4px solid #8fb99b;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.cos-god-domain-detail dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
}

.cos-god-domain-detail dt {
  color: #e0bd67;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-god-domain-detail dd {
  color: #f4f0d8;
  margin: 3px 0 0;
}

.cos-god-domain-detail p {
  color: #cbd5ce;
  margin: 0;
}

.cos-god-quick-select {
  max-width: 420px;
}

.cos-god-catalogue {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-height: min(58vh, 660px);
  overflow-y: auto;
  padding-right: 4px;
}

.cos-god-card {
  background: #202b26;
  border: 1px solid #52645a;
  border-radius: 6px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.cos-god-card.selected {
  background: #3b3320;
  border-color: #d8b464;
  box-shadow: inset 0 0 0 1px rgba(216, 180, 100, 0.45);
}

.cos-god-card-head {
  display: grid;
  gap: 3px;
}

.cos-god-card-head span,
.cos-god-card dt {
  color: #e0bd67;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-god-card-head strong {
  color: #fff9e9;
  font-size: 1.05rem;
}

.cos-god-card p {
  color: #d8e1dc;
  line-height: 1.35;
  margin: 0;
}

.cos-god-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cos-god-card-tags span {
  background: #13201b;
  border: 1px solid #53665b;
  color: #cdebdc;
  font-size: 0.72rem;
  padding: 3px 7px;
}

.cos-god-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.cos-god-card dd {
  color: #f4f0d8;
  margin: 3px 0 0;
}

.cos-god-card button {
  justify-self: start;
}

.cos-order-intents {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cos-order-intents button {
  background: #26332d;
  border: 1px solid #63756a;
  color: #e0e7e2;
  min-height: 42px;
}

.cos-order-intents button.active {
  background: #665226;
  border-color: #e0bd67;
  color: #fff5cf;
}

.cos-order-selected {
  align-items: center;
  background: #26362e;
  border-left: 4px solid #76aa85;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 10px 12px;
}

.cos-order-selected div {
  display: grid;
  gap: 3px;
}

.cos-order-selected span,
.cos-order-card header span {
  color: #91c9a0;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-order-selected strong,
.cos-order-card > strong {
  color: #fff0bd;
}

.cos-order-selected p {
  color: #ced8d1;
  margin: 0;
}

.cos-order-selected > b {
  color: #d9ba6a;
  white-space: nowrap;
}

.cos-order-suggestions {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cos-order-browser {
  display: grid;
  gap: 8px;
}

.cos-order-filters {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: auto auto auto minmax(180px, 1fr);
}

.cos-order-filters button.active {
  background: #745c26;
  border-color: #d7b85e;
  color: #fff3c7;
}

.cos-order-filters input {
  min-width: 0;
}

.cos-order-count {
  color: #aebbb3;
  font-size: 0.74rem;
}

.cos-order-suggestions.browse-all {
  max-height: 620px;
  overflow-y: auto;
  padding-right: 5px;
}

.cos-order-card {
  background: #26322c;
  border: 1px solid #53665b;
  border-radius: 6px;
  display: grid;
  gap: 7px;
  padding: 11px;
}

.cos-order-card.selected {
  border-color: #d9b659;
  box-shadow: inset 0 0 0 1px #d9b659;
}

.cos-order-card header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.cos-order-card header b,
.cos-order-card small {
  color: #aebbb3;
  font-size: 0.72rem;
}

.cos-order-card p {
  color: #d2dcd5;
  font-size: 0.82rem;
  line-height: 1.42;
  margin: 0;
}

.cos-order-card button {
  align-self: end;
}

.cos-order-empty {
  border: 1px dashed #64756b;
  color: #c9d3cc;
  grid-column: 1 / -1;
  padding: 14px;
}

.cos-local-order {
  border-top: 1px solid #4c5c53;
  padding-top: 10px;
}

.cos-local-order summary {
  color: #d9c07c;
  cursor: pointer;
  font-weight: 800;
}

.cos-local-order > div {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1.3fr) auto;
  margin-top: 10px;
}

.cos-order-status {
  font-weight: 700;
}

.cos-inline-select {
  max-width: 380px;
}

.cos-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cos-traits span {
  border: 1px solid #66776d;
  color: #d8ded9;
  font-size: 0.76rem;
  padding: 4px 6px;
}

.cos-race-card-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.cos-region-lore-link {
  align-items: center;
  border-bottom: 1px solid #8fb49a;
  color: #d9eddf;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 800;
  gap: 5px;
  padding: 3px 0;
  text-decoration: none;
}

.cos-region-lore-link:hover,
.cos-region-lore-link:focus-visible {
  border-color: #f0d383;
  color: #fff4cf;
}

.cos-selected-classes {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 38px;
}

.cos-selected-classes > span {
  color: #c8d0ca;
}

.cos-selected-classes button {
  align-items: center;
  background: #3c2c27;
  border: 1px solid #8e664d;
  color: #fff9e9;
  display: flex;
  gap: 7px;
  padding: 6px 8px;
}

.cos-selected-classes b {
  color: #ffd978;
}

.cos-casting-style-choice {
  background: #202b26;
  border: 1px solid #64786c;
  border-left: 4px solid #79b8d1;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.4fr);
  padding: 14px 16px;
}

.cos-casting-style-choice h4,
.cos-casting-style-choice p {
  margin: 3px 0 0;
}

.cos-casting-style-choice > div:last-child {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.cos-casting-style-choice button {
  align-items: start;
  background: #17211d;
  border: 1px solid #53665b;
  color: #f6f1dd;
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: left;
}

.cos-casting-style-choice button.selected {
  background: #263d33;
  border-color: #e0bd67;
  box-shadow: inset 0 0 0 1px #e0bd67;
}

.cos-casting-style-choice button span,
.cos-casting-style-choice button small {
  color: #b9c9c0;
}

@media (max-width: 760px) {
  .cos-casting-style-choice {
    grid-template-columns: 1fr;
  }
}

.cos-combined-class-summary {
  background: #202b26;
  border: 1px solid #64786c;
  border-left: 4px solid #d6b45f;
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}

.cos-combined-class-heading {
  align-items: end;
  display: grid;
  gap: 2px 14px;
  grid-template-columns: 1fr auto;
}

.cos-combined-class-heading > span {
  color: #8fd0ec;
  font-size: 0.72rem;
  font-weight: 800;
  grid-column: 1 / -1;
  text-transform: uppercase;
}

.cos-combined-class-heading h4 {
  font-family: Georgia, serif;
  font-size: 1.18rem;
  margin: 0;
}

.cos-combined-class-heading strong {
  color: #cbd7cf;
  font-size: 0.78rem;
}

.cos-combined-class-summary dl {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  margin: 0;
}

.cos-combined-class-summary dl > div {
  border-left: 2px solid #8c7140;
  min-width: 0;
  padding: 4px 7px;
}

.cos-combined-class-summary dt {
  color: #c8a95f;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-combined-class-summary dd {
  color: #fff9e9;
  font-size: 0.86rem;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.cos-combined-class-details {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cos-combined-class-details details {
  background: #18221e;
  border: 1px solid #52645a;
  padding: 8px 10px;
}

.cos-combined-class-details summary {
  color: #e8f0ea;
  cursor: pointer;
  font-weight: 800;
}

.cos-combined-class-details summary span {
  background: #35463d;
  color: #f0d383;
  float: right;
  font-size: 0.72rem;
  padding: 2px 6px;
}

.cos-combined-class-details p {
  color: #cbd7cf;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 8px 0 0;
}

.cos-combined-class-details p strong {
  color: #f0d383;
}

.cos-wizard-nav {
  align-items: center;
  border-top: 1px solid #52645a;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr auto;
  padding-top: 12px;
}

.cos-wizard-nav > span {
  color: #c8d0ca;
  font-size: 0.82rem;
  text-align: center;
}

.cos-ready-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: 0.7fr 1fr 1.5fr;
}

.cos-ready-summary > div {
  background: #27332d;
  border-top: 3px solid #d79a42;
  display: grid;
  gap: 5px;
  min-height: 74px;
  padding: 10px;
}

.cos-ready-summary strong {
  color: #fff9e9;
  text-transform: capitalize;
}

.cos-roll-table {
  border: 1px solid #52645a;
}

.cos-roll-head,
.cos-roll-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 70px minmax(210px, 1fr) 56px 56px;
  min-height: 64px;
  padding: 7px 10px;
}

.cos-roll-head {
  background: #27332d;
  color: #d8b464;
  font-size: 0.75rem;
  font-weight: 800;
  min-height: 34px;
  text-transform: uppercase;
}

.cos-roll-row:nth-child(odd) {
  background: #202a25;
}

.cos-dice {
  display: flex;
  gap: 8px;
}

.cos-die {
  aspect-ratio: 1;
  background: #f5efe0;
  border: 2px solid #b6aa8e;
  border-radius: 7px;
  box-shadow: inset -3px -3px 0 rgba(52, 39, 22, 0.12);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  height: 48px;
  padding: 5px;
  position: relative;
  width: 48px;
}

.cos-die.eligible {
  border-color: #d79a42;
  cursor: pointer;
  outline: 2px solid rgba(215, 154, 66, 0.25);
}

.cos-die:disabled {
  opacity: 1;
}

.cos-die .pip {
  align-self: center;
  background: transparent;
  border-radius: 50%;
  height: 7px;
  justify-self: center;
  width: 7px;
}

.cos-die .pip.on {
  background: #24231f;
}

.cos-die small {
  background: #6e2632;
  bottom: -8px;
  color: #fff;
  font-size: 0.55rem;
  left: 50%;
  line-height: 1;
  padding: 2px 3px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.cos-roll-total,
.cos-roll-adj {
  color: #fff9e9;
  font-size: 1.1rem;
  font-weight: 900;
  text-align: center;
}

.cos-roll-summary {
  align-items: center;
  background: #3c2c27;
  border-top: 1px solid #8e664d;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  padding: 9px 12px;
}

.cos-roll-summary strong {
  color: #ffd978;
  font-size: 1.25rem;
}

.cos-balance {
  align-items: center;
  background: #27332d;
  border-left: 4px solid #d79a42;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 12px;
}

.cos-balance span,
.cos-final p {
  color: #c8d0ca;
}

.cos-assignment {
  border-top: 1px solid #52645a;
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

.cos-stat-priority {
  background: #202c26;
  border-left: 4px solid #d79a42;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.cos-stat-priority > div {
  display: grid;
  gap: 2px;
}

.cos-stat-priority > div span,
.cos-stat-priority li b {
  color: #ffd978;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-stat-priority > div strong {
  color: #fff9e9;
}

.cos-stat-priority ol {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.cos-stat-priority li {
  align-items: center;
  border: 1px solid #52645a;
  display: flex;
  gap: 7px;
  min-width: 0;
  padding: 7px;
}

.cos-stat-priority li span {
  color: #fff9e9;
  font-size: 0.82rem;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cos-stat-priority p {
  color: #c8d0ca;
  font-size: 0.8rem;
  margin: 0;
}

.cos-apply-stat-priority {
  justify-self: start;
}

.cos-assignment-unassigned {
  color: #c8d0ca;
  font-size: 0.78rem;
}

.cos-character-name-panel {
  background: #27332d;
  border: 1px solid #687a70;
  border-left: 4px solid #78add0;
  display: grid;
  gap: 7px;
  padding: 12px;
}

.cos-character-name-panel > span {
  color: #a8d7f4;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-character-name-panel input {
  font-size: 1.05rem;
  font-weight: 700;
  max-width: 420px;
}

.cos-character-name-panel small {
  color: #c8d0ca;
}

.cos-assignment-heading {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.cos-assignment-heading > div {
  display: grid;
  gap: 2px;
}

.cos-assignment-heading strong {
  color: #fff9e9;
}

.cos-assignment-heading span {
  color: #c8d0ca;
  font-size: 0.8rem;
}

.cos-race-assignment-label {
  border: 1px solid #876f3f;
  color: #ffd978 !important;
  font-weight: 800;
  padding: 5px 7px;
  white-space: nowrap;
}

.cos-stat-assignment {
  background: #27332d;
  border-left: 3px solid #8c7140;
  display: grid;
  gap: 6px;
  padding: 9px;
}

.cos-stat-name-row {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.cos-stat-name-row b {
  color: #fff9e9;
  font-weight: 800;
}

.cos-stat-name-row em {
  background: #43371f;
  border: 1px solid #a98645;
  color: #ffdc86;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  padding: 3px 5px;
  text-align: right;
}

.cos-assignment-result {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cos-prerequisite-status {
  border: 1px solid;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 5px;
}

.cos-prerequisite-status.met {
  background: rgba(95, 152, 114, 0.16);
  border-color: #5f9872;
  color: #bfe8ca;
}

.cos-prerequisite-status.unmet {
  background: #512b2f;
  border-color: #9b5f65;
  color: #f9e1e3;
}

.cos-prerequisite-summary {
  border-left: 4px solid;
  font-weight: 700;
  padding: 10px 12px;
}

.cos-prerequisite-summary.met {
  background: #20372a;
  border-color: #5f9872;
  color: #d9f1df;
}

.cos-prerequisite-summary.pending {
  background: #353426;
  border-color: #a98645;
  color: #f5dfa8;
}

.cos-prerequisite-summary.unmet {
  background: #512b2f;
  border-color: #b46c74;
  color: #f9e1e3;
}

.cos-flexible-advancement-panel {
  border: 1px solid #6f775f;
  margin-top: 16px;
  padding: 14px;
}

.cos-flexible-advancement-panel article {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: 90px minmax(150px, 0.8fr) minmax(220px, 1.3fr) minmax(220px, 1.3fr);
  margin-top: 10px;
}

.cos-ai-advancement-review {
  grid-column: 1 / -1;
  border: 1px solid #7395a1;
  background: #17231f;
  padding: 12px;
}

.cos-ai-advancement-review span {
  color: #9ed4e7;
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-ai-advancement-review strong {
  display: block;
  margin-top: 4px;
}

.cos-ai-advancement-review p {
  margin: 7px 0 0;
}

.cos-ai-advancement-review.approved {
  border-color: #79a986;
  background: #18271f;
}

.cos-flexible-advancement-panel label {
  display: grid;
  gap: 4px;
}

.cos-flexible-advancement-panel > p {
  color: #c8d0ca;
  margin: 12px 0 0;
}

.cos-advancement-picker-button {
  align-self: end;
  min-height: 42px;
}

.cos-advancement-inline-picker {
  border: 1px solid #79a986;
  margin-top: 16px;
  padding: 14px;
}

.cos-advancement-inline-picker > header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cos-advancement-inline-picker > header span {
  color: #9ed4e7;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-advancement-inline-picker > header h4 {
  margin: 2px 0 0;
}

.cos-advancement-inline-picker .cos-wizard-nav {
  display: none;
}

.cos-mechanic-override {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 0;
  padding: 12px;
  border: 1px solid #7395a1;
  background: #17231f;
}

.cos-mechanic-override[hidden] {
  display: none;
}

.cos-mechanic-override legend {
  padding: 0 6px;
  color: #9ed4e7;
  font-weight: 700;
}

.cos-mechanic-override .cos-override-approval,
.cos-mechanic-override small {
  grid-column: 1 / -1;
}

.cos-mechanic-override .cos-override-approval {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.cos-mechanic-override .cos-override-approval input {
  width: auto;
}

.cos-override-reaction-fields,
.cos-override-static-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cos-override-static-fields {
  grid-template-columns: minmax(0, 2fr) minmax(100px, 1fr);
}

.cos-override-reaction-fields[hidden],
.cos-override-static-fields[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .cos-flexible-advancement-panel article {
    grid-template-columns: 1fr;
  }

  .cos-mechanic-override {
    grid-template-columns: 1fr;
  }

  .cos-override-reaction-fields,
  .cos-override-static-fields {
    grid-template-columns: 1fr;
  }
}

.cos-assignment-result strong {
  color: #fff9e9;
  font-size: 0.9rem;
}

.cos-racial-overlay {
  border: 1px solid #66776d;
  color: #c8d0ca;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 5px;
}

.cos-racial-overlay.bonus {
  background: #234331;
  border-color: #5f9872;
  color: #e1f4e7;
}

.cos-racial-overlay.penalty {
  background: #512b2f;
  border-color: #9b5f65;
  color: #f9e1e3;
}

.cos-transfer-row {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr minmax(100px, 0.5fr) 1fr auto;
  margin-top: 8px;
}

.cos-transfer-row.read-only {
  grid-template-columns: 1fr minmax(100px, 0.5fr) 1fr;
}

.cos-final-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(82px, 1fr));
}

.cos-final-grid > div {
  background: #27332d;
  border-top: 3px solid #d79a42;
  display: grid;
  gap: 2px;
  min-height: 92px;
  padding: 9px;
  text-align: center;
}

.cos-final-grid strong {
  color: #fff9e9;
  font-size: 1.7rem;
}

.cos-final-grid small {
  color: #c8d0ca;
}

.cos-skills {
  border-top: 1px solid #52645a;
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

.cos-skills-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.cos-skills-heading > div:first-child {
  display: grid;
  gap: 2px;
}

.cos-skills-heading strong {
  color: #fff9e9;
}

.cos-skills-heading span {
  color: #c8d0ca;
  font-size: 0.8rem;
}

.cos-skill-budget {
  border: 1px solid #66776d;
  color: #d8ded9;
  font-weight: 800;
  padding: 6px 8px;
  white-space: nowrap;
}

.cos-skill-budget b {
  color: #ffd978;
}

.cos-skill-budget.over {
  background: #512b2f;
  border-color: #9b5f65;
  color: #f9e1e3;
}

.cos-language-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #53685c;
  background: #1b2720;
}

.cos-language-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #48594f;
  padding-bottom: 10px;
}

.cos-language-heading span,
.cos-language-card small {
  display: block;
  color: #9fcde0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cos-language-heading h4 {
  margin: 2px 0 0;
}

.cos-language-heading > strong {
  color: #f1cf72;
  white-space: nowrap;
}

.cos-language-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.cos-language-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid #4c5f54;
  background: #202d25;
}

.cos-language-card.selected {
  border-color: #d2ae52;
  background: #29372c;
}

.cos-language-card label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.cos-language-known strong {
  display: block;
}

.cos-language-written {
  font-size: 0.78rem;
  white-space: nowrap;
}

.cos-literacy-cost {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
  padding: 9px 11px;
  border-left: 3px solid #d2ae52;
  background: #243129;
}

.cos-literacy-cost span {
  color: #c4cdc7;
}

@media (max-width: 1050px) {
  .cos-language-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .cos-language-grid {
    grid-template-columns: 1fr;
  }

  .cos-language-heading,
  .cos-literacy-cost {
    align-items: flex-start;
    flex-direction: column;
  }
}

.cos-skill-table-wrap {
  border: 1px solid #52645a;
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.cos-skill-table {
  border-collapse: collapse;
  min-width: 760px;
  table-layout: auto;
  width: 100%;
}

.cos-skill-table th,
.cos-skill-table td {
  border-bottom: 1px solid #36483f;
  overflow-wrap: normal;
  padding: 7px 9px;
  text-align: left;
  vertical-align: middle;
  word-break: normal;
}

.cos-skill-table th {
  background: #27332d;
  color: #d8b464;
  font-size: 0.72rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.cos-skill-table th:nth-child(1),
.cos-skill-table td:nth-child(1) {
  min-width: 11rem;
}

.cos-skill-table th:nth-child(2),
.cos-skill-table td:nth-child(2),
.cos-skill-table th:nth-child(3),
.cos-skill-table td:nth-child(3),
.cos-skill-table th:nth-child(4),
.cos-skill-table td:nth-child(4),
.cos-skill-table th:nth-child(5),
.cos-skill-table td:nth-child(5),
.cos-skill-table th:nth-child(6),
.cos-skill-table td:nth-child(6) {
  min-width: 5rem;
  white-space: nowrap;
}

.cos-skill-table tr.class-skill td:first-child {
  border-left: 3px solid #d79a42;
}

.cos-skill-name-cell {
  cursor: help;
}

.cos-skill-help {
  align-items: center;
  border: 1px solid #73877b;
  border-radius: 999px;
  color: #b9cabe;
  cursor: help;
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 800;
  height: 1rem;
  justify-content: center;
  line-height: 1;
  margin-left: 6px;
  width: 1rem;
}

.cos-skill-table tr.free-max-skill {
  background: #263d34;
}

.cos-skill-table tr.free-max-skill td {
  border-bottom-color: #668574;
}

.cos-skill-table tr.free-max-skill td:first-child {
  border-left: 4px solid #69b88e;
}

.cos-free-max-label {
  background: #365d4c;
  border: 1px solid #69b88e;
  color: #dff7e8;
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 800;
  margin-left: 8px;
  padding: 2px 5px;
  text-transform: uppercase;
  vertical-align: middle;
}

.cos-virtual-rank-label {
  display: block;
  width: fit-content;
  margin-top: 0.25rem;
  padding: 0.12rem 0.35rem;
  border-left: 2px solid var(--accent, #dfbd65);
  color: #f0d98f;
  font-size: 0.72rem;
  font-weight: 700;
}

.cos-class-ability-skill-bonus {
  display: block;
  margin-top: 0.2rem;
  color: #b9d9cb;
  font-size: 0.68rem;
}

.cos-specialty-required-label {
  border: 1px solid #d79a42;
  color: #ffd978;
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 800;
  margin-left: 8px;
  padding: 2px 5px;
  text-transform: uppercase;
  vertical-align: middle;
}

.cos-skill-table tr.specialty-template {
  background: #202b26;
  color: #bdc7c0;
}

.cos-specialty-hint {
  color: #9fb0a6;
  font-size: 0.76rem;
  font-style: italic;
}

.cos-remove-specialty {
  color: #dba2a2;
  font-size: 1.1rem;
}

.cos-specialty-actions {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

.cos-set-free-specialty {
  color: #ffd978;
  font-size: 1rem;
}

.cos-specialty-adder {
  align-items: end;
  background: #202b26;
  border: 1px solid #52645a;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(130px, 0.7fr) minmax(220px, 1.6fr) auto;
  padding: 10px;
}

.cos-specialty-adder label {
  display: grid;
  gap: 4px;
}

.cos-specialty-adder label > span {
  color: #d8b464;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-free-max-ranks {
  color: #aee7c8;
  font-weight: 800;
  white-space: nowrap;
}

.cos-skill-table input {
  max-width: 82px;
}

.cos-specialty-adder input {
  max-width: none;
}

.cos-skill-toggle-row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 4px;
}

.cos-skill-toggle-row button {
  min-width: 220px;
}

.cos-skill-toggle-row span {
  color: #c8d0ca;
  font-size: 0.82rem;
}

.cos-talents-step {
  gap: 14px;
}

.cos-talent-stage-tabs {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cos-talent-stage-tabs button {
  align-items: center;
  background: #1b2521;
  border: 1px solid #52645a;
  color: #c8d0ca;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr auto;
  min-height: 48px;
  padding: 9px 12px;
  text-align: left;
}

.cos-talent-stage-tabs button > span {
  align-items: center;
  border: 1px solid #6f8378;
  border-radius: 50%;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.cos-talent-stage-tabs button small {
  color: #aee7c8;
}

.cos-talent-stage-tabs button.active {
  background: #26342e;
  border-color: #d8b464;
  color: #fff9e9;
}

.cos-talent-stage-panel {
  display: grid;
  gap: 12px;
}

.cos-disadvantage-panel {
  background: #241f1d;
  border-left: 3px solid #c47f63;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.cos-disadvantage-panel .cos-section-heading {
  margin: 0;
}

.cos-disadvantage-panel .cos-section-heading > span,
.cos-disadvantage-panel .cos-section-heading > strong {
  color: #efb293;
}

.cos-talent-picker {
  background: #26342e;
  border: 2px solid #d8b464;
  border-radius: 6px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.cos-talent-picker-backdrop {
  align-items: center;
  background: rgba(6, 11, 9, 0.84);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 1200;
}

.cos-talent-picker-backdrop .cos-talent-picker {
  background: #17221d;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(88vh, 900px);
  max-width: 1500px;
  overflow: hidden;
  padding: 0;
  width: min(96vw, 1500px);
}

.cos-talent-picker-backdrop .cos-talent-picker > header {
  border-bottom: 1px solid #52645a;
  padding: 18px 20px;
}

.cos-talent-picker-backdrop .cos-talent-picker > header div {
  display: grid;
  gap: 3px;
}

.cos-talent-picker-backdrop .cos-talent-picker > header h3,
.cos-talent-picker-backdrop .cos-talent-picker > header p {
  margin: 0;
}

.cos-talent-picker-backdrop .cos-talent-picker > header p {
  color: #cbd5ce;
}

.cos-talent-picker-backdrop .cos-talent-browser-layout {
  grid-template-columns: minmax(170px, 0.42fr) minmax(320px, 1fr) minmax(340px, 0.9fr);
  min-height: 0;
  overflow: hidden;
}

.cos-talent-picker-backdrop .cos-talent-browser-controls {
  align-content: start;
  background: #111b17;
  border-right: 1px solid #52645a;
  overflow-y: auto;
  padding: 16px;
}

.cos-talent-picker-backdrop .cos-talent-browser-controls button {
  align-items: center;
  background: transparent;
  border: 1px solid #52645a;
  color: #dfe8e2;
  display: flex;
  justify-content: space-between;
  padding: 9px 10px;
  text-align: left;
}

.cos-talent-picker-backdrop .cos-talent-browser-controls button.active {
  background: #34483e;
  border-color: #d8b464;
  color: #fff9e9;
}

.cos-talent-picker-backdrop .cos-talent-browser-controls button span {
  color: #aee7c8;
  font-size: 0.75rem;
}

.cos-talent-catalogue-cards {
  align-content: start;
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-y: auto;
  padding: 16px;
}

.cos-talent-catalogue-card {
  align-content: start;
  background: #202d27;
  border: 1px solid #52645a;
  color: #f5f1e7;
  display: grid;
  gap: 6px;
  min-height: 170px;
  padding: 13px;
  text-align: left;
}

.cos-talent-catalogue-card:hover,
.cos-talent-catalogue-card.selected {
  background: #2a3a32;
  border-color: #8ec5d5;
}

.cos-talent-catalogue-card.recommended {
  border-top: 3px solid #d8b464;
}

.cos-talent-catalogue-card > span,
.cos-talent-catalogue-card > em,
.cos-talent-catalogue-card > small {
  color: #aee7c8;
  font-size: 0.72rem;
  font-style: normal;
}

.cos-talent-catalogue-card.recommended > span {
  color: #f3cf74;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-talent-catalogue-card strong {
  font-size: 1rem;
}

.cos-talent-catalogue-card p {
  color: #d9e0db;
  display: -webkit-box;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.cos-talent-picker-backdrop .cos-talent-detail {
  border-left: 1px solid #52645a;
  overflow-y: auto;
  padding: 18px;
}

.cos-talent-add-button {
  margin-top: 18px;
  position: sticky;
  bottom: 0;
  width: 100%;
}

.cos-open-catalogue {
  background: #17241f;
  border: 1px solid #d8b464;
  color: #fff9e9;
  display: grid;
  gap: 4px;
  padding: 14px;
  text-align: left;
  width: 100%;
}

.cos-open-catalogue span,
.cos-open-catalogue small {
  color: #aee7c8;
}

.cos-talent-picker:focus {
  outline: 2px solid #8ec5d5;
  outline-offset: 2px;
}

.cos-talent-picker > header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.cos-talent-picker > header div,
.cos-talent-picker > label {
  display: grid;
  gap: 4px;
}

.cos-talent-picker > header span {
  color: #8ec5d5;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-talent-picker > p {
  color: #cbd5ce;
  font-size: 0.8rem;
  margin: 0;
}

.cos-talent-browser-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
}

.cos-talent-browser-controls {
  align-content: start;
  display: grid;
  gap: 12px;
}

.cos-talent-browser-controls label {
  display: grid;
  gap: 5px;
  font-weight: 700;
}

.cos-talent-browser-controls p {
  color: #cbd5ce;
  font-size: 0.8rem;
  margin: 0;
}

.cos-talent-detail {
  background: #17241f;
  border-left: 3px solid #8ec5d5;
  min-height: 220px;
  padding: 14px;
}

.cos-talent-detail-empty {
  align-content: center;
  color: #cbd5ce;
  display: grid;
  gap: 6px;
  min-height: 190px;
  text-align: center;
}

.cos-talent-detail-empty p,
.cos-talent-detail-card p {
  margin: 0;
}

.cos-talent-detail-card {
  display: grid;
  gap: 14px;
}

.cos-talent-detail-card header {
  display: grid;
  gap: 3px;
}

.cos-talent-detail-card header span,
.cos-talent-detail-card dt {
  color: #8ec5d5;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-talent-detail-card h5 {
  font-size: 1.2rem;
  margin: 0;
}

.cos-talent-detail-card dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.cos-talent-detail-card dl div,
.cos-talent-detail-card section {
  display: grid;
  gap: 3px;
}

.cos-talent-detail-card dd {
  margin: 0;
}

.cos-talent-detail-card details {
  border-top: 1px solid #52645a;
  padding-top: 10px;
}

.cos-talent-detail-card summary {
  color: #aee7c8;
  cursor: pointer;
  font-weight: 700;
}

@media (max-width: 760px) {
  .cos-talent-browser-layout {
    grid-template-columns: 1fr;
  }

  .cos-talent-detail-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cos-talent-picker-backdrop {
    align-items: stretch;
    padding: 8px;
  }

  .cos-talent-picker-backdrop .cos-talent-picker {
    height: calc(100vh - 16px);
    width: 100%;
  }

  .cos-talent-picker-backdrop .cos-talent-browser-layout {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .cos-talent-picker-backdrop .cos-talent-browser-controls {
    border-bottom: 1px solid #52645a;
    border-right: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .cos-talent-picker-backdrop .cos-talent-browser-controls strong,
  .cos-talent-picker-backdrop .cos-talent-browser-controls p {
    grid-column: 1 / -1;
  }

  .cos-talent-catalogue-cards {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .cos-talent-picker-backdrop .cos-talent-detail {
    border-left: 0;
    border-top: 1px solid #52645a;
    overflow: visible;
  }
}

.cos-talent-preview {
  background: #17241f;
  border: 1px solid #69b88e;
  color: #fff9e9;
  display: grid;
  gap: 5px;
  padding: 12px;
  text-align: left;
  width: 100%;
}

.cos-talent-preview span,
.cos-talent-preview small {
  color: #aee7c8;
}

.cos-talent-preview strong {
  line-height: 1.4;
}

.cos-talent-lock-note {
  align-items: center;
  background: #2c281d;
  border-left: 3px solid #d8b464;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr auto;
  padding: 10px 12px;
}

.cos-talent-lock-note span {
  color: #d9d4c4;
}

.cos-talent-heading {
  border-top: 1px solid #52645a;
  margin-top: 8px;
  padding-top: 16px;
}

.cos-recommendation-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cos-recommendation-card {
  align-items: start;
  background: #202b26;
  border: 1px solid #52645a;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto;
  padding: 10px;
}

.cos-recommendation-card.recommended {
  border-color: #d79a42;
}

.cos-recommendation-card.selected {
  background: #263d34;
  border-color: #69b88e;
}

.cos-recommendation-card > div {
  display: grid;
  gap: 4px;
}

.cos-recommendation-card span {
  color: #d8b464;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-recommendation-card strong {
  color: #fff9e9;
}

.cos-recommendation-card p,
.cos-recommendation-card small {
  color: #c8d0ca;
  margin: 0;
}

.cos-regional-talent-detail {
  background: #17231e;
  border: 1px solid #43564c;
  cursor: help;
  margin-top: 4px;
  padding: 7px 9px;
}

.cos-regional-talent-detail[open] {
  border-color: #8ec5d5;
}

.cos-regional-talent-detail summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.cos-regional-talent-detail summary::-webkit-details-marker {
  display: none;
}

.cos-regional-talent-detail summary span {
  color: #d8b464;
}

.cos-regional-talent-detail summary strong {
  color: #fff9e9;
}

.cos-regional-talent-detail summary em {
  color: #9fb0a6;
  font-size: 0.72rem;
  font-style: normal;
}

.cos-regional-talent-detail p {
  margin-top: 7px;
}

.cos-regional-talent-detail small {
  display: block;
  margin-top: 5px;
}

@media (max-width: 720px) {
  .cos-talent-stage-tabs,
  .cos-recommendation-grid {
    grid-template-columns: 1fr;
  }

  .cos-talent-lock-note {
    align-items: start;
    grid-template-columns: 1fr;
  }
}

.cos-regional-skill-bonus {
  color: #aee7c8;
  display: block;
  font-size: 0.64rem;
  white-space: nowrap;
}

.cos-generator-loading {
  color: #c8d0ca;
  padding: 18px;
  text-align: center;
}

.generation-message {
  border-left: 4px solid var(--accent);
  background: var(--surface);
  padding: 10px;
}

.generation-message.user {
  border-left-color: #8a6417;
  background: var(--user-bg);
}

.generation-message.handoff {
  border-left-color: var(--accent);
  background: var(--surface-active);
}

.generation-message.app {
  border-left-color: #d79a42;
  background: #18211d;
}

.generation-message.cos-inline-builder .message-content {
  display: grid;
  gap: 12px;
}

.generation-operation-banner,
.generation-finalise-callout,
.generation-waiting-inline {
  align-items: flex-start;
  background: var(--surface-active);
  border: 1px solid var(--accent);
  color: var(--ink);
  display: flex;
  gap: 8px;
  padding: 8px 10px;
}

.generation-finalise-callout {
  align-items: center;
  border-color: var(--warning);
  justify-content: space-between;
}

.generation-finalise-callout strong,
.generation-ready-inline {
  color: var(--warning);
  font-weight: 800;
}

.generation-waiting-inline {
  align-items: center;
  margin-top: 6px;
}

.generation-ready-inline {
  margin-top: 6px;
}

.generation-finalise-callout button {
  flex: 0 0 auto;
}

.generation-operation-banner strong {
  display: block;
}

.generation-operation-banner {
  align-items: center;
}

.generation-operation-banner.submitted {
  border-color: var(--good);
}

.ai-packet-indicator {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 28px;
}

.ai-packet-mark {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  height: 26px;
  justify-content: center;
  line-height: 1;
  width: 30px;
}

.ai-packet-signal {
  align-items: center;
  display: inline-flex;
  gap: 3px;
  height: 18px;
  min-width: 24px;
  position: relative;
}

.ai-packet-signal i {
  background: var(--accent);
  border-radius: 50%;
  display: block;
  height: 5px;
  opacity: 0.32;
  width: 5px;
}

.ai-packet-indicator.awaiting .ai-packet-mark {
  animation: ai-packet-glow 1.8s ease-in-out infinite;
}

.ai-packet-indicator.awaiting .ai-packet-signal i {
  animation: ai-signal-pulse 1.2s ease-in-out infinite;
}

.ai-packet-indicator.awaiting .ai-packet-signal i:nth-child(2) {
  animation-delay: 0.16s;
}

.ai-packet-indicator.awaiting .ai-packet-signal i:nth-child(3) {
  animation-delay: 0.32s;
}

.ai-packet-indicator.queued .ai-packet-signal i:first-child {
  animation: ai-signal-pulse 1.8s ease-in-out infinite;
}

.ai-packet-indicator.received .ai-packet-mark {
  background: color-mix(in srgb, var(--good) 18%, var(--surface));
  border-color: var(--good);
  color: var(--good);
}

.ai-packet-indicator.received .ai-packet-signal i {
  display: none;
}

.ai-packet-indicator.received .ai-packet-signal::after {
  border-bottom: 3px solid var(--good);
  border-right: 3px solid var(--good);
  content: "";
  height: 11px;
  left: 6px;
  position: absolute;
  top: 0;
  transform: rotate(42deg);
  width: 6px;
}

@keyframes ai-signal-pulse {
  0%, 70%, 100% {
    opacity: 0.28;
    transform: translateX(0) scale(0.82);
  }
  35% {
    opacity: 1;
    transform: translateX(1px) scale(1);
  }
}

@keyframes ai-packet-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-packet-indicator.awaiting .ai-packet-mark,
  .ai-packet-indicator.awaiting .ai-packet-signal i,
  .ai-packet-indicator.queued .ai-packet-signal i:first-child {
    animation: none;
  }

  .ai-packet-indicator.awaiting .ai-packet-signal i {
    opacity: 0.8;
  }
}

.generation-reply-form {
  display: grid;
  gap: 8px;
}

.generation-reply-form label {
  display: grid;
  gap: 6px;
}

.form-row.compact {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.story-submit-row {
  grid-template-columns: auto auto auto auto minmax(0, 1fr);
}

#submit-selected-response,
#unsubmit-response,
#confirm-current-actions,
.story-submit-row button[type="submit"] {
  position: relative;
  z-index: 5;
}

.pf1-action-confirmation-panel {
  max-width: min(920px, 96vw);
}

.pf1-action-preview-body {
  display: grid;
  gap: 12px;
  max-height: min(68vh, 720px);
  overflow: auto;
}

.pf1-action-preview-section {
  display: grid;
  gap: 6px;
}

.pf1-action-confirm-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.pf1-action-confirm-grid label,
.pf1-action-confirm-grid select {
  min-width: 0;
  width: 100%;
}

.pf1-action-plan {
  gap: 10px;
}

.pf1-action-preview-section h3 {
  margin: 0;
}

.pf1-action-declaration {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0;
  padding: 10px 12px;
  white-space: pre-wrap;
}

.pf1-action-preview-facts {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin: 0;
}

.pf1-action-preview-facts div {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

.pf1-action-preview-facts dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pf1-action-preview-facts dd {
  margin: 2px 0 0;
}

.autopass-state-note {
  align-items: flex-start;
  background: rgba(125, 195, 221, 0.1);
  border: 1px solid rgba(125, 195, 221, 0.28);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 3px;
  padding: 9px 11px;
}

.autopass-state-note span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.story-form.response-passed #story-message {
  background: rgba(125, 195, 221, 0.08);
  border-color: rgba(125, 195, 221, 0.28);
  color: var(--muted);
  cursor: default;
}

body.has-focus-panel {
  overflow: hidden;
}

.chat-panel.focus-panel,
.generation-chat.focus-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100dvw;
  height: 100svh;
  height: 100dvh;
  max-height: 100svh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--focus-bg);
  border: 0;
  box-shadow: none;
  padding-block: calc(14px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-bottom, 0px));
  padding-inline: calc(14px + env(safe-area-inset-left, 0px)) calc(14px + env(safe-area-inset-right, 0px));
}

.chat-panel.focus-panel {
  gap: 10px;
  grid-template-rows: auto auto auto minmax(0, 3fr) minmax(320px, 1fr);
}

.chat-panel.focus-panel:has(.initialise-scene-form:not([hidden])) {
  grid-template-rows: auto auto auto auto minmax(0, 3fr) minmax(320px, 1fr);
}

.chat-panel.focus-panel .chat-tab-bar {
  margin-bottom: 0;
  position: static;
}

.chat-panel.focus-panel .turn-status-panel {
  align-content: start;
  min-height: 0;
}

.generation-chat.focus-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 4fr) minmax(150px, 1fr);
  gap: 10px;
}

.chat-panel.focus-panel .chat-log,
.generation-chat.focus-panel .generation-log {
  min-height: 0;
  max-height: none;
}

.chat-panel.focus-panel .story-form,
.generation-chat.focus-panel .generation-reply-form {
  min-height: 0;
  height: 100%;
  margin-top: 0;
}

.chat-panel.focus-panel .story-form {
  grid-template-rows: minmax(92px, 1fr) auto auto auto auto;
  overflow: auto;
}

.generation-chat.focus-panel .generation-reply-form {
  grid-template-rows: minmax(0, 1fr) auto;
}

.generation-chat.focus-panel .generation-reply-form label {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.generation-chat.focus-panel textarea {
  min-height: 92px;
  height: 100%;
}

.generation-chat.focus-panel .generation-mention-shell,
.generation-chat.focus-panel .generation-mention-shell #character-generation-reply {
  min-height: 92px;
  height: 100%;
  max-height: none;
}

@media (max-width: 720px) {
  .generation-finalise-callout {
    align-items: stretch;
    flex-direction: column;
  }

  .generation-finalise-callout button {
    width: 100%;
  }
}

.chat-panel.focus-panel #story-message {
  min-height: 92px;
  height: 100%;
  resize: vertical;
}

.chat-panel.focus-panel .dm-packet-message textarea {
  min-height: 56px;
  height: auto;
}

.step-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.86rem;
}

.step-list .ok {
  color: var(--good);
}

.step-list .bad {
  color: var(--danger);
}

.roll-item.final {
  border-color: rgba(45, 105, 93, 0.45);
  background: var(--success-bg);
}

.roll-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.roll-result {
  font-weight: 900;
  color: var(--accent-dark);
}

.character-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.sheet-render {
  background: var(--sheet-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 14px;
}

.pf-sheet {
  display: grid;
  gap: 12px;
}

.sheet-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sheet-subject-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--panel-bg);
}

.sheet-subject-tabs button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.sheet-subject-tabs button.active {
  background: var(--accent);
  color: var(--button-ink);
}

.sheet-subject-tabs .muted {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sheet-tabs button {
  background: var(--control-bg);
  color: var(--accent-dark);
}

.sheet-tabs button.active {
  background: var(--accent);
  color: var(--button-ink);
}

.mechanics-panel {
  display: grid;
  gap: 14px;
}

.mechanics-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.mechanics-section h3 {
  margin: 0;
}

.mechanics-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
}

.mechanics-table {
  border-collapse: collapse;
  min-width: 920px;
  table-layout: fixed;
  width: max-content;
}

.mechanics-action_modes {
  min-width: 1660px;
}

.mechanics-spell_effects {
  min-width: 1580px;
}

.mechanics-spell_effects.mechanics-two-row-table {
  min-width: 1320px;
}

.mechanics-reaction_policies {
  min-width: 1260px;
}

.mechanics-table th,
.mechanics-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.mechanics-table th {
  text-align: left;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.mechanics-cell-input {
  min-width: 96px;
  width: 100%;
}

.mechanics-weapon-field {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(130px, 1fr) auto;
}

.mechanics-weapon-picker-button {
  min-height: 34px;
  padding-left: 10px;
  padding-right: 10px;
}

.mechanics-text-cell {
  min-width: 340px;
  width: 34%;
}

.mechanics-cell-textarea {
  min-width: 320px;
  min-height: 118px;
  resize: vertical;
}

.mechanics-mode-picker {
  display: grid;
  gap: 4px;
  max-height: 132px;
  min-height: 42px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.mechanics-mode-picker-empty {
  align-content: center;
}

.mechanics-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.25;
}

.mechanics-mode-checkbox {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin-top: 1px;
}

.mechanics-default-radio {
  display: block;
  margin: 8px auto;
  min-width: 0;
  width: auto;
}

.mechanics-row-action {
  text-align: center;
  width: 74px;
}

.overview-subsection,
.mechanics-readonly-section {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.overview-subsection h3,
.mechanics-readonly-section h3 {
  margin: 0;
}

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

.readonly-mechanics-table th,
.readonly-mechanics-table td {
  border-bottom: 1px solid var(--line);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}

.readonly-mechanics-table th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.readonly-mechanics-table td:last-child {
  overflow-wrap: anywhere;
}

.mechanics-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mechanics-spell_effects th:nth-child(1),
.mechanics-spell_effects td:nth-child(1),
.mechanics-reaction_policies th:nth-child(2),
.mechanics-reaction_policies td:nth-child(2) {
  width: 180px;
}

.mechanics-spell_effects th:nth-child(2),
.mechanics-spell_effects td:nth-child(2),
.mechanics-spell_effects th:nth-child(3),
.mechanics-spell_effects td:nth-child(3),
.mechanics-spell_effects th:nth-child(5),
.mechanics-spell_effects td:nth-child(5),
.mechanics-spell_effects th:nth-child(6),
.mechanics-spell_effects td:nth-child(6),
.mechanics-spell_effects th:nth-child(7),
.mechanics-spell_effects td:nth-child(7),
.mechanics-reaction_policies th:nth-child(1),
.mechanics-reaction_policies td:nth-child(1),
.mechanics-reaction_policies th:nth-child(3),
.mechanics-reaction_policies td:nth-child(3),
.mechanics-reaction_policies th:nth-child(4),
.mechanics-reaction_policies td:nth-child(4),
.mechanics-reaction_policies th:nth-child(5),
.mechanics-reaction_policies td:nth-child(5) {
  width: 140px;
}

.mechanics-spell_effects th:nth-child(4),
.mechanics-spell_effects td:nth-child(4),
.mechanics-spell_effects th:nth-child(10),
.mechanics-spell_effects td:nth-child(10),
.mechanics-spell_effects th:nth-child(11),
.mechanics-spell_effects td:nth-child(11) {
  width: 120px;
}

.mechanics-spell_effects th:nth-child(9),
.mechanics-spell_effects td:nth-child(9),
.mechanics-reaction_policies th:nth-child(6),
.mechanics-reaction_policies td:nth-child(6),
.mechanics-reaction_policies th:nth-child(7),
.mechanics-reaction_policies td:nth-child(7) {
  width: 260px;
}

.mechanics-spell_effects.mechanics-two-row-table th:nth-child(8),
.mechanics-spell_effects.mechanics-two-row-table td:nth-child(8) {
  width: 180px;
}

.mechanics-spell_effects.mechanics-two-row-table th:nth-child(9),
.mechanics-spell_effects.mechanics-two-row-table td:nth-child(9),
.mechanics-spell_effects.mechanics-two-row-table th:nth-child(10),
.mechanics-spell_effects.mechanics-two-row-table td:nth-child(10) {
  width: 140px;
}

.mechanics-effect-row td,
.spell-effect-full-row td {
  background: rgba(142, 197, 213, 0.04);
  border-bottom: 2px solid var(--line);
}

.mechanics-effect-row .mechanics-cell-textarea {
  min-height: 96px;
  min-width: 100%;
  width: 100%;
}

.mechanics-effect-label {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.mechanics-effect-readonly {
  line-height: 1.38;
  max-width: 1100px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.spell-effects-two-row-table tbody:nth-child(odd) tr {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.mechanics-action_modes th:nth-child(1),
.mechanics-action_modes td:nth-child(1) {
  width: 190px;
}

.mechanics-action_modes th:nth-child(2),
.mechanics-action_modes td:nth-child(2) {
  width: 310px;
}

.mechanics-action_modes th:nth-child(3),
.mechanics-action_modes td:nth-child(3) {
  width: 130px;
}

.mechanics-action_modes th:nth-child(4),
.mechanics-action_modes td:nth-child(4) {
  text-align: center;
  width: 95px;
}

.mechanics-action_modes th:nth-child(5),
.mechanics-action_modes td:nth-child(5) {
  text-align: center;
  width: 95px;
}

.mechanics-action_modes th:nth-child(6),
.mechanics-action_modes td:nth-child(6) {
  width: 90px;
}

.mechanics-action_modes th:nth-child(7),
.mechanics-action_modes td:nth-child(7) {
  width: 150px;
}

.mechanics-action_modes th:nth-child(8),
.mechanics-action_modes td:nth-child(8) {
  width: 110px;
}

.mechanics-action_modes th:nth-child(9),
.mechanics-action_modes td:nth-child(9) {
  width: 95px;
}

.mechanics-action_modes th:nth-child(10),
.mechanics-action_modes td:nth-child(10) {
  width: 320px;
}

.compact-empty {
  padding: 8px;
}

.character-link.needs-level-up {
  border-color: #67d391;
  box-shadow: inset 3px 0 0 #67d391;
}

.level-up-mini {
  color: #9ff0bd;
  font-weight: 800;
  font-size: 0.82rem;
  margin-top: 4px;
}

.level-up-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 10px;
  padding: 10px;
  border: 1px solid rgba(103, 211, 145, 0.6);
  background: rgba(103, 211, 145, 0.12);
}

.level-up-callout.compact {
  padding: 8px;
}

.identity-block {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(0, 1fr) minmax(230px, 280px);
  gap: 12px;
  align-items: start;
}

.portrait {
  appearance: none;
  min-height: 180px;
  display: grid;
  place-items: center;
  background: var(--portrait-bg);
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  border: 2px solid var(--accent-dark);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  padding: 0;
  width: 100%;
  cursor: pointer;
}

.portrait.has-image {
  background: var(--surface-strong);
  cursor: zoom-in;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portrait-panel {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 10px;
}

.portrait-field {
  display: grid;
  gap: 4px;
}

.portrait-field small {
  line-height: 1.25;
}

.portrait-prompt {
  min-height: 78px;
  resize: vertical;
}

.portrait-candidate {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.portrait-candidate img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--control-bg);
}

.sheet-portrait-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 8, 12, 0.92);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.sheet-portrait-lightbox-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
}

.sheet-portrait-lightbox-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 14px;
  min-height: 0;
  padding: 14px;
}

.sheet-portrait-lightbox-frame {
  display: grid;
  place-items: center;
  min-height: 0;
}

.sheet-portrait-lightbox-frame img {
  max-width: min(92vw, 900px);
  max-height: 84vh;
  object-fit: contain;
}

.sheet-portrait-placeholder {
  align-items: center;
  aspect-ratio: 4 / 5;
  background: var(--portrait-bg);
  border: 2px solid var(--accent-dark);
  color: #fff;
  display: grid;
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 900;
  justify-content: center;
  max-height: 84vh;
  width: min(80vw, 520px);
}

.sheet-portrait-controls {
  align-content: start;
  max-height: 84vh;
  overflow: auto;
}

.character-name {
  color: var(--accent-dark);
  font: 700 clamp(2rem, 5vw, 3.5rem) Georgia, "Times New Roman", serif;
  overflow-wrap: anywhere;
}

.meta-grid,
.stats-grid,
.ability-grid,
.resource-grid {
  display: grid;
  gap: 8px;
}

.meta-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.meta-column {
  display: grid;
  gap: 8px;
  align-content: start;
}

.stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cos-stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ability-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cos-derived-stat-section {
  display: grid;
  gap: 8px;
}

.cos-derived-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cos-derived-stat-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-left: 3px solid var(--accent-dark);
  padding: 8px 10px;
  min-width: 0;
  display: grid;
  gap: 5px;
}

.cos-derived-stat-card div {
  display: grid;
  gap: 2px;
}

.cos-derived-stat-card span,
.cos-derived-stat-card small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.cos-derived-stat-card strong {
  color: var(--accent-light);
  font-size: 1.25rem;
  line-height: 1.1;
}

.cos-derived-stat-card p {
  margin: 0;
  line-height: 1.25;
}

.resource-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.lore-form,
.lore-section {
  display: grid;
  gap: 10px;
}

.lore-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.lore-column {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 10px;
  min-width: 0;
}

.lore-column ul {
  margin: 0;
  padding-left: 18px;
}

.lore-card-list {
  display: grid;
  gap: 8px;
}

.lore-card {
  border: 1px solid rgba(116, 171, 197, 0.24);
  background: rgba(12, 22, 30, 0.42);
  padding: 8px 10px;
}

.lore-card h3 {
  color: var(--accent-light);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.2;
  margin: 0 0 4px;
}

.lore-card p {
  line-height: 1.32;
  margin: 0;
}

.lore-column textarea {
  min-height: 150px;
}

.lore-field {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 10px;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.lore-field textarea {
  min-height: 130px;
}

.appearance-mode-field {
  max-width: 420px;
}

.appearance-mode-field select {
  width: 100%;
  min-height: 36px;
}

.lore-entry-list {
  display: grid;
  gap: 8px;
}

.lore-entry {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) minmax(120px, 180px) auto;
  gap: 8px;
  align-items: start;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 8px;
}

.lore-entry textarea {
  min-height: 76px;
  resize: vertical;
}

.lore-entry-review {
  display: grid;
  gap: 6px;
  align-content: start;
}

.lore-entry-review p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.25;
  margin: 0;
}

.lore-review-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  justify-content: center;
  padding: 3px 8px;
  text-transform: uppercase;
}

.lore-review-badge.pending_review {
  border-color: rgba(231, 184, 93, 0.62);
  color: #e7c36f;
}

.lore-review-badge.contested {
  border-color: rgba(255, 139, 139, 0.72);
  color: #ff9b9b;
}

.lore-review-badge.accepted {
  border-color: rgba(115, 206, 161, 0.58);
  color: #8ddfb2;
}

.quest-manager,
.quick-quest-section {
  display: grid;
  gap: 10px;
}

.quest-add-form {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(180px, 1fr) minmax(110px, 150px) auto;
}

.quest-add-form textarea {
  grid-column: 1 / -1;
  min-height: 74px;
}

.quest-add-form.compact {
  grid-template-columns: minmax(160px, 1fr) minmax(96px, 130px) auto;
}

.quest-list {
  display: grid;
  gap: 8px;
}

.quest-manager .quest-list:not(.compact) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quest-entry {
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 9px;
}

.quest-entry.completed {
  opacity: 0.72;
}

.quest-entry.completed input[name="title"],
.quest-entry.completed strong {
  text-decoration: line-through;
}

.quest-entry.completed .quest-summary-title {
  text-decoration: line-through;
}

.quest-entry.compact {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 7px 8px;
}

.quest-entry.compact small {
  color: var(--muted);
  display: block;
  font-size: 0.76rem;
  margin-top: 1px;
}

.quest-check {
  display: grid;
  margin-top: 7px;
  place-items: center;
}

.quest-entry.compact .quest-check {
  margin-top: 0;
}

.quest-check input {
  min-height: 18px;
  width: 18px;
}

.quest-edit-form {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.quest-details {
  min-width: 0;
}

.quest-details summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  list-style: none;
  min-height: 30px;
}

.quest-details summary::-webkit-details-marker {
  display: none;
}

.quest-details summary::before {
  color: var(--accent-dark);
  content: "+";
  font-weight: 900;
  grid-column: 1;
}

.quest-details[open] summary::before {
  content: "-";
}

.quest-summary-title {
  color: var(--ink);
  font-weight: 900;
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.quest-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  grid-column: 3;
  justify-content: flex-end;
}

.quest-details .quest-edit-form {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 8px;
}

.quest-entry-head {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(105px, 140px);
}

.quest-edit-form textarea {
  min-height: 76px;
}

.quest-notes-row {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.quest-notes-row textarea {
  min-height: 54px;
}

.quest-notes-row button {
  align-self: end;
  min-height: 32px;
  padding: 5px 9px;
  white-space: nowrap;
}

.legacy-quest-notes {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.legacy-quest-notes summary {
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.compact-empty {
  padding: 8px;
}

.field,
.stat,
.ability,
.resource-card {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 8px;
  min-width: 0;
}

.stat {
  display: grid;
  align-content: start;
  gap: 3px;
}

.stat strong {
  white-space: nowrap;
}

.field-detail-list {
  display: grid;
  gap: 3px;
  line-height: 1.25;
}

.field-detail-list small {
  color: var(--muted);
}

.resource-card {
  display: grid;
  align-content: start;
  gap: 8px;
}

.resource-card-wide {
  grid-column: span 2;
}

.resource-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.resource-summary span,
.resource-detail {
  border: 1px solid var(--line);
  background: var(--pill-bg);
  padding: 4px 7px;
}

.resource-summary strong {
  color: var(--accent-dark);
  margin-right: 4px;
}

.resource-sections {
  display: grid;
  gap: 10px;
}

.resource-detail-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.resource-detail span {
  color: var(--muted);
  display: block;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.resource-detail strong {
  display: block;
  font-size: 0.95rem;
  margin-top: 2px;
}

.resource-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.weapon-rule-chip-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 6px;
  vertical-align: middle;
}

.weapon-rule-chip {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--accent);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0 1px;
}

.weapon-rule-chip:hover,
.weapon-rule-chip:focus-visible {
  color: var(--accent-dark);
  border-bottom-style: solid;
  outline: none;
}

.weapon-rule-popover {
  background: var(--surface);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow);
  color: var(--text);
  display: grid;
  gap: 5px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px;
  position: absolute;
  z-index: 10000;
}

.weapon-rule-popover strong {
  color: var(--accent-dark);
  font-size: 0.82rem;
}

.weapon-rule-popover p {
  line-height: 1.35;
  margin: 0;
}

.resource-notes {
  margin: 0;
  padding-left: 18px;
}

.equipment-tab {
  display: grid;
  gap: 12px;
}

.equipment-section {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 10px;
}

.equipment-section h3 {
  margin: 0 0 8px;
}

.equipment-detail-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.equipment-table th:nth-child(1),
.equipment-table td:nth-child(1) {
  width: 22%;
}

.equipment-table th:nth-child(2),
.equipment-table td:nth-child(2) {
  text-align: center;
  width: 64px;
}

.equipment-table th:nth-child(3),
.equipment-table td:nth-child(3) {
  width: 120px;
}

.equipment-table th:nth-child(4),
.equipment-table td:nth-child(4) {
  width: 34%;
}

.section-heading-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.section-heading-row h2 {
  margin-bottom: 0;
}

.class-reference-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compact-link {
  font-size: 0.82rem;
  padding: 5px 8px;
}

.class-pool-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 8px 0;
}

.class-pool-card {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 8px;
}

.class-pool-card strong {
  color: var(--accent-dark);
  display: block;
  font-size: 1.45rem;
}

.class-pool-card small {
  color: var(--muted);
  display: block;
  line-height: 1.25;
}

.class-feature-table td,
.sheet-named-item-table td,
.spell-table td {
  vertical-align: top;
}

.sheet-named-item-table th:nth-child(1),
.sheet-named-item-table td:nth-child(1) {
  width: 24%;
}

.sheet-named-item-table th:nth-child(2),
.sheet-named-item-table td:nth-child(2) {
  width: 130px;
}

.sheet-named-item-table p {
  margin: 0 0 0.32rem;
}

.sheet-named-item-table p:last-child {
  margin-bottom: 0;
}

.sheet-attack-table th:nth-child(1),
.sheet-attack-table td:nth-child(1) {
  width: 22%;
}

.sheet-attack-table th:nth-child(2),
.sheet-attack-table td:nth-child(2) {
  text-align: center;
  width: 76px;
}

.sheet-attack-table th:nth-child(3),
.sheet-attack-table td:nth-child(3) {
  width: 108px;
}

.sheet-attack-table th:nth-child(4),
.sheet-attack-table td:nth-child(4),
.sheet-skill-table th:nth-child(6),
.sheet-skill-table td:nth-child(6) {
  overflow-wrap: break-word;
  width: auto;
}

.sheet-skill-table th:nth-child(1),
.sheet-skill-table td:nth-child(1) {
  width: 23%;
}

.sheet-skill-table th:nth-child(2),
.sheet-skill-table td:nth-child(2),
.sheet-skill-table th:nth-child(3),
.sheet-skill-table td:nth-child(3),
.sheet-skill-table th:nth-child(4),
.sheet-skill-table td:nth-child(4) {
  text-align: center;
  width: 66px;
}

.sheet-skill-table th:nth-child(5),
.sheet-skill-table td:nth-child(5) {
  text-align: center;
  width: 58px;
}

.sheet-skill-table th,
.sheet-skill-table td {
  font-size: 0.82rem;
  line-height: 1.15;
  padding: 3px 6px;
}

.sheet-skill-table .generated-skill td {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-muted) 14%);
}

.sheet-skill-table .generated-skill td:first-child {
  color: var(--ink);
}

.class-feature-table td:first-child {
  color: var(--accent-dark);
  font-weight: 900;
  width: 210px;
}

.class-feature-table p {
  margin: 0 0 0.32rem;
}

.class-feature-table p:last-child {
  margin-bottom: 0;
}

.feature-sublist {
  margin: 0.25rem 0 0;
  padding-left: 18px;
}

.feature-options {
  margin: 0.35rem 0 0;
}

.feature-extra-list {
  display: grid;
  gap: 2px 8px;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0.25rem 0 0;
}

.feature-extra-list dt {
  color: var(--muted);
  font-weight: 900;
}

.feature-extra-list dd {
  margin: 0;
}

.spell-table {
  margin-top: 4px;
}

.spell-table th:first-child,
.spell-table td:first-child {
  width: 70px;
}

.spell-table th:nth-child(2),
.spell-table td:nth-child(2) {
  width: 90px;
}

.spell-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spell-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 3px 8px;
}

.spell-chip.used {
  color: var(--muted);
  opacity: 0.72;
  text-decoration: line-through;
}

.spellbook-tab {
  display: grid;
  gap: 12px;
}

.spellcasting-panel {
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 10px;
  padding: 10px;
}

.spellcasting-detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.spellbook-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.spellbook-level {
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 10px;
  padding: 10px;
}

.spellbook-level-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.spellbook-level-header h3 {
  margin: 0;
}

.spell-prepare {
  display: grid;
  gap: 5px;
}

.spell-prepare span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.spell-prepare textarea {
  min-height: 86px;
  resize: vertical;
}

.spell-prep-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.spell-prep-panel {
  border: 1px solid rgba(116, 171, 197, 0.22);
  background: rgba(8, 17, 24, 0.32);
  display: grid;
  gap: 7px;
  padding: 8px;
}

.prepared-slot-list,
.prepared-spell-list,
.planned-spell-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prepared-slot,
.planned-spell {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--ink);
  display: inline-flex;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
}

.prepared-slot {
  cursor: pointer;
  font: inherit;
}

.prepared-slot:hover,
.prepared-slot:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.prepared-slot.used {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, var(--pill-bg));
  color: var(--danger);
}

.prepared-slot.used span {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.planned-spell {
  border-style: dashed;
}

.planned-count {
  color: var(--accent-dark);
  font-weight: 900;
}

.icon-button {
  min-height: 22px;
  min-width: 22px;
  padding: 0 6px;
}

.spell-manual-add {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(180px, 1fr) auto auto;
}

.spell-manual-add input {
  min-width: 0;
}

.spellbook-spells {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.prepared-spell-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.spellbook-spell {
  border: 1px solid rgba(116, 171, 197, 0.24);
  background: rgba(12, 22, 30, 0.35);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 10px;
  text-align: left;
}

.spellbook-spell strong {
  color: var(--accent-light);
}

button.spellbook-spell {
  cursor: pointer;
  font: inherit;
  min-height: 0;
  width: 100%;
}

button.spellbook-spell:hover:not(:disabled),
button.spellbook-spell:focus-visible:not(:disabled),
.spellbook-spell-toggle:hover,
.spellbook-spell-toggle:focus-visible {
  border-color: var(--accent-dark);
}

.spellbook-spell.planned {
  background: rgba(47, 134, 96, 0.32);
  border-color: rgba(101, 211, 151, 0.78);
}

.spellbook-spell-toggle {
  cursor: pointer;
}

.spellbook-spell-toggle[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.spellbook-spell.planned strong,
.spellbook-spell.planned .spellbook-spell-status {
  color: #91f0b6;
}

.prepared-spell-bubble.used {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 78%, var(--line));
}

.prepared-spell-bubble.used strong,
.prepared-spell-bubble.used .spellbook-spell-status {
  color: var(--danger);
}

.spellbook-spell-controls {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 8px;
}

.spellbook-prepare-drawer {
  display: grid;
  gap: 10px;
}

.spellbook-prepare-drawer summary {
  list-style: none;
}

.spellbook-prepare-drawer summary::-webkit-details-marker {
  display: none;
}

.button-like {
  align-items: center;
  background: var(--accent);
  border: 1px solid var(--accent-dark);
  border-radius: 8px;
  color: #031018;
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  width: fit-content;
}

.spellbook-prepare-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

button.spellbook-spell:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.spellbook-spell-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.spellbook-spell-status {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.spellbook-spell p {
  line-height: 1.28;
  margin: 4px 0 0;
}

.cos-slot-meter {
  align-items: center;
  border-left: 3px solid var(--accent-dark);
  display: grid;
  gap: 5px;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  min-width: min(420px, 100%);
  padding-left: 10px;
}

.cos-slot-meter > div:first-child {
  display: grid;
}

.cos-slot-meter span,
.power-channel span,
.power-channel small {
  color: var(--muted);
  font-size: 0.76rem;
}

.cos-slot-pips {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(auto-fit, minmax(12px, 1fr));
}

.cos-slot-pips span {
  background: color-mix(in srgb, var(--surface) 75%, black);
  border: 1px solid var(--line);
  height: 10px;
}

.cos-slot-pips span.available {
  background: var(--accent);
  border-color: var(--accent-dark);
}

.cos-slot-controls,
.power-cast-controls {
  align-items: center;
  display: flex;
  gap: 6px;
}

.cos-prepared-spell,
.power-card {
  border-radius: 6px;
  display: grid;
  gap: 8px;
}

.cos-prepared-spell > button,
.power-cast-controls > button {
  justify-self: end;
}

.power-global-cooldowns,
.power-sphere-cooldowns {
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 10px;
  padding: 10px;
}

.power-global-cooldowns h3,
.power-sphere-cooldowns h3 {
  margin: 2px 0 0;
}

.power-channel-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.power-channel {
  border: 1px solid var(--line);
  display: grid;
  gap: 2px;
  min-height: 82px;
  padding: 10px;
}

.power-channel.ready {
  background: color-mix(in srgb, #2f8660 20%, var(--surface));
  border-color: color-mix(in srgb, #65d397 65%, var(--line));
}

.power-channel.busy {
  background: color-mix(in srgb, var(--accent-dark) 15%, var(--surface));
  border-color: var(--accent-dark);
}

.power-channel strong {
  font-size: 1.05rem;
}

.pill.ready {
  border-color: #65d397;
  color: #91f0b6;
}

.pill.full {
  border-color: var(--danger);
  color: var(--danger);
}

.power-cooldown-list {
  display: grid;
  gap: 7px;
}

.power-cooldown-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(120px, 0.32fr) minmax(160px, 1fr);
}

.power-cooldown-row > div:first-child {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.power-cooldown-row.ready strong,
.power-card.ready strong {
  color: #91f0b6;
}

.power-cooldown-track {
  background: color-mix(in srgb, var(--surface) 75%, black);
  border: 1px solid var(--line);
  height: 12px;
  overflow: hidden;
}

.power-cooldown-track span {
  background: var(--accent-dark);
  display: block;
  height: 100%;
}

.power-cooldown-meter {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(auto-fit, minmax(14px, 1fr));
  min-height: 16px;
}

.power-cooldown-meter span {
  background: color-mix(in srgb, var(--surface) 78%, black);
  border: 1px solid var(--line);
  min-height: 14px;
}

.power-cooldown-meter span.active {
  background: color-mix(in srgb, var(--danger) 84%, #3b1111);
  border-color: color-mix(in srgb, var(--danger) 88%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 18%, transparent);
}

.power-level-section {
  background: color-mix(in srgb, var(--surface) 82%, black);
}

.power-cast-controls {
  justify-content: flex-end;
}

.power-cast-controls label {
  align-items: center;
  display: flex;
  gap: 6px;
}

.power-card.blocked {
  opacity: 0.68;
}

.label {
  color: var(--muted);
  display: block;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.stat strong,
.ability strong {
  display: block;
  color: var(--accent-dark);
  font-size: 1.5rem;
}

.meter {
  height: 13px;
  border: 1px solid var(--line);
  background: var(--meter-bg);
  overflow: hidden;
  margin-top: 5px;
}

.meter span {
  display: block;
  height: 100%;
  background: var(--meter-fill);
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--pill-bg);
  font-size: 0.82rem;
  font-weight: 700;
}

.pill.active-effect {
  border-color: var(--accent);
  background: var(--surface-active);
  color: var(--accent-dark);
}

.stack {
  display: grid;
  gap: 8px;
}

.collapsible-panel {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 9px;
  margin-bottom: 12px;
}

.collapsible-panel summary {
  color: var(--accent-dark);
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 900;
}

.collapsible-panel[open] summary {
  margin-bottom: 10px;
}

.assignment-panel {
  display: grid;
  align-content: start;
  gap: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th,
td {
  border: 1px solid var(--line);
  padding: 6px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

th {
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
}

@media (max-width: 1050px) {
  .landing-view,
  .campaign-choice-screen,
  .welcome-screen {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .campaign-choice-screen .landing-montage,
  .welcome-screen .landing-montage {
    order: 0;
  }

  .landing-montage,
  .landing-montage.compact {
    grid-template-rows: repeat(5, minmax(50px, 11vw));
    min-height: 360px;
  }

  .workspace,
  .sheet-layout,
  .admin-grid,
  .setup-layout,
  .npc-dialogue-lab-grid,
  .campaign-documents-render,
  .identity-block {
    grid-template-columns: 1fr;
  }

  .scene-control-card-head {
    display: grid;
  }

  .scene-control-card-tools {
    justify-items: start;
  }

  .scene-control-chip-row {
    justify-content: flex-start;
  }

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

  .workspace {
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
  }

  .chat-column {
    height: calc(100dvh - 178px);
    min-height: 560px;
  }

  .side-column {
    max-height: none;
    overflow: visible;
    position: static;
  }

  .campaign-document-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 320px;
    padding-right: 0;
    padding-bottom: 12px;
  }

  .sheet-portrait-lightbox-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .sheet-portrait-lightbox-frame img,
  .sheet-portrait-placeholder,
  .sheet-portrait-controls {
    max-height: none;
  }
}

@media (orientation: landscape) and (max-height: 760px) and (min-width: 701px) and (max-width: 1180px) {
  body[data-view="chat"] {
    overflow: hidden;
  }

  body[data-view="chat"] .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block: max(6px, env(safe-area-inset-top, 0px)) 6px;
  }

  body[data-view="chat"] .eyebrow {
    display: none;
  }

  body[data-view="chat"] .app-header h1 {
    font-size: clamp(1.35rem, 3.2vw, 2.4rem);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-view="chat"] main {
    display: block;
    height: calc(100dvh - 88px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-width: none;
    overflow: hidden;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }

  body[data-view="chat"] .mode-tabs {
    margin-bottom: 6px;
  }

  body[data-view="chat"] #app-view {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-view="chat"] #chat-view {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-view="chat"] .workspace {
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-view="chat"] .chat-column,
  body[data-view="chat"] .side-column,
  body[data-view="chat"] .chat-panel {
    min-height: 0;
    overflow: hidden;
  }

  body[data-view="chat"] .chat-column {
    height: auto;
  }

  body[data-view="chat"] .side-column {
    display: none;
  }

  body[data-view="chat"].focused-dialogue-open .side-column {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
    display: grid;
    gap: 0;
    max-height: none;
    overflow: auto;
    padding: 8px;
    position: fixed;
    right: max(8px, env(safe-area-inset-right, 0px));
    top: calc(88px + env(safe-area-inset-top, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: min(430px, calc(100dvw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    z-index: 70;
  }

  body[data-view="chat"].focused-dialogue-expanded .side-column {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
    pointer-events: none;
    z-index: 2147481999;
  }

  body[data-view="chat"].focused-dialogue-expanded #npc-dialogue-lab-panel {
    pointer-events: auto;
  }

  body[data-view="chat"].focused-dialogue-open .side-column > .panel:not(#npc-dialogue-lab-panel) {
    display: none;
  }

  body[data-view="chat"].focused-dialogue-open #npc-dialogue-lab-panel {
    margin: 0;
  }

  body[data-view="chat"] .play-actions-drawer .panel-actions .mobile-only-tool {
    display: inline-flex;
  }

  body[data-view="chat"] .play-actions-drawer .panel-actions .scene-image-focus {
    display: flex;
  }

  body[data-view="chat"] .usage-summary-tabbar {
    display: none;
  }

  body[data-view="chat"] .play-actions-drawer .panel-actions .usage-summary-tools {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  body[data-view="chat"] .chat-panel {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    height: 100%;
    padding: 8px;
  }

  body[data-view="chat"] .chat-panel:has(.initialise-scene-form:not([hidden])),
  body[data-view="chat"] .chat-panel:has(.campaign-start-panel:not([hidden])) {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  }

  body[data-view="chat"] .chat-panel:has(.initialise-scene-form:not([hidden])):has(.campaign-start-panel:not([hidden])) {
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  }

  body[data-view="chat"] .chat-log {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  body[data-view="chat"] .story-form {
    margin-top: 6px;
    max-height: min(30dvh, 180px);
    min-height: 0;
    overflow: auto;
  }

  body[data-view="chat"] #story-message {
    min-height: 54px;
  }

  body[data-view="chat"] .story-mention-shell #story-message {
    min-height: 54px;
  }

  body[data-view="chat"] .story-mention-shell {
    grid-column: 1 / -1;
    min-height: 54px;
  }

  body[data-view="chat"] .story-form.single-response-target #story-message {
    min-height: 74px;
  }

  body[data-view="chat"] .story-form.single-response-target .story-mention-shell #story-message {
    min-height: 74px;
  }

  body[data-view="chat"] .story-form.single-response-target .story-mention-shell {
    min-height: 74px;
  }
}

@media (max-width: 1050px) {
  .cos-builder-workspace {
    grid-template-columns: 1fr;
  }

  .cos-ai-guide {
    height: auto;
    max-height: none;
    min-height: 0;
  }
}

@media (max-width: 700px) {
  .cos-section-heading {
    grid-template-columns: 1fr;
  }

  .cos-section-heading h4,
  .cos-section-heading > span,
  .cos-section-heading > strong {
    grid-column: 1;
    grid-row: auto;
  }

  .cos-section-heading > strong {
    justify-self: start;
    max-width: 100%;
    text-align: left;
  }

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

  .campaign-usage-panel {
    max-height: min(64dvh, 560px);
  }

  .app-header,
  main {
    width: calc(100% - 18px);
  }

  .inline-form,
  .form-row,
  .meta-grid,
  .stats-grid,
  .ability-grid,
  .portrait-candidate,
  .automation-summary-grid,
  .automation-stat-grid,
  .automation-metric-cards,
  .automation-two-col {
    grid-template-columns: 1fr;
  }

  .cos-setup-grid,
  .cos-assignment-grid,
  .cos-final-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cos-roll-table {
    overflow-x: auto;
  }

  .cos-roll-head,
  .cos-roll-row {
    min-width: 430px;
  }

  .cos-transfer-row {
    grid-template-columns: 1fr;
  }

  .cos-skills-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .cos-specialty-adder {
    grid-template-columns: 1fr;
  }

  .cos-recommendation-grid {
    grid-template-columns: 1fr;
  }

  .cos-skill-table {
    min-width: 620px;
  }

  .automation-metrics-panel .section-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .automation-metrics-panel .inline-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .automation-chart {
    min-width: 620px;
  }

  .sheet-render {
    border-inline: 0;
    box-shadow: none;
    order: 0;
    padding: 8px;
  }

  .sheet-layout.has-selected-sheet .sheet-render {
    order: -1;
  }

  .sheet-layout.has-selected-sheet .sheet-picker {
    order: 1;
  }

  .pf-sheet {
    gap: 10px;
  }

  .sheet-tabs {
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .sheet-tabs button {
    flex: 0 0 auto;
    font-size: 0.84rem;
    min-height: 30px;
    padding: 5px 9px;
  }

  .spell-prep-grid,
  .spellcasting-detail-grid,
  .spell-manual-add {
    grid-template-columns: 1fr;
  }

  .spellbook-spell-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .identity-block {
    gap: 8px;
    grid-template-columns: minmax(108px, 34vw) minmax(0, 1fr);
  }

  .identity-block > .stats-grid {
    grid-column: 1 / -1;
  }

  .portrait {
    min-height: 0;
  }

  .character-name {
    font-size: 1.85rem;
    line-height: 1;
    margin-bottom: 6px;
  }

  .meta-grid {
    gap: 6px;
    grid-template-columns: 1fr;
  }

  .field {
    padding: 6px 7px;
  }

  .field-detail-list {
    gap: 2px;
    font-size: 0.92rem;
  }

  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cos-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat,
  .ability,
  .resource-card {
    padding: 6px 7px;
  }

  .stat strong,
  .ability strong {
    font-size: 1.42rem;
    line-height: 1.05;
  }

  .ability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cos-derived-stat-grid {
    grid-template-columns: 1fr;
  }

  .meter {
    height: 9px;
  }

  .sheet-render h2 {
    font-size: 1.05rem;
    line-height: 1.15;
  }

  .sheet-attack-table,
  .sheet-skill-table,
  .sheet-named-item-table,
  .readonly-mechanics-table,
  .equipment-table {
    border-collapse: separate;
    border-spacing: 0 7px;
  }

  .sheet-attack-table tbody,
  .sheet-skill-table tbody,
  .sheet-named-item-table tbody,
  .readonly-mechanics-table tbody,
  .equipment-table tbody,
  .sheet-attack-table tr,
  .sheet-skill-table tr,
  .sheet-named-item-table tr,
  .readonly-mechanics-table tr,
  .equipment-table tr,
  .sheet-attack-table td,
  .sheet-skill-table td,
  .sheet-named-item-table td,
  .readonly-mechanics-table td,
  .equipment-table td {
    display: block;
  }

  .sheet-attack-table th,
  .sheet-skill-table th,
  .sheet-named-item-table th,
  .readonly-mechanics-table th,
  .equipment-table th {
    display: none;
  }

  .sheet-attack-table tr:has(th),
  .sheet-skill-table tr:has(th),
  .sheet-named-item-table tr:has(th),
  .readonly-mechanics-table tr:has(th),
  .equipment-table tr:has(th),
  .class-feature-table tr:has(th) {
    display: none;
  }

  .sheet-attack-table tr,
  .sheet-skill-table tr,
  .sheet-named-item-table tr,
  .readonly-mechanics-table tr,
  .equipment-table tr {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 7px;
  }

  .sheet-attack-table td,
  .sheet-skill-table td,
  .sheet-named-item-table td,
  .readonly-mechanics-table td,
  .equipment-table td {
    border: 0;
    overflow-wrap: anywhere;
    padding: 3px 0;
    width: auto !important;
  }

  .sheet-attack-table td::before,
  .sheet-skill-table td::before,
  .sheet-named-item-table td::before,
  .readonly-mechanics-table td::before,
  .equipment-table td::before {
    color: var(--muted);
    content: attr(data-label);
    display: block;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
    text-transform: uppercase;
  }

  .sheet-attack-table td:first-child,
  .sheet-skill-table td:first-child,
  .sheet-named-item-table td:first-child,
  .readonly-mechanics-table td:first-child,
  .equipment-table td:first-child {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
  }

  .sheet-attack-table td:first-child::before,
  .sheet-skill-table td:first-child::before,
  .sheet-named-item-table td:first-child::before,
  .readonly-mechanics-table td:first-child::before,
  .equipment-table td:first-child::before {
    display: none;
  }

  .sheet-attack-table td:nth-child(2),
  .sheet-attack-table td:nth-child(3),
  .sheet-skill-table td:nth-child(2),
  .sheet-skill-table td:nth-child(3),
  .sheet-skill-table td:nth-child(4),
  .sheet-skill-table td:nth-child(5) {
    display: inline-block;
    min-width: 4.5rem;
    padding-right: 10px;
    text-align: left;
    vertical-align: top;
  }

  .sheet-skill-table td:nth-child(6):empty {
    display: none;
  }

  .equipment-table td:nth-child(2),
  .equipment-table td:nth-child(3) {
    display: inline-block;
    min-width: 4.5rem;
    padding-right: 10px;
    text-align: left;
    vertical-align: top;
  }

  .equipment-table td:empty {
    display: none;
  }

  .class-feature-table,
  .class-feature-table tbody,
  .class-feature-table tr,
  .class-feature-table td {
    display: block;
  }

  .class-feature-table th {
    display: none;
  }

  .class-feature-table tr {
    border: 1px solid var(--line);
    margin-bottom: 7px;
    padding: 7px;
  }

  .class-feature-table td {
    border: 0;
    padding: 2px 0;
    width: auto !important;
  }

  .class-feature-table td:first-child {
    font-size: 0.98rem;
    margin-bottom: 3px;
  }

  .resource-grid,
  .lore-grid,
  .quest-manager .quest-list:not(.compact),
  .quest-add-form,
  .quest-add-form.compact,
  .quest-entry-head,
  .quest-notes-row,
  .lore-entry,
  .spellbook-spells {
    grid-template-columns: 1fr;
  }

  .quest-add-form textarea {
    grid-column: auto;
  }

  .quest-details summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .quest-summary-meta {
    grid-column: 2;
    justify-content: flex-start;
  }

  .resource-card-wide {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  body {
    background: var(--paper);
    font-size: 15px;
  }

  .cos-slot-meter,
  .power-cooldown-row {
    grid-template-columns: 1fr;
    min-width: 0;
    width: 100%;
  }

  .spellbook-level-header {
    align-items: stretch;
  }

  .power-cast-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .power-cast-controls > button,
  .power-cast-controls label,
  .power-cast-controls select {
    width: 100%;
  }

  .app-header,
  main {
    max-width: 100%;
    width: auto;
  }

  .app-header {
    align-items: center;
    display: grid;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0;
    padding-block: calc(4px + env(safe-area-inset-top, 0px)) 4px;
    padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
  }

  .app-header h1 {
    font-size: 1.05rem;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .eyebrow {
    display: none;
  }

  .session-controls {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-end;
    min-width: 0;
  }

  .session-pill {
    flex: 1 1 auto;
    font-size: 0.76rem;
    min-height: 28px;
    max-width: 42vw;
    min-width: 7rem;
    overflow: hidden;
    padding: 4px 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-menu {
    flex: 0 0 auto;
  }

  .desktop-session-actions {
    display: none;
  }

  .app-menu summary {
    border-radius: 5px;
    display: block;
    font-size: 0.76rem;
    min-height: 28px;
    padding: 4px 7px;
    white-space: nowrap;
  }

  .app-menu-actions {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: min(220px, calc(100dvw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    z-index: 70;
  }

  .app-menu:not([open]) .app-menu-actions {
    display: none;
  }

  .session-controls button,
  .app-menu-actions button {
    flex: 0 0 auto;
    font-size: 0.76rem;
    min-height: 28px;
    padding: 4px 7px;
  }

  .menu-campaign-control {
    align-items: stretch;
    display: grid;
    gap: 4px;
    font-size: 0.76rem;
  }

  .menu-campaign-control select {
    font-size: 0.8rem;
    min-height: 30px;
    padding: 4px 7px;
  }

  main {
    margin: 0;
    max-width: 100%;
    padding-inline: max(0px, env(safe-area-inset-left, 0px)) max(0px, env(safe-area-inset-right, 0px));
    width: auto;
  }

  body[data-auth-view="landing"] main,
  body[data-auth-view="campaign-choice"] main,
  body[data-auth-view="welcome"] main {
    padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px));
    padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
  }

  .landing-view,
  .campaign-choice-screen,
  .welcome-screen {
    gap: 14px;
    padding-block: 14px 22px;
  }

  .landing-copy,
  .campaign-choice-copy,
  .welcome-panel {
    max-width: 100%;
  }

  .landing-copy h2,
  .campaign-choice-copy h2,
  .welcome-panel h2 {
    font-size: clamp(1.95rem, 10.5vw, 2.75rem);
    line-height: 1.04;
  }

  .landing-lede,
  #welcome-copy {
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .landing-login-form,
  .campaign-choice-form {
    width: 100%;
  }

  .welcome-campaign-switcher {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .campaign-choice-screen .landing-montage,
  .welcome-screen .landing-montage {
    order: 3;
  }

  .landing-montage,
  .landing-montage.compact {
    gap: 7px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(48px, 16vw));
    min-height: 250px;
  }

  .landing-image-tile.tile-1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }

  .landing-image-tile.tile-2 {
    grid-column: 3 / span 2;
    grid-row: 1 / span 1;
  }

  .landing-image-tile.tile-3 {
    grid-column: 3 / span 2;
    grid-row: 2 / span 2;
  }

  .landing-image-tile.tile-4 {
    grid-column: 1 / span 2;
    grid-row: 3 / span 2;
  }

  .landing-image-tile.tile-5,
  .landing-image-tile.tile-6,
  .landing-image-tile.tile-7,
  .landing-image-tile.tile-8 {
    display: none;
  }

  body[data-view="chat"] {
    overflow: hidden;
  }

  body[data-view="chat"] main {
    height: calc(100dvh - 36px - env(safe-area-inset-top, 0px));
    overflow: hidden;
  }

  body[data-view="chat"] #app-view {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .mode-tabs {
    border-block: 1px solid var(--line);
    gap: 5px;
    margin: 0;
    overflow-x: auto;
    padding-block: 3px;
    padding-inline: max(6px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px));
    position: sticky;
    top: 0;
    z-index: 45;
  }

  .mode-tabs [data-view],
  .play-actions-drawer summary,
  .chat-perspectives button,
  .play-actions-drawer .panel-actions button {
    border-radius: 5px;
    font-size: 0.8rem;
    min-height: 28px;
    padding: 4px 7px;
    white-space: nowrap;
  }

  .dashboard-panel {
    border-radius: 0;
    margin: 0;
  }

  .dashboard-toolbar {
    justify-content: stretch;
    width: 100%;
  }

  .dashboard-player-control,
  .dashboard-player-control select,
  .dashboard-toolbar button {
    width: 100%;
  }

  .dashboard-list {
    grid-template-columns: 1fr;
  }

  .dashboard-card {
    border-radius: 6px;
    padding: 10px;
  }

  .dashboard-card-main {
    align-items: stretch;
  }

  .dashboard-card-actions .button-link {
    min-height: 32px;
    padding: 6px 10px;
  }

  .workspace {
    gap: 0;
    align-items: stretch;
    display: block;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .chat-column,
  .side-column {
    min-width: 0;
  }

  .chat-column {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .chat-panel {
    border-inline: 0;
    box-shadow: none;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    min-height: 0;
    height: 100%;
    padding: 6px;
    overflow: hidden;
  }

  .automation-summary-grid,
  .automation-stat-grid,
  .automation-two-col {
    grid-template-columns: 1fr;
  }

  .automation-campaign-card > summary,
  .automation-global-ops > summary {
    align-items: flex-start;
  }

  .automation-operation .inline-actions,
  .automation-card-body .inline-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .chat-panel:has(.initialise-scene-form:not([hidden])) {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }

  .panel-title {
    align-items: start;
    margin-bottom: 5px;
    position: relative;
  }

  .panel-title h2 {
    font-size: 1rem;
    line-height: 1.1;
  }

  .question-alert-button:not([hidden]) {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }

  .play-actions-drawer {
    margin-left: 0;
    min-width: 0;
    width: auto;
  }

  .play-actions-drawer summary {
    min-height: 28px;
    padding: 4px 7px;
  }

  .play-actions-drawer summary::-webkit-details-marker {
    display: none;
  }

  .play-actions-drawer summary::after {
    content: " +";
  }

  .play-actions-drawer[open] summary::after {
    content: " -";
  }

  .play-actions-drawer .panel-actions {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 6px;
    padding: 6px;
    right: 0;
    width: min(340px, calc(100dvw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }

  .play-actions-drawer .panel-actions .mobile-only-tool {
    display: inline-flex;
  }

  .play-actions-drawer .panel-actions .scene-image-focus {
    grid-column: 1 / -1;
  }

  .play-actions-drawer .panel-actions .scene-image-focus select {
    flex: 1;
    min-width: 0;
    width: 100%;
  }

  .scene-image-edit-fullscreen {
    grid-template-columns: 1fr;
  }

  .chat-tab-bar {
    align-items: stretch;
    gap: 4px;
    margin-bottom: 4px;
    padding: 3px;
    position: sticky;
    top: 41px;
  }

  .chat-perspectives {
    flex-wrap: nowrap;
    margin-inline: -2px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: thin;
  }

  .chat-perspectives button {
    flex: 0 0 auto;
    gap: 4px;
    max-width: 54vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chat-perspectives .tab-player-name {
    display: none;
  }

  .turn-marker {
    width: 0.55rem;
    height: 0.55rem;
  }

  .turn-status-panel {
    padding: 0;
  }

  .chapter-close-suggestion {
    flex-direction: column;
  }

  .chapter-close-suggestion button {
    width: 100%;
  }

  .turn-status-header {
    font-size: 0.78rem;
  }

  .turn-status-list {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .turn-status-item {
    flex: 0 0 auto;
    font-size: 0.78rem;
    padding: 3px 5px;
  }

  .speech-controls {
    display: none;
  }

  .chat-navigator {
    gap: 5px;
    grid-template-columns: 1fr;
    margin-bottom: 4px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 4px;
  }

  .chat-turn-nav {
    display: grid;
    gap: 4px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;
    overflow: hidden;
  }

  .chat-chapter-select {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .chat-turn-nav button,
  .chat-search-form button {
    min-height: 27px;
    padding: 3px 6px;
  }

  .chat-search-form {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    max-width: 100%;
    min-width: 0;
  }

  .chat-search-form input {
    min-width: 0;
  }

  .chat-search-form .muted {
    grid-column: 1 / -1;
    font-size: 0.76rem;
  }

  .chat-log {
    height: 44svh;
    height: 44dvh;
    max-height: 520px;
    min-height: 0;
    overflow: auto;
    padding: 6px;
  }

  .message {
    padding: 8px;
  }

  .message-meta {
    font-size: 0.7rem;
  }

  .message-content {
    font-size: 0.95rem;
    line-height: 1.28;
  }

  .story-form {
    background: var(--panel-bg);
    border-top: 1px solid var(--line);
    bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--keyboard-inset, 0px));
    gap: 3px;
    grid-template-areas:
      "target target"
      "message primary"
      "dm dm"
      "controls controls"
      "status status";
    grid-template-columns: minmax(0, 1fr) minmax(82px, 28%);
    margin: 0 -6px -6px;
    max-height: min(26svh, 190px);
    max-height: min(26dvh, 190px);
    overflow: auto;
    padding-block: 4px calc(8px + env(safe-area-inset-bottom, 0px));
    padding-inline: max(6px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px));
    position: sticky;
    z-index: 35;
  }

  .response-character-wrap {
    grid-area: target;
  }

  #story-message {
    grid-area: initial;
  }

  .story-mention-shell {
    grid-area: message;
    grid-column: auto;
  }

  .dm-packet-message {
    grid-area: dm;
    position: relative;
    z-index: 1;
  }

  .turn-response-controls {
    grid-area: controls;
  }

  .story-submit-row {
    grid-area: primary;
    position: relative;
    z-index: 50;
  }

  #story-status {
    grid-area: status;
  }

  .ooc-chat-log {
    max-height: 180px;
    min-height: 96px;
  }

  .ooc-chat-form {
    grid-template-columns: 1fr;
  }

  #story-message {
    min-height: 54px;
  }

  .story-mention-shell #story-message {
    min-height: 54px;
  }

  .story-mention-shell {
    min-height: 54px;
  }

  .story-form.single-response-target #story-message {
    min-height: 64px;
  }

  .story-form.single-response-target .story-mention-shell #story-message {
    min-height: 64px;
  }

  .story-form.single-response-target .story-mention-shell {
    min-height: 64px;
  }

  input,
  select,
  textarea {
    border-radius: 5px;
    padding: 7px 8px;
  }

  .response-character-wrap {
    gap: 3px;
    grid-template-columns: 1fr;
    font-size: 0.68rem;
  }

  .response-character-wrap select {
    font-size: 0.82rem;
    padding-block: 5px;
  }

  .dm-packet-message textarea {
    min-height: 32px;
  }

  .dm-packet-message {
    font-size: 0.68rem;
  }

  .dm-packet-message textarea:placeholder-shown {
    min-height: 28px;
  }

  .turn-response-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .turn-response-controls .response-target {
    font-size: 0.78rem;
    padding: 3px 6px;
  }

  .turn-response-controls .check {
    flex: 1 1 9rem;
  }

  .turn-response-controls .pass-until-control {
    flex: 1 1 100%;
    font-size: 0.68rem;
    gap: 4px;
    min-width: 0;
  }

  .turn-response-controls .pass-until-control input {
    flex-basis: 8rem;
    font-size: 0.82rem;
    min-width: 0;
    padding-block: 5px;
  }

  .turn-response-controls button,
  .story-submit-row button {
    min-height: 28px;
    padding: 4px 7px;
  }

  .story-submit-row {
    align-self: stretch;
    background: var(--panel-bg);
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr 1fr;
    min-width: 0;
    padding: 0;
    position: relative;
    z-index: 50;
  }

  .story-submit-row .check {
    display: none;
  }

  #confirm-current-actions,
  .story-submit-row button[type="submit"] {
    align-self: stretch;
    display: block;
    font-size: 0.8rem;
    height: 100%;
    min-height: 54px;
    padding-inline: 6px;
    white-space: normal;
  }

  .mobile-status-toast.show {
    align-items: start;
    bottom: calc(58px + var(--keyboard-inset, 0px) + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.keyboard-open .story-form {
    max-height: min(38dvh, 300px);
    padding-bottom: 8px;
  }

  body.keyboard-open #story-message {
    min-height: 78px;
  }

  body.keyboard-open .story-mention-shell #story-message {
    min-height: 78px;
  }

  body.keyboard-open .story-mention-shell {
    min-height: 78px;
  }

  body.keyboard-open .story-form.single-response-target #story-message {
    min-height: 104px;
  }

  body.keyboard-open .story-form.single-response-target .story-mention-shell #story-message {
    min-height: 104px;
  }

  body.keyboard-open .story-form.single-response-target .story-mention-shell {
    min-height: 104px;
  }

  body.keyboard-open .chat-panel.focus-panel .story-form {
    max-height: min(48dvh, 360px);
  }

  .chat-panel:has(#submit-selected-response) .story-submit-row button[type="submit"] {
    display: block;
  }

  .story-form.response-submitted .story-submit-row button[type="submit"],
  .story-form.response-passed .story-submit-row button[type="submit"],
  #submit-selected-response {
    display: none !important;
  }

  .story-form.response-submitted .story-submit-row,
  .story-form.response-passed .story-submit-row {
    display: none;
  }

  .story-form.response-submitted .turn-response-controls,
  .story-form.response-passed .turn-response-controls {
    align-self: stretch;
    display: grid;
    grid-area: primary;
    grid-template-columns: 1fr;
    min-width: 0;
    position: relative;
    z-index: 60;
  }

  .story-form.response-submitted .turn-response-controls .response-target,
  .story-form.response-submitted .turn-response-controls .check,
  .story-form.response-submitted #pass-response,
  .story-form.response-passed .turn-response-controls .response-target,
  .story-form.response-passed .turn-response-controls .check,
  .story-form.response-passed #pass-response {
    display: none;
  }

  .story-form.response-submitted #unsubmit-response,
  .story-form.response-passed #unsubmit-response {
    align-self: stretch;
    background: var(--accent);
    border-color: var(--accent);
    color: #071019;
    display: inline-flex;
    font-weight: 900;
    grid-area: primary;
    justify-content: center;
    min-height: 54px;
    opacity: 1;
    pointer-events: auto;
    position: relative;
    text-shadow: none;
    touch-action: manipulation;
    white-space: normal;
    width: 100%;
    z-index: 42;
    -webkit-tap-highlight-color: rgba(125, 195, 221, 0.32);
  }

  .story-form.response-submitted #unsubmit-response:not(:disabled),
  .story-form.response-passed #unsubmit-response:not(:disabled) {
    box-shadow: 0 0 0 1px rgba(188, 238, 255, 0.38), 0 8px 20px rgba(0, 0, 0, 0.24);
    color: #04131b;
  }

  .story-form.response-submitted #unsubmit-response:disabled,
  .story-form.response-passed #unsubmit-response:disabled {
    background: var(--control-bg);
    border-color: var(--line);
    color: var(--disabled-ink);
    opacity: 0.9;
    pointer-events: none;
  }

  .side-column {
    display: none;
  }

  .chat-panel.focus-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) minmax(185px, auto);
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px));
    padding-inline: max(6px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px));
  }

  .chat-panel.focus-panel:has(.initialise-scene-form:not([hidden])) {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) minmax(185px, auto);
  }

  .chat-panel.focus-panel .story-form {
    grid-template-rows: auto minmax(62px, auto) auto auto auto;
    max-height: 28dvh;
    overflow: auto;
  }

  .chat-panel.focus-panel #story-message {
    min-height: 64px;
  }

  .chat-panel.focus-panel .story-mention-shell #story-message {
    min-height: 64px;
  }

  .chat-panel.focus-panel .story-mention-shell {
    min-height: 64px;
  }

  .chat-panel.focus-panel .story-form.single-response-target #story-message {
    min-height: 86px;
  }

  .chat-panel.focus-panel .story-form.single-response-target .story-mention-shell #story-message {
    min-height: 86px;
  }

  .chat-panel.focus-panel .story-form.single-response-target .story-mention-shell {
    min-height: 86px;
  }
}

@media (max-width: 430px) {
  .mode-tabs [data-view] {
    font-size: 0.78rem;
    min-height: 28px;
    padding: 4px 6px;
  }

  .chat-panel {
    grid-template-rows: auto auto auto auto;
  }

  .chat-log {
    height: 46svh;
    height: 46dvh;
  }

  .panel-title h2 {
    font-size: 0.92rem;
  }

  .turn-response-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
  }

  .turn-response-controls .check {
    flex: 1 1 100%;
  }

  .story-submit-row {
    grid-template-columns: 1fr 1fr;
  }

  .chat-search-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .chat-search-form button[type="submit"] {
    grid-column: 2;
  }

  .chat-search-form .muted {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .cos-gender-choice {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .cos-assignment-grid {
    grid-template-columns: 1fr;
  }

  .cos-stat-priority ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cos-assignment-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .cos-race-assignment-label {
    white-space: normal;
  }

  .cos-choice-card {
    grid-template-columns: 1fr;
  }

  .cos-choice-image-frame {
    aspect-ratio: 16 / 11;
    justify-self: center;
    max-width: 402px;
    min-height: 0;
    width: 100%;
  }

  .cos-choice-stage {
    gap: 5px;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
  }

  .cos-carousel-arrow {
    font-size: 1.45rem;
    height: 30px;
    width: 30px;
  }

  .cos-choice-copy {
    padding: 13px;
  }

  .cos-choice-copy dl,
  .cos-ready-summary {
    grid-template-columns: 1fr;
  }

  .cos-choice-copy .cos-class-facts,
  .cos-class-choice-panels,
  .cos-class-pairings,
  .cos-order-suggestions,
  .cos-order-intents,
  .cos-pick-ledger,
  .cos-ability-grid {
    grid-template-columns: 1fr;
  }

  .cos-order-filters {
    grid-template-columns: 1fr 1fr;
  }

  .cos-order-filters input {
    grid-column: 1 / -1;
  }

  .cos-local-order > div {
    grid-template-columns: 1fr;
  }

  .cos-order-selected {
    align-items: start;
    flex-direction: column;
  }

  .cos-ability-class-banner {
    grid-template-columns: 1fr;
  }

  .cos-abilities-heading {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .cos-wizard-nav {
    grid-template-columns: auto auto;
  }

  .cos-wizard-nav > span {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .cos-wizard-steps {
    overflow-x: auto;
  }

  .cos-wizard-steps span,
  .cos-wizard-steps button {
    flex-basis: 82px;
    font-size: 0.68rem;
  }

  .cos-race-family-grid,
  .cos-final-review,
  .cos-budget-strip,
  .cos-equipment-packs,
  .cos-equipment-recommendations,
  .cos-portrait-work,
  .cos-inline-add,
  .cos-equipment-add {
    grid-template-columns: 1fr;
  }

  .cos-equipment-catalogue > div {
    grid-template-columns: 1fr;
  }

  .cos-race-family-card {
    grid-template-rows: minmax(240px, 42vh) auto;
  }

  .cos-class-filters {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .cos-class-filters button {
    flex: 0 0 108px;
  }

  .cos-combined-class-heading,
  .cos-combined-class-details {
    grid-template-columns: 1fr;
  }

  .cos-combined-class-heading strong {
    justify-self: start;
  }

  .cos-combined-class-summary dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cos-portrait-frame {
    grid-row: auto;
    margin-inline: auto;
    max-height: 58dvh;
    width: min(100%, 390px);
  }

  .cos-equipment-add input,
  .cos-inline-add input,
  .cos-inline-add select {
    width: 100%;
  }

  .cos-ai-guide {
    background: #202a25;
    border: 1px solid #6a9aad;
    bottom: 0;
    display: grid;
    grid-template-rows: 51px auto minmax(0, 1fr) auto auto;
    height: 72dvh;
    left: 0;
    max-height: 72dvh;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    right: 0;
    transform: translateY(calc(100% - 52px));
    transition: transform 180ms ease;
    z-index: 120;
  }

  .cos-ai-guide.mobile-open {
    transform: translateY(0);
  }

  .cos-ai-mobile-toggle {
    align-items: center;
    background: #26312c;
    border: 0;
    border-bottom: 1px solid #52645a;
    color: #fff9e9;
    display: flex;
    height: 51px;
    justify-content: space-between;
    padding: 0 14px;
    width: 100%;
  }

  .cos-ai-mobile-toggle span {
    color: #8ec5d5;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .cos-ai-mobile-toggle strong {
    font-size: 0.82rem;
  }

  .cos-ai-guide-heading,
  .cos-character-so-far,
  .cos-ai-composer {
    margin-inline: 12px;
  }

  .cos-ai-guide-heading {
    margin-top: 12px;
  }

  .cos-ai-conversation {
    max-height: none;
    min-height: 0;
    padding: 0 12px;
  }

  .cos-ai-composer {
    margin-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .cos-ai-composer textarea {
    min-height: 64px;
    max-height: 120px;
  }

  .cos-builder-main {
    padding-bottom: 56px;
  }

  .generation-chat.focus-panel .generation-header {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .generation-chat.focus-panel .generation-header-actions > :not([data-toggle-focus-panel]) {
    display: none;
  }

  .generation-chat.focus-panel .generation-header h2 {
    font-size: 1.05rem;
  }
}
.cos-age-choice {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(180px, 260px) 1fr;
  gap: 14px;
  align-items: stretch;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid #d6b85d;
  background: #202c27;
}

.cos-age-choice label {
  display: grid;
  gap: 5px;
}

.cos-age-choice label span,
.cos-age-choice strong {
  color: #f0cf72;
  font-size: 0.82rem;
  font-weight: 800;
}

.cos-age-actual {
  background: #16211d;
  border: 1px solid #718078;
  display: grid;
  gap: 5px;
  padding: 9px 12px;
}

.cos-age-actual span {
  color: #9fcfe6;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cos-age-actual strong {
  align-self: center;
  color: #fff9e9;
  font-size: 1.05rem;
}

.cos-age-choice input {
  width: 100%;
}

.cos-age-choice p {
  align-self: center;
  margin: 0;
  color: #d4ddd8;
}

@media (max-width: 760px) {
  .cos-age-choice {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}