:root {
  color-scheme: light;
  --ttd-ink: #1f2328;
  --ttd-muted: #667085;
  --ttd-border: #c8cdd4;
  --ttd-panel: #f6f7f8;
  --ttd-accent: #5a2333;
  --ttd-accent-dark: #35121d;
  --ttd-result: #f7f0dc;
  --ttd-sheet-max: 1000px;
  --ttd-roll-width: clamp(260px, 27vw, 360px);
}

/* Site-only compendium. These controls are not part of the Roll20 sheet. */
.ttd-compendium-dialog {
  position: fixed;
  inset: 58px 14px 14px auto;
  z-index: 1000;
  width: min(520px, calc(100vw - 28px));
  max-width: none;
  height: calc(100vh - 72px);
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #81715b;
  border-radius: 8px;
  background: #f6f0e6;
  color: #211d18;
  box-shadow: 0 16px 48px rgb(0 0 0 / 35%);
}

.ttd-compendium-shell {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100%;
}

.ttd-compendium-header {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
  padding: 14px 16px;
  background: #30281f;
  color: #fff;
}

.ttd-compendium-header h1 {
  margin: 0;
  font-size: 20px;
}

.ttd-compendium-header p {
  margin: 3px 0 0;
  color: #e8dece;
  font-size: 13px;
}

.ttd-compendium-header button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #c8b79d;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: 25px;
  line-height: 1;
}

.ttd-compendium-filters {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, .65fr) minmax(92px, .4fr);
  gap: 8px;
  padding: 12px 14px 8px;
}

.ttd-compendium-filters label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #554a3d;
  font-size: 12px;
  font-weight: 700;
}

.ttd-compendium-filters [hidden] {
  display: none !important;
}

.ttd-compendium-filters input,
.ttd-compendium-filters select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 34px;
}

.ttd-compendium-summary {
  padding: 2px 14px 9px;
  color: #655a4c;
  font-size: 12px;
}

.ttd-compendium-results {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 0 12px 14px;
  overflow: auto;
}

.ttd-compendium-card {
  padding: 10px;
  border: 1px solid #c9bda9;
  border-radius: 6px;
  background: #fff;
  cursor: grab;
}

.ttd-compendium-card:active {
  cursor: grabbing;
}

.ttd-compendium-card h2 {
  margin: 0;
  color: #30281f;
  font-size: 16px;
}

.ttd-compendium-meta {
  margin: 3px 0 6px;
  color: #6b5d4b;
  font-size: 12px;
}

.ttd-compendium-card details {
  margin: 6px 0;
}

.ttd-compendium-card summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.ttd-compendium-description {
  max-height: 180px;
  margin: 6px 0;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.35;
}

.ttd-compendium-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.ttd-compendium-card-actions select {
  min-width: 120px;
  height: 30px;
}

.ttd-compendium-card-actions button,
.ui-dialog .charsheet .ttd-compendium-choose,
.ui-dialog .charsheet .ttd-compendium-static-choose {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #75634d;
  border-radius: 4px;
  background: #4c3d2c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.ui-dialog .charsheet .ttd-species-choose {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 3px;
  border-radius: 3px;
  font: inherit;
  line-height: 1.2;
}

.ui-dialog .charsheet .ttd-compendium-static-choose {
  width: auto;
  min-width: 52px;
  margin-left: 4px;
}

.ui-dialog .charsheet .ttd-row-actions .ttd-compendium-choose {
  width: auto;
  min-width: 52px;
}

.ui-dialog .charsheet .ttd-compendium-drop-target {
  outline: 3px solid #2d77c7;
  outline-offset: 2px;
  background-color: rgb(45 119 199 / 10%);
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1024px) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) {
  .ttd-compendium-dialog {
    inset: 54px 6px 6px;
    width: auto;
    height: calc(100vh - 60px);
  }

  .ttd-compendium-filters {
    grid-template-columns: 1fr 1fr;
  }

  .ttd-compendium-filters label:first-child {
    grid-column: 1 / -1;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #fff;
  color: var(--ttd-ink);
  font-family: Arial, Helvetica, sans-serif;
}

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

.ttd-app-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 8px 12px;
  color: #fff;
  background: var(--ttd-accent-dark);
  border-bottom: 2px solid #13070b;
}

.ttd-app-title { display: grid; gap: 2px; }
.ttd-app-title strong { font-size: 16px; }
#save-status { color: #e5d9dd; font-size: 12px; }

.ttd-app-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ttd-app-actions button,
.ttd-roll-heading button,
.ttd-repeating-add,
.ttd-repeating-remove {
  min-height: 30px;
  padding: 5px 10px;
  color: var(--ttd-ink);
  background: #fff;
  border: 1px solid var(--ttd-border);
  border-radius: 4px;
  cursor: pointer;
}

.ttd-workspace {
  display: grid;
  grid-template-columns: minmax(0, var(--ttd-sheet-max)) var(--ttd-roll-width);
  align-items: start;
  justify-content: center;
  gap: 12px;
  padding: 12px;
}

#sheet-host {
  width: 100%;
  max-width: var(--ttd-sheet-max);
  min-width: 0;
  min-height: 700px;
  margin: 0;
  container-type: inline-size;
}

/*
 * Roll20 normally supplies an 800px sheet viewport and its own icon font.
 * The standalone sheet instead lets its container establish the available
 * width, then constrains the imported layouts to that width.
 */
.ui-dialog .charsheet,
.ui-dialog .charsheet > div,
.ui-dialog .charsheet .sheet-main,
.ui-dialog .charsheet .sheet-bio,
.ui-dialog .charsheet .sheet-skills,
.ui-dialog .charsheet .sheet-gear,
.ui-dialog .charsheet .sheet-definitions,
.ui-dialog .charsheet .sheet-abilities,
.ui-dialog .charsheet .sheet-spells,
.ui-dialog .charsheet .sheet-accessories,
.ui-dialog .charsheet .sheet-inventory,
.ui-dialog .charsheet .sheet-profitloss,
.ui-dialog .charsheet .sheet-settings,
.ui-dialog .charsheet .character-info-block,
.ui-dialog .charsheet .attribute-block,
.ui-dialog .charsheet .saving-throw-block,
.ui-dialog .charsheet .hp-armor-block,
.ui-dialog .charsheet .vitals-resistances-block,
.ui-dialog .charsheet .vitals-resistances-content,
.ui-dialog .charsheet .SkillsPage,
.ui-dialog .charsheet .accessories-grid,
.ui-dialog .charsheet .inventory-grid,
.ui-dialog .charsheet .settings-grid {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
}

.ui-dialog .charsheet .SAbutton {
  display: flex;
  align-items: end;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  padding: 4px 8px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.ui-dialog .charsheet .SAbutton button {
  flex: 1 1 auto;
  width: auto !important;
  min-width: max-content;
  padding-inline: clamp(4px, 0.7vw, 8px);
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 20px;
  white-space: nowrap;
}

.ui-dialog .charsheet .SAbutton .sheet-tab-button-settings {
  flex: 0 0 30px;
  width: 30px !important;
  min-width: 30px;
  margin-right: 0;
  padding-inline: 4px;
  overflow: hidden;
}

.ui-dialog .charsheet .SAbutton .sheet-tab-button-settings::after {
  right: 0;
  width: 6px;
}

.ui-dialog .charsheet input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ui-dialog .charsheet select,
.ui-dialog .charsheet textarea {
  max-width: 100%;
  min-width: 0;
}

/* Roll20 normally gives unclassified number fields a compact control width. */
.ui-dialog .charsheet input[type="number"] {
  width: 52px;
}

.ui-dialog .charsheet fieldset[class*="repeating_"] {
  width: 100%;
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ui-dialog .charsheet .ggrid > *,
.ui-dialog .charsheet .ggridc > *,
.ui-dialog .charsheet .character-info-block > *,
.ui-dialog .charsheet .settings-grid > *,
.ui-dialog .charsheet .settings-row > * {
  min-width: 0;
}

.ui-dialog .charsheet .character-info-block input,
.ui-dialog .charsheet .character-info-block select,
.ui-dialog .charsheet .sheet-definitions input:not([type="checkbox"]):not([type="hidden"]),
.ui-dialog .charsheet .sheet-definitions select,
.ui-dialog .charsheet .sheet-settings input:not([type="checkbox"]):not([type="hidden"]) {
  width: 100% !important;
}

.ui-dialog .charsheet .character-info-block {
  column-gap: 3px;
}

.ui-dialog .charsheet .sheet-main {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-dialog .charsheet .sheet-main > .main-left,
.ui-dialog .charsheet .sheet-main > .main-right {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.ui-dialog .charsheet .attribute-block input,
.ui-dialog .charsheet .saving-throw-block input,
.ui-dialog .charsheet .main-left > .ggrid input,
.ui-dialog .charsheet .hp-armor-block input {
  width: min(100%, 52px);
  min-width: 0;
  box-sizing: border-box;
}

.ui-dialog .charsheet .attribute-block {
  grid-template-columns: minmax(112px, 1.6fr) repeat(6, minmax(44px, 1fr)) 28px;
}

.ui-dialog .charsheet .attribute-block > div > div,
.ui-dialog .charsheet .saving-throw-block > div > div,
.ui-dialog .charsheet .main-left > .ggrid > div > div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  height: auto;
  padding: 1px;
  line-height: 1.05;
}

.ui-dialog .charsheet .attribute-block .titleblock_stat,
.ui-dialog .charsheet .saving-throw-block > div > div:first-child,
.ui-dialog .charsheet .main-left > .ggrid > div > div:first-child {
  font-size: 11px;
}

.ui-dialog .charsheet .attribute-block input,
.ui-dialog .charsheet .saving-throw-block input,
.ui-dialog .charsheet .main-left > .ggrid input {
  justify-self: center;
  height: 18px;
  padding-block: 0;
}

.ui-dialog .charsheet .attribute-block input[type="text"] {
  width: min(100%, 52px);
}

.ui-dialog .charsheet .attribute-block button[type="roll"],
.ui-dialog .charsheet .saving-throw-block button[type="roll"],
.ui-dialog .charsheet .main-left > .ggrid button[type="roll"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.ui-dialog .charsheet .saving-throw-block {
  grid-template-columns: minmax(78px, 1.35fr) repeat(6, minmax(42px, 1fr)) 44px;
}

.ui-dialog .charsheet .main-left > .ggrid {
  width: 100%;
  grid-template-columns: minmax(132px, 1.8fr) repeat(4, minmax(48px, 1fr)) 28px;
}

.ui-dialog .charsheet .main-left > .ggrid > .grc1 {
  font-size: 12px;
}

.ui-dialog .charsheet .hp-column,
.ui-dialog .charsheet .ac-column {
  grid-template-columns: minmax(104px, 1fr) minmax(58px, 80px);
}

.ui-dialog .charsheet #hp-inputs > div,
.ui-dialog .charsheet #ac-inputs > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-dialog .charsheet .sheet-abilities > .ggrid > .grr2.ggrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  background: transparent !important;
}

.ui-dialog .charsheet .sheet-abilities > .ggrid > .grr2.ggrid > div {
  display: grid;
  grid-template-rows: minmax(38px, auto) 36px;
  align-items: stretch;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0;
  padding: 8px;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line);
  border-radius: 9px;
  text-align: center;
}

.ui-dialog .charsheet .sheet-abilities > .ggrid > .grr2.ggrid
  > div > div:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--sheet-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}

.ui-dialog .charsheet .sheet-abilities > .ggrid > .grr2.ggrid input[type="number"] {
  box-sizing: border-box;
  width: min(100%, 96px) !important;
  height: 36px;
  margin: 0;
  padding: 4px 6px;
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line) !important;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 520px) {
  .ui-dialog .charsheet .sheet-abilities > .ggrid > .grr2.ggrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-dialog .charsheet .sheet-abilities > .ggrid > .grr2.ggrid
    > .ttd-mobile-fold-toggle {
    grid-column: 1 / -1 !important;
  }

  .ui-dialog .charsheet .sheet-abilities > .ggrid > .grr2.ggrid
    > :is(.grc1, .grc2, .grc3, .grc4) {
    grid-column: auto !important;
  }
}

.ui-dialog .charsheet .sheet-definitions > .ggrid {
  grid-template-columns: minmax(0, 1fr);
}

.ui-dialog .charsheet .sheet-definitions .progression-summary {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.ui-dialog .charsheet .sheet-definitions .definition-sections {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-dialog .charsheet .sheet-definitions .progression-summary > div {
  overflow-wrap: anywhere;
  font-size: clamp(9px, 0.8vw, 12px);
}

.ui-dialog .charsheet .sheet-definitions .prebuilt-progression-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(170px, 0.7fr) minmax(230px, 1fr) minmax(310px, 1.35fr);
  align-items: center;
  gap: 9px;
  padding: 9px;
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-text) !important;
  border-bottom-color: var(--sheet-line);
}

.ui-dialog .charsheet .sheet-definitions .prebuilt-progression-title {
  font-size: 12px;
}

.ui-dialog .charsheet .sheet-definitions .progression-mode-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 34px;
  min-width: 170px;
  padding: 0 9px;
  background: var(--sheet-surface);
  border: 1px solid var(--sheet-line);
  border-radius: 8px;
}

.ui-dialog .charsheet .sheet-definitions .progression-mode-picker select {
  width: 100% !important;
  min-width: 0;
}

.ui-dialog .charsheet .sheet-definitions .prebuilt-progression-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 210px;
}

.ui-dialog .charsheet .sheet-definitions .prebuilt-progression-help {
  color: var(--sheet-muted);
}

/* The embedded sheet can be tablet-width even when the browser is still in
   the desktop site shell. Reflow the progression/skill summary before its
   eight legacy grid positions become too narrow. */
@container (max-width: 820px) {
  .ui-dialog .charsheet .sheet-definitions .progression-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .ui-dialog .charsheet .sheet-definitions .progression-summary
    > :is(.grc1, .grc2, .grc3, .grc4, .grc5, .grc6, .grc7, .grc8) {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
  }

  .ui-dialog .charsheet .sheet-definitions .prebuilt-progression-controls {
    grid-template-columns: minmax(170px, 0.8fr) minmax(210px, 1fr);
  }

  .ui-dialog .charsheet .sheet-definitions .prebuilt-progression-title {
    grid-column: 1 / -1;
  }

  .ui-dialog .charsheet .sheet-definitions .prebuilt-progression-help {
    grid-column: 1 / -1;
  }
}

@container (max-width: 520px) {
  .ui-dialog .charsheet .sheet-definitions .prebuilt-progression-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-dialog .charsheet .sheet-definitions .prebuilt-progression-picker,
  .ui-dialog .charsheet .sheet-definitions .prebuilt-progression-help {
    grid-column: 1 / -1;
  }
}

.ui-dialog .charsheet .sheet-accessories .accessories-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-dialog .charsheet .sheet-accessories .Column1,
.ui-dialog .charsheet .sheet-accessories .Column2 {
  min-width: 0;
}

.ui-dialog .charsheet .sheet-accessories .accessories-grid input[type="text"] {
  width: min(100%, 240px);
}

.ui-dialog .charsheet .sheet-spells .gridarea {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  align-content: start;
}

.ui-dialog .charsheet .sheet-spells .Column1,
.ui-dialog .charsheet .sheet-spells .Column2,
.ui-dialog .charsheet .sheet-spells .Spell-Level,
.ui-dialog .charsheet .sheet-spells .sheet-repeating-fields,
.ui-dialog .charsheet .sheet-spells .minimizable-repeat-spells,
.ui-dialog .charsheet .sheet-spells .spelltitle,
.ui-dialog .charsheet .sheet-spells .spells_description {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
}

.ui-dialog .charsheet .sheet-spells .Spell-Level,
.ui-dialog .charsheet .sheet-spells .spelltitle,
.ui-dialog .charsheet .sheet-spells .spells_description {
  box-sizing: border-box;
}

.ui-dialog .charsheet .sheet-spells .Spell-Level {
  overflow: hidden;
  border-color: #323232;
  border-top: 0;
}

.ui-dialog .charsheet .sheet-spells .Spell-Level > .sheet-repeating-fields {
  background: #000;
}

.ui-dialog .charsheet .sheet-spells .gridarea > .titleblock {
  padding: 4px 8px 6px;
}

.ui-dialog .charsheet .sheet-spells .gridarea > .titleblock h3 {
  margin: 0 0 3px;
}

.ui-dialog .charsheet .sheet-spells .spellcasting-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  background: transparent !important;
}

.ui-dialog .charsheet .sheet-spells .spellcasting-summary label {
  display: grid;
  grid-template-rows: minmax(26px, auto) 34px;
  align-content: stretch;
  gap: 5px;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 7px;
  background: var(--sheet-surface) !important;
  border: 1px solid var(--sheet-line);
  border-radius: 8px;
  color: var(--sheet-text) !important;
  line-height: 1.15;
}

.ui-dialog .charsheet .sheet-spells .spellcasting-summary label > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--sheet-muted) !important;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.ui-dialog .charsheet .sheet-spells .spellcasting-summary .spellcasting-pma {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 120px);
  grid-template-rows: minmax(36px, auto);
  align-items: center;
  max-width: 430px;
  width: 100%;
  justify-self: center;
}

.ui-dialog .charsheet .sheet-spells .spellcasting-summary
  :is(input[type="number"], select) {
  box-sizing: border-box;
  width: min(100%, 110px) !important;
  min-width: 0;
  height: 34px !important;
  min-height: 34px;
  margin: 0 !important;
  padding: 4px 6px !important;
  justify-self: center;
  font-size: 14px;
  text-align: center;
}

.ui-dialog .charsheet .sheet-spells .spellcasting-summary .spellcasting-pma select {
  width: 100% !important;
}

.ui-dialog .charsheet .sheet-spells .gridarea > .titleblock input[type="number"] {
  width: 52px;
  height: 18px;
  margin: 1px 4px;
  padding: 0;
}

.ui-dialog .charsheet .sheet-spells .gridarea > .titleblock .fixed-select {
  width: 60px;
}

.ui-dialog .charsheet .sheet-spells .ttd-repeating-row {
  width: 100%;
  padding: 2px 24px 4px 2px;
}

.ui-dialog .charsheet .sheet-spells .spells_description > * {
  min-width: 0;
}

.ui-dialog .charsheet .sheet-gear > .grr3.ggrid,
.ui-dialog .charsheet .sheet-gear > .grr4.ggrid {
  grid-template-columns: minmax(150px, 1.6fr) repeat(5, minmax(68px, 1fr));
  align-items: stretch;
}

.ui-dialog .charsheet .sheet-gear > .grr5.ggrid {
  grid-template-columns: minmax(150px, 1.6fr) repeat(3, minmax(68px, 1fr)) minmax(150px, 1.6fr);
  align-items: stretch;
}

.ui-dialog .charsheet .sheet-gear > .grr3.ggrid > div,
.ui-dialog .charsheet .sheet-gear > .grr4.ggrid > div,
.ui-dialog .charsheet .sheet-gear > .grr5.ggrid > div {
  display: grid;
  grid-template-rows: minmax(30px, auto) 22px;
  align-items: center;
  justify-items: center;
  min-width: 0;
  padding: 3px;
  border-bottom: 1px solid #c8c8c8;
  line-height: 1.05;
}

.ui-dialog .charsheet .sheet-gear > .grr3.ggrid input[type="number"],
.ui-dialog .charsheet .sheet-gear > .grr4.ggrid input[type="number"],
.ui-dialog .charsheet .sheet-gear > .grr5.ggrid input[type="number"] {
  width: 52px;
  height: 18px;
  padding: 0;
}

.ui-dialog .charsheet .sheet-gear > .grr3.ggrid .flex-bordered-input,
.ui-dialog .charsheet .sheet-gear > .grr4.ggrid .flex-bordered-input,
.ui-dialog .charsheet .sheet-gear > .grr5.ggrid .flex-bordered-input,
.ui-dialog .charsheet .sheet-gear > .grr5.ggrid textarea {
  width: calc(100% - 8px);
  max-width: 190px;
  height: 20px;
  min-height: 20px;
  margin: 0;
}

.ui-dialog .charsheet .SkillsPage {
  overflow-x: auto;
  overflow-y: hidden;
}

.ui-dialog .charsheet .SkillsPage table {
  width: 100%;
  min-width: 560px;
  table-layout: fixed;
}

.ui-dialog .charsheet .SkillsPage th { width: auto; }

.ui-dialog .charsheet .SkillsPage .skill-col-trained { width: 69px; }
.ui-dialog .charsheet .SkillsPage .skill-col-name { width: auto; }
.ui-dialog .charsheet .SkillsPage .skill-col-untrained { width: 121px; }
.ui-dialog .charsheet .SkillsPage .skill-col-key { width: 42px; }
.ui-dialog .charsheet .SkillsPage .skill-col-roll { width: 34px; }
.ui-dialog .charsheet .SkillsPage .skill-col-total { width: 50px; }
.ui-dialog .charsheet .SkillsPage .skill-col-attribute { width: 69px; }
.ui-dialog .charsheet .SkillsPage .skill-col-points { width: 62px; }
.ui-dialog .charsheet .SkillsPage .skill-col-misc { width: 50px; }

.ui-dialog .charsheet .SkillsPage .skill-desc td:nth-child(1),
.ui-dialog .charsheet .SkillsPage .skill-desc td:nth-child(3),
.ui-dialog .charsheet .SkillsPage .skill-desc td:nth-child(7) {
  padding-inline: 1px;
  white-space: nowrap;
}

.ui-dialog .charsheet .SkillsPage td:nth-child(5) { padding-inline: 0; }

.ui-dialog .charsheet .SkillsPage input[type="number"] {
  width: 4ch;
  max-width: 100%;
  height: 18px;
  padding-inline: 2px;
}

.ui-dialog #sheet-host .sheet-skills .SkillsPage :is(
  [name="attr_remaining_skill_points"],
  [name="attr_total_possible_skill_points"]
) {
  width: 6ch !important;
  min-width: 6ch;
}

.ui-dialog .charsheet .SkillsPage button[type="roll"],
.ui-dialog .charsheet .SkillsPage button[type="compendium"] {
  float: none;
  width: 18px;
  height: 18px;
}

.ui-dialog .charsheet .bag-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 clamp(3px, 1vw, 14px);
  justify-content: stretch;
}

.ui-dialog .charsheet .bag-grid input:not([type="checkbox"]),
.ui-dialog .charsheet .bag-grid select,
.ui-dialog .charsheet .bag-grid textarea,
.ui-dialog .charsheet .bag-grid .location input[type="text"] {
  width: 100% !important;
}

.ui-dialog .charsheet .settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  box-sizing: border-box;
  width: 100% !important;
  padding: 10px;
}

.ui-dialog .charsheet .settings-row {
  grid-template-columns: minmax(0, 1fr) minmax(72px, 100px);
  min-height: 44px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sheet-line);
  border-radius: 8px;
}

.ui-dialog .charsheet .ttd-disclosure {
  width: 18px !important;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0 3px 0 0;
  border: 1px solid #777;
  border-radius: 3px;
  box-shadow: none;
  font-size: 0;
  line-height: 16px;
}

.ui-dialog .charsheet .ttd-disclosure::before {
  content: "▾";
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 140ms ease;
}

/* Roll20's source stylesheet also draws a text "v" in ::after. The browser
   sheet uses the directional chevron above, so suppress the duplicate glyph. */
.ui-dialog .charsheet .ttd-disclosure::after {
  content: none !important;
  display: none !important;
}

.ui-dialog .charsheet .Spell-Level:has(> .sptoggle[value="0"]) > .Spell-Level-Name .ttd-disclosure::before,
.ui-dialog .charsheet .minimizable-repeat-spells:has(> .spells-toggle[value="1"]) > .spelltitle .ttd-disclosure::before,
.ui-dialog .charsheet .Advanced:has(> .spells-advanced-toggle[value="1"]) > .row-header .ttd-disclosure::before,
.ui-dialog .charsheet .midline-right-div:has(> .ability-toggle[value="0"]) .ability-title-row > .ttd-disclosure::before,
.ui-dialog .charsheet .ttd-repeating-row:has(> .feats-toggle[value="0"]) .feat-title-row > .ttd-disclosure::before,
.ui-dialog .charsheet .ttd-repeating-row:has(> .dta-toggle[value="1"]) .ttd-disclosure::before,
.ui-dialog .charsheet .weapon-repeat-box:has(> .weapon-toggle[value="0"]) > .weapon-column-span .ttd-disclosure::before,
.ui-dialog .charsheet .weapon-advanced:has(> .advancedweapon-toggle[value="0"]) > .weapon-advanced-header .ttd-disclosure::before,
.ui-dialog .charsheet .gear-item-card:has(> .gear-item-toggle[value="1"]) > .gear-item-summary .ttd-disclosure::before,
.ui-dialog .charsheet .inventory-item-row:has(> .inventory-item-toggle[value="1"]) > .inventory-item-summary .ttd-disclosure::before,
.ui-dialog .charsheet .crafting-materials:has(> .crafting-materials-toggle[value="1"]) > .crafting-materials-header .ttd-disclosure::before,
.ui-dialog .charsheet .character-importer:has(> .character-import-toggle[value="1"]) > .character-import-header .ttd-disclosure::before {
  transform: rotate(-90deg);
}

/* Self-contained d20 mark for the browser version of Roll20 roll controls. */
.ui-dialog .charsheet button[type="roll"]::before,
.ui-dialog .charsheet .CRP_Button::before {
  content: "" !important;
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("d20.svg") center / contain no-repeat;
  mask: url("d20.svg") center / contain no-repeat;
  vertical-align: -1px;
}

.ui-dialog .charsheet .CRP_Button {
  font-size: 0;
}

#roll-panel {
  position: sticky;
  top: 66px;
  max-height: calc(100vh - 78px);
  overflow: auto;
  background: var(--ttd-panel);
  border: 1px solid var(--ttd-border);
  border-radius: 6px;
}

.ttd-roll-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  color: #fff;
  background: var(--ttd-accent);
}

.ttd-roll-heading h1 { margin: 0; font-size: 16px; }
.ttd-roll-heading button { min-height: 26px; padding: 2px 8px; }
.ttd-parser-tools {
  margin: 10px 10px 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--ttd-border);
  border-radius: 8px;
}

.ttd-parser-tools summary {
  padding: 7px 9px;
  color: var(--ttd-accent-dark);
  font-weight: 750;
  cursor: pointer;
}

.ttd-parser-tool-list {
  display: grid;
  gap: 8px;
  padding: 0 8px 8px;
}

.ttd-parser-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  background: #f7f8fa;
  border: 1px solid #d7dde7;
  border-radius: 6px;
}

.ttd-parser-tool > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ttd-parser-tool small {
  color: var(--ttd-muted);
  line-height: 1.3;
}

.ttd-parser-tool button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 5px 9px;
  color: #ffffff;
  background: var(--ttd-accent);
  border: 1px solid var(--ttd-accent-dark);
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

.ttd-parser-tool button:hover,
.ttd-parser-tool button:focus-visible {
  background: var(--ttd-accent-dark);
}

#roll-output {
  display: grid;
  grid-auto-rows: max-content;
  gap: 8px;
  padding: 8px;
}
.ttd-roll-empty { margin: 8px; color: var(--ttd-muted); text-align: center; }

#roll-output .sheet-rolltemplate-custom {
  width: 100%;
  margin-left: 0;
  font-size: 13px;
}

#roll-output .sheet-rolltemplate-custom .sheet-container {
  width: 100%;
  min-width: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}

#roll-output .sheet-rolltemplate-custom .sheet-content {
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
}

#roll-output .sheet-rolltemplate-custom .sheet-value,
#roll-output .sheet-rolltemplate-custom .sheet-desc {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

#roll-output .inlinerollresult {
  display: inline-block;
  min-width: 28px;
  padding: 1px 4px;
  border: 1px solid #d2bb79;
  border-radius: 4px;
  background: var(--ttd-result);
  color: #000;
  font-weight: 700;
  text-align: center;
}

#roll-output .inlinerollresult.fullcrit { border: 2px solid #3fae5a; }
#roll-output .inlinerollresult.fullfail { border: 2px solid #d14a4a; }
#roll-output .inlinerollresult.importantroll { border: 2px solid #4a90d9; }

#roll-output .sheet-rolltemplate-room .sheet-room-container {
  overflow: hidden;
  border: 1px solid #111;
  border-radius: 8px;
  background: #fff;
}

#roll-output .sheet-rolltemplate-room .sheet-room-header {
  padding: 7px 9px;
  background: #000;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

#roll-output .sheet-rolltemplate-room .sheet-room-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid #d0d0d0;
}

#roll-output .sheet-rolltemplate-room .sheet-room-row > span:first-child { font-weight: 700; }
#roll-output .sheet-rolltemplate-room .sheet-room-row > span:last-child { text-align: right; }
#roll-output .sheet-rolltemplate-room .sheet-room-notes { padding: 8px; border-top: 1px solid #d0d0d0; white-space: pre-wrap; }

.ttd-roll-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #aab0b7;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

.ttd-roll-card header { padding: 8px 10px; color: #fff; background: var(--ttd-accent-dark); }
.ttd-roll-card h2 { margin: 0; font-size: 15px; }
.ttd-roll-card header p { margin: 2px 0 0; color: #eadde1; font-size: 12px; }
.ttd-roll-card dl { display: grid; grid-template-columns: minmax(90px, auto) 1fr; margin: 0; }
.ttd-roll-card dt,
.ttd-roll-card dd { margin: 0; padding: 7px 8px; border-top: 1px solid #e1e4e8; }
.ttd-roll-card dt { font-weight: 700; background: #f3f4f5; }
.ttd-roll-card dd { overflow-wrap: anywhere; }
.ttd-roll-total { display: inline-block; min-width: 30px; padding: 2px 5px; text-align: center; font-weight: 700; background: var(--ttd-result); border: 1px solid #d2bb79; border-radius: 3px; }
.ttd-roll-detail { display: block; margin-top: 2px; color: var(--ttd-muted); font-size: 11px; }
.ttd-roll-description { padding: 8px 10px; white-space: pre-wrap; }
.ttd-roll-action { margin: 2px; padding: 3px 6px; color: #fff; background: var(--ttd-accent); border: 0; border-radius: 3px; cursor: pointer; }

.ttd-attribute-results {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  padding: 10px;
}

.ttd-attribute-results strong {
  padding: 7px 3px;
  color: var(--ttd-accent-dark);
  background: var(--ttd-result);
  border: 1px solid #d2bb79;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
}

.ttd-attribute-details {
  margin: 0;
  padding: 0 10px 10px 34px;
  color: var(--ttd-muted);
  font-size: 11px;
}

.ttd-attribute-details li {
  padding: 1px 0;
}

.ttd-single-attribute-result {
  grid-template-columns: minmax(72px, 120px);
}

.ttd-individual-attribute-detail {
  margin: 0;
  padding: 0 10px 10px;
  color: var(--ttd-muted);
  font-size: 11px;
}

.ttd-repeating-controls { display: flex; justify-content: flex-end; min-height: 0; margin: 2px 3px 4px; }
.ttd-repeating-add {
  min-height: 22px;
  padding: 1px 7px;
  color: #fff;
  background: var(--ttd-accent);
  font-size: 12px;
  line-height: 18px;
}
.ttd-repeating-row { position: relative; margin-bottom: 6px; padding: 3px; border: 1px dashed transparent; }
.ttd-repeating-row:hover { border-color: #b8bdc5; }
.ttd-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  width: 100%;
  min-height: 20px;
  margin: 3px 0 0;
}
.ttd-repeating-move,
.ttd-repeating-remove { position: static; z-index: 5; min-width: 22px; min-height: 20px; padding: 0 5px; line-height: 18px; }
.ttd-repeating-move { color: #111; background: #f0f0f0; }
.ttd-repeating-remove { color: #fff; background: #8c2637; }

.ttd-error { margin: 8px 0; padding: 8px; color: #7a1424; background: #fff0f2; border: 1px solid #d7a2ab; border-radius: 4px; }

@media (max-width: 1120px) {
  .ttd-workspace { grid-template-columns: minmax(0, 1fr); }
  #roll-panel { position: relative; top: auto; width: 100%; max-height: none; }
}

@media (max-width: 860px) {
  .ttd-app-bar { position: relative; align-items: flex-start; flex-direction: column; }
  .ttd-app-actions { justify-content: flex-start; }

  .ui-dialog .charsheet .SAbutton button {
    flex: 0 0 auto;
    font-size: 11px;
  }

  .ui-dialog .charsheet .character-info-block {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ui-dialog .charsheet #player-name,
  .ui-dialog .charsheet #age-and-height,
  .ui-dialog .charsheet #weight-and-gender,
  .ui-dialog .charsheet #species-name,
  .ui-dialog .charsheet #more-speed,
  .ui-dialog .charsheet #religion-name,
  .ui-dialog .charsheet #hd-and-size {
    grid-column: auto;
  }

  .ui-dialog .charsheet #more-speed,
  .ui-dialog .charsheet #religion-name,
  .ui-dialog .charsheet #hd-and-size {
    grid-column: auto;
  }
}

@media (max-width: 650px) {
  .ttd-workspace { padding: 8px; }

  .ui-dialog .charsheet .sheet-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-dialog .charsheet .sheet-main > .main-left,
  .ui-dialog .charsheet .sheet-main > .main-right {
    grid-column: 1;
  }

  .ui-dialog .charsheet .sheet-spells .gridarea {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "HeaderS"
      "Column1"
      "Column2";
  }

  .ui-dialog .charsheet .character-info-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-dialog .charsheet .sheet-definitions .progression-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ui-dialog .charsheet .sheet-definitions .progression-summary > div {
    grid-column: auto;
    grid-row: auto;
  }

  .ui-dialog .charsheet .sheet-definitions .definition-sections,
  .ui-dialog .charsheet .settings-grid,
  .ui-dialog .charsheet .sheet-accessories .accessories-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-dialog .charsheet .sheet-definitions .definition-sections > div,
  .ui-dialog .charsheet .sheet-accessories .Column1,
  .ui-dialog .charsheet .sheet-accessories .Column2 {
    grid-column: 1;
    grid-row: auto;
  }

  .ui-dialog .charsheet .bag-grid {
    gap: 2px;
    font-size: 10px;
  }
}

@container (max-width: 760px) {
  .ui-dialog .charsheet .sheet-gear .grr7 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-dialog .charsheet .sheet-gear .grr7 > .grc1,
  .ui-dialog .charsheet .sheet-gear .grr7 > .grc2 {
    grid-column: 1;
  }
}

@container (max-width: 620px) {
  .ui-dialog .charsheet .character-info-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-dialog .charsheet .sheet-spells .spellcasting-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-dialog .charsheet .sheet-spells .spellcasting-summary label {
    flex-wrap: wrap;
  }

  .ui-dialog .charsheet .sheet-gear > .grr3.ggrid,
  .ui-dialog .charsheet .sheet-gear > .grr4.ggrid,
  .ui-dialog .charsheet .sheet-gear > .grr5.ggrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-dialog .charsheet .sheet-gear > .grr3.ggrid > div,
  .ui-dialog .charsheet .sheet-gear > .grr4.ggrid > div,
  .ui-dialog .charsheet .sheet-gear > .grr5.ggrid > div {
    grid-column: auto;
    grid-row: auto;
  }
}

/* --------------------------------------------------------------------------
   Modern standalone theme

   Roll20's stylesheet remains the canonical source for visibility and layout
   behavior. This final layer supplies the browser app's visual system while
   intentionally leaving the roll-template grid and ornamentation alone.
   -------------------------------------------------------------------------- */

:root {
  --ttd-ink: #172033;
  --ttd-muted: #667085;
  --ttd-border: #d7dde7;
  --ttd-panel: #ffffff;
  --ttd-accent: #7b2943;
  --ttd-accent-dark: #4b1729;
  --ttd-result: #fff4cc;
  --ttd-sheet-max: 1160px;
  --ttd-roll-width: clamp(300px, 25vw, 380px);
}

html,
body {
  background: #eef2f7;
  color: var(--ttd-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

.ttd-app-bar {
  min-height: 64px;
  padding: 10px clamp(14px, 2.5vw, 32px);
  background: #ffffff;
  color: #172033;
  border: 0;
  border-bottom: 1px solid #d7dde7;
  box-shadow: 0 2px 12px rgb(15 23 42 / 7%);
}

.ttd-app-title {
  grid-template-columns: 32px auto;
  align-items: center;
  column-gap: 10px;
}

.ttd-brand-logo {
  grid-row: 1 / span 2;
  width: 32px;
  height: 42px;
  object-fit: contain;
}

.ttd-app-title strong {
  color: #3f1524;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  letter-spacing: 0.01em;
}

#save-status {
  color: #667085;
  font-size: 12px;
}

.ttd-app-actions {
  gap: 8px;
}

.ttd-app-actions button,
.ttd-roll-heading button {
  min-height: 36px;
  padding: 7px 12px;
  background: #ffffff;
  color: #344054;
  border: 1px solid #cfd6e1;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
  font-size: 13px;
  font-weight: 650;
  transition: border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, background 120ms ease;
}

.ttd-app-actions button:hover,
.ttd-roll-heading button:hover {
  background: #faf7f8;
  color: var(--ttd-accent);
  border-color: #ae7b8b;
  box-shadow: 0 2px 5px rgb(15 23 42 / 9%);
}

.ttd-app-actions :is(#toggle-compendium, #toggle-rolls)[aria-expanded="true"] {
  color: #7b2943;
  background: #fff7fa;
  border-color: #a95f78;
  box-shadow: 0 0 0 2px rgb(123 41 67 / 8%);
}

.ttd-app-actions button:focus-visible,
.ttd-roll-heading button:focus-visible {
  outline: 3px solid rgb(123 41 67 / 18%);
  outline-offset: 2px;
}

.ttd-workspace {
  grid-template-columns: minmax(0, var(--ttd-sheet-max)) var(--ttd-roll-width);
  gap: 20px;
  padding: 20px;
}

#sheet-host {
  --sheet-bg: #f5f7fb;
  --sheet-surface: #ffffff;
  --sheet-surface-2: #f1f4f8;
  --sheet-surface-3: #e8edf4;
  --sheet-line: #d4dbe6;
  --sheet-text: #1d2939;
  --sheet-muted: #667085;
  --sheet-accent: #7b2943;
  --sheet-accent-strong: #501a2c;
  --sheet-spell-card-accent: #35101f;
  --sheet-accent-text: #501a2c;
  --sheet-accent-soft: #f7eaf0;
  --sheet-danger: #b4233b;
  color: var(--sheet-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
}

#sheet-host:has(> .sheet-dark-mode-toggle[value="1"]) {
  --sheet-bg: #111827;
  --sheet-surface: #1f2937;
  --sheet-surface-2: #293548;
  --sheet-surface-3: #354156;
  --sheet-line: #465268;
  --sheet-text: #f4f7fb;
  --sheet-muted: #b8c1cf;
  --sheet-accent: #8b3f5b;
  --sheet-accent-strong: #5a1f33;
  --sheet-spell-card-accent: #3a1223;
  --sheet-accent-text: #f2c7d4;
  --sheet-accent-soft: #3a202b;
  --sheet-danger: #fb7185;
}

.ui-dialog #sheet-host .sheet-mode-background {
  display: none;
}

/* Navigation */
.ui-dialog #sheet-host .SAbutton {
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0 0 10px;
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--sheet-surface-3);
  border: 1px solid var(--sheet-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.ui-dialog #sheet-host .SAbutton button,
.ui-dialog #sheet-host .SAbutton .sheet-tab-button-settings {
  flex: 1 0 auto;
  width: auto !important;
  min-width: max-content;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  transform: none;
  background: transparent;
  color: var(--sheet-muted);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 34px;
}

.ui-dialog #sheet-host .SAbutton button::after {
  display: none;
}

.ui-dialog #sheet-host .SAbutton button:hover {
  background: color-mix(in srgb, var(--sheet-surface) 62%, transparent);
  color: var(--sheet-text);
}

.ui-dialog #sheet-host .SAbutton .settings-tab-icon {
  transform: none;
}

.ui-dialog #sheet-host .sheet-tabstoggle[value="main"] ~ .SAbutton .sheet-tab-button-main,
.ui-dialog #sheet-host .sheet-tabstoggle[value="bio"] ~ .SAbutton .sheet-tab-button-bio,
.ui-dialog #sheet-host .sheet-tabstoggle[value="definitions"] ~ .SAbutton .sheet-tab-button-definitions,
.ui-dialog #sheet-host .sheet-tabstoggle[value="abilities"] ~ .SAbutton .sheet-tab-button-abilities,
.ui-dialog #sheet-host .sheet-tabstoggle[value="spells"] ~ .SAbutton .sheet-tab-button-spells,
.ui-dialog #sheet-host .sheet-tabstoggle[value="skills"] ~ .SAbutton .sheet-tab-button-skills,
.ui-dialog #sheet-host .sheet-tabstoggle[value="gear"] ~ .SAbutton .sheet-tab-button-gear,
.ui-dialog #sheet-host .sheet-tabstoggle[value="accessories"] ~ .SAbutton .sheet-tab-button-accessories,
.ui-dialog #sheet-host .sheet-tabstoggle[value="inventory"] ~ .SAbutton .sheet-tab-button-inventory,
.ui-dialog #sheet-host .sheet-tabstoggle[value="profitloss"] ~ .SAbutton .sheet-tab-button-profitloss,
.ui-dialog #sheet-host .sheet-tabstoggle[value="settings"] ~ .SAbutton .sheet-tab-button-settings {
  background: var(--sheet-surface);
  color: var(--sheet-accent-text);
  box-shadow: 0 1px 4px rgb(15 23 42 / 14%);
}

/* Page shells */
.ui-dialog #sheet-host > :is(
  .sheet-main, .sheet-bio, .sheet-definitions, .sheet-abilities, .sheet-spells,
  .sheet-skills, .sheet-gear, .sheet-accessories, .sheet-inventory,
  .sheet-profitloss, .sheet-settings
) {
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  background: var(--sheet-bg) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgb(15 23 42 / 8%);
  text-align: left;
}

.ui-dialog #sheet-host .sheet-main {
  gap: 12px;
}

.ui-dialog #sheet-host :is(.main-left, .main-right, .Column1, .Column2) {
  gap: 10px;
}

/* Typography and section headers */
.ui-dialog #sheet-host :is(.column-header, .column-header-dark) {
  min-height: 36px;
  padding: 8px 12px;
  background: var(--sheet-accent-strong) !important;
  color: #ffffff !important;
  border: 0;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 750;
  line-height: 20px;
  letter-spacing: 0.01em;
  text-align: left;
}

.ui-dialog #sheet-host :is(.titleblock, .titleblock_stat, .row-header, .row-header-dark, .vitals-subheader, .crafting-materials-subheader) {
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
  font-weight: 700;
}

.ui-dialog #sheet-host .Spell-Level-Name,
.ui-dialog #sheet-host .spelltitle,
.ui-dialog #sheet-host .weapon-advanced-header,
.ui-dialog #sheet-host .crafting-materials-header,
.ui-dialog #sheet-host .character-import-header {
  background: var(--sheet-accent-strong) !important;
  color: #ffffff !important;
}

/* Keep the level banner and its repeating spell cards visually distinct. */
.ui-dialog #sheet-host .sheet-spells .minimizable-repeat-spells > .spelltitle {
  background: var(--sheet-spell-card-accent) !important;
}

.ui-dialog #sheet-host .sheet-spells .minimizable-repeat-spells > .spelltitle > span {
  background: transparent !important;
}

.ui-dialog #sheet-host label,
.ui-dialog #sheet-host span,
.ui-dialog #sheet-host div,
.ui-dialog #sheet-host td,
.ui-dialog #sheet-host th {
  border-color: var(--sheet-line);
  overflow: hidden;
}

/* Form controls */
.ui-dialog #sheet-host input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ui-dialog #sheet-host select,
.ui-dialog #sheet-host textarea {
  min-height: 28px;
  padding: 4px 7px;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line) !important;
  border-radius: 6px;
  box-shadow: inset 0 1px 1px rgb(15 23 42 / 3%);
  line-height: 18px;
}

.ui-dialog #sheet-host input::placeholder,
.ui-dialog #sheet-host textarea::placeholder {
  color: var(--sheet-muted) !important;
  opacity: 0.78;
}

.ui-dialog #sheet-host input:focus,
.ui-dialog #sheet-host select:focus,
.ui-dialog #sheet-host textarea:focus {
  position: relative;
  z-index: 1;
  outline: 3px solid color-mix(in srgb, var(--sheet-accent) 20%, transparent);
  outline-offset: 0;
  border-color: var(--sheet-accent) !important;
}

.ui-dialog #sheet-host input[readonly],
.ui-dialog #sheet-host textarea[readonly] {
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-muted) !important;
  box-shadow: none;
}

.ui-dialog #sheet-host input[type="checkbox"],
.ui-dialog #sheet-host input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--sheet-accent);
}

.ui-dialog #sheet-host button {
  font-family: inherit;
}

.ui-dialog #sheet-host button[type="action"],
.ui-dialog #sheet-host button[type="roll"],
.ui-dialog #sheet-host .ttd-repeating-add,
.ui-dialog #sheet-host .ttd-repeating-move,
.ui-dialog #sheet-host .ttd-repeating-remove {
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.ui-dialog #sheet-host .Small-Button,
.ui-dialog #sheet-host .ttd-disclosure {
  background: var(--sheet-surface) !important;
  color: var(--sheet-accent-text) !important;
  border: 1px solid var(--sheet-line) !important;
  border-radius: 5px;
}

.ui-dialog #sheet-host button[type="roll"] {
  color: var(--sheet-accent-text);
}

.ui-dialog #sheet-host :is(.weapon-attack-button, .advancedAttackButton, .character-import-button) {
  min-height: 30px;
  padding: 5px 10px;
  background: var(--sheet-accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--sheet-accent) !important;
  border-radius: 7px;
  box-shadow: none;
  font-weight: 700;
}

.ui-dialog #sheet-host :is(.weapon-attack-button, .advancedAttackButton, .character-import-button):hover {
  background: var(--sheet-accent-strong) !important;
}

/* Main page cards */
.ui-dialog #sheet-host .character-info-block,
.ui-dialog #sheet-host .attribute-block,
.ui-dialog #sheet-host .saving-throw-block,
.ui-dialog #sheet-host .conditions-effects-block,
.ui-dialog #sheet-host .hp-armor-block,
.ui-dialog #sheet-host .vitals-resistances-block,
.ui-dialog #sheet-host .main-notes-body {
  overflow: hidden;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 5%);
}

.ui-dialog #sheet-host .character-info-block {
  gap: 5px;
  padding: 8px;
}

.ui-dialog #sheet-host .character-info-block > div {
  background: transparent !important;
  color: var(--sheet-text) !important;
  font-weight: 650;
}

.ui-dialog #sheet-host .character-info-block > div:not(.column-header) > div {
  background: transparent !important;
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .character-info-block > div:not(.column-header) > div:nth-child(odd) {
  padding: 3px 6px;
  background: var(--sheet-surface-2) !important;
  border-radius: 5px 5px 0 0;
  color: var(--sheet-muted) !important;
  font-size: 11px;
  font-weight: 750;
}

.ui-dialog #sheet-host :is(.attribute-block, .saving-throw-block) > div > div,
.ui-dialog #sheet-host .main-left > .ggrid > div > div,
.ui-dialog #sheet-host :is(.hp-column, .ac-column) > div {
  background: transparent !important;
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .attribute-block > div:nth-child(even),
.ui-dialog #sheet-host .saving-throw-block > div:nth-child(even) {
  background: color-mix(in srgb, var(--sheet-surface-2) 62%, transparent);
}

.ui-dialog #sheet-host .conditions-effects-content,
.ui-dialog #sheet-host .vitals-resistances-content,
.ui-dialog #sheet-host .main-notes-body {
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .sheet-main :is(
  .hp-column, .ac-column, #hp-names, #hp-inputs, #ac-names, #ac-inputs,
  .vitals-repeat-columns, .vitals-repeat-section, .temporary-effects-strip
),
.ui-dialog #sheet-host .sheet-main :is(.hp-column, .ac-column, #hp-names, #hp-inputs, #ac-names, #ac-inputs) > div {
  background: transparent !important;
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .sheet-main :is(#hp-names, #ac-names) > div {
  padding-inline: 6px;
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .sheet-main [style*="color"] {
  color: var(--sheet-text) !important;
}

/* The source sheet's dense stat columns use 18–22px row tracks. Browser form
   controls are 28px tall, so give every stacked Main-tab field a 30px row:
   28px for the control and one pixel of clearance on each edge. */
.ui-dialog #sheet-host .sheet-main .attribute-block > :is(
  #name, #base, #enhancement, #bonus, #penalty, #total, #modifier, #check
) > div,
.ui-dialog #sheet-host .sheet-main :is(
  #hp-names, #hp-inputs, #ac-names, #ac-inputs
) > div {
  box-sizing: border-box;
  min-height: 30px;
  padding-block: 1px;
}

.ui-dialog #sheet-host .sheet-main .attribute-block > :is(
  #name, #base, #enhancement, #bonus, #penalty, #total, #modifier, #check
) > div,
.ui-dialog #sheet-host .sheet-main :is(#hp-names, #ac-names) > div {
  display: flex;
  align-items: center;
}

.ui-dialog #sheet-host .sheet-main .attribute-block > :is(
  #name, #base, #enhancement, #bonus, #penalty, #total, #modifier, #check
) > div {
  justify-content: center;
}

/* Repeating content */
.ui-dialog #sheet-host .repcontainer {
  display: grid;
  gap: 8px;
  background: transparent !important;
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .ttd-repeating-row {
  margin: 0;
  padding: 6px;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line);
  border-radius: 9px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
  text-align: center;
}

/* Roll20 hides the generated grant contents when a progression no longer
   applies. The standalone sheet adds its move/delete controls outside that
   content, so hide the complete web row to keep inactive grants inaccessible. */
.ui-dialog #sheet-host .sheet-abilities .ttd-repeating-row:has(> .grant-hidden[value="1"]) {
  display: none !important;
}

.ui-dialog #sheet-host .sheet-spells .ttd-repeating-row:has(.progression-spell-hidden[value="1"]) {
  display: none !important;
}

.ui-dialog #sheet-host .ttd-repeating-row:hover {
  border-color: color-mix(in srgb, var(--sheet-accent) 50%, var(--sheet-line));
}

.ui-dialog #sheet-host .repcontrol.ttd-repeating-controls {
  justify-content: center;
  margin: 7px 0 3px;
}

.ui-dialog #sheet-host .repcontrol .ttd-repeating-add {
  min-width: 34px;
  height: 28px;
  background: var(--sheet-accent-soft) !important;
  color: var(--sheet-accent-text) !important;
  border: 1px solid color-mix(in srgb, var(--sheet-accent) 32%, var(--sheet-line)) !important;
  border-radius: 7px;
  box-shadow: none;
}

.ui-dialog #sheet-host .ttd-row-actions {
  padding-top: 4px;
  border-top: 1px solid var(--sheet-line);
}

.ui-dialog #sheet-host .ttd-repeating-move,
.ui-dialog #sheet-host .ttd-repeating-remove {
  height: 26px;
  border-radius: 6px;
  box-shadow: none;
}

.ui-dialog #sheet-host .ttd-repeating-move {
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line) !important;
}

.ui-dialog #sheet-host .ttd-repeating-remove {
  background: color-mix(in srgb, var(--sheet-danger) 12%, var(--sheet-surface)) !important;
  color: var(--sheet-danger) !important;
  border: 1px solid color-mix(in srgb, var(--sheet-danger) 35%, var(--sheet-line)) !important;
}

/* Bio, definitions, abilities, and spells */
.ui-dialog #sheet-host :is(.bio-text-box, .dta-shrink, .ability_description, .feats_description, .spells_description) {
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
}

.ui-dialog #sheet-host :is(.sheet-definitions .definition-sections, .sheet-abilities .grr4, .Spell-Level, .minimizable-repeat-spells) {
  overflow: hidden;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line) !important;
  border-radius: 9px;
}

/* Definitions tab: treat boolean character concepts as readable options and
   group the Primary Definition fields into one coherent editor. */
.ui-dialog #sheet-host .sheet-definitions .definition-sections {
  gap: 10px;
  padding: 10px;
  background: var(--sheet-surface-2) !important;
}

.ui-dialog #sheet-host .sheet-definitions .definition-sections > :is(.grc1, .grc2, .grc3) {
  overflow: hidden;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line) !important;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 5%);
}

.ui-dialog #sheet-host .sheet-definitions .species-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.ui-dialog #sheet-host .sheet-definitions .definition-toggle-card {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 8px 10px;
  overflow: hidden;
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line) !important;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 750;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.ui-dialog #sheet-host .sheet-definitions .definition-toggle-card:hover {
  border-color: color-mix(in srgb, var(--sheet-accent) 45%, var(--sheet-line)) !important;
  box-shadow: 0 2px 6px rgb(15 23 42 / 8%);
}

.ui-dialog #sheet-host .sheet-definitions .definition-toggle-card:has(input:checked) {
  background: var(--sheet-accent-soft) !important;
  color: var(--sheet-accent-text) !important;
  border-color: color-mix(in srgb, var(--sheet-accent) 62%, var(--sheet-line)) !important;
}

.ui-dialog #sheet-host .sheet-definitions .definition-toggle-card span {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.ui-dialog #sheet-host .sheet-definitions .definition-toggle-card input[type="checkbox"] {
  flex: 0 0 16px;
  margin: 0;
}

.ui-dialog #sheet-host .sheet-definitions .definition-sections > .grc1 > div:last-child,
.ui-dialog #sheet-host .sheet-definitions .definition-sections > .grc3 > div:last-child {
  padding: 0 10px 10px;
}

.ui-dialog #sheet-host .sheet-definitions .primary-definition-card {
  display: grid;
  gap: 8px;
  margin: 10px;
  padding: 10px;
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line);
  border-radius: 9px;
}

.ui-dialog #sheet-host .sheet-definitions .diffuse-background-option {
  justify-content: flex-start;
  background: var(--sheet-surface) !important;
}

.ui-dialog #sheet-host .sheet-definitions .primary-definition-label {
  min-height: auto;
  padding: 4px 2px 0;
  background: transparent !important;
  color: var(--sheet-muted) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.ui-dialog #sheet-host .sheet-definitions .primary-definition-name {
  min-height: 0;
  padding: 0;
  background: transparent !important;
  border-radius: 0;
}

.ui-dialog #sheet-host .sheet-definitions .primary-definition-name .DTA-name {
  width: 100% !important;
  height: 36px;
  margin: 0;
  padding-inline: 10px;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border: 1px solid color-mix(in srgb, var(--sheet-accent) 42%, var(--sheet-line)) !important;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
}

.ui-dialog #sheet-host .sheet-definitions .primary-definition-description textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 92px;
  margin: 0;
  padding: 8px;
  resize: vertical;
}

/* Center each row of resource cards as the collection grows. */
.ui-dialog #sheet-host .sheet-abilities fieldset.repeating_resources.repcontainer {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: start;
  padding: 10px;
  background: var(--sheet-surface-2) !important;
}

.ui-dialog #sheet-host .sheet-abilities fieldset.repeating_resources.repcontainer > .ttd-repeating-row {
  box-sizing: border-box;
  flex: 0 1 calc((100% - 40px) / 5);
  width: auto !important;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--sheet-surface) !important;
  border: 1px solid var(--sheet-line) !important;
  border-radius: 10px;
}

.ui-dialog #sheet-host .sheet-abilities .resource-card {
  display: grid;
  gap: 9px;
  padding: 10px;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .sheet-abilities .resource-card label {
  display: grid;
  gap: 4px;
  width: auto;
  min-width: 0;
  margin: 0;
  color: var(--sheet-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}

.ui-dialog #sheet-host .sheet-abilities .resource-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ui-dialog #sheet-host .sheet-abilities .resource-card :is(.resource_name, .standard-input) {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 6px 8px;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line) !important;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.ui-dialog #sheet-host .sheet-abilities .resource-card .resource_name {
  border-color: color-mix(in srgb, var(--sheet-accent) 42%, var(--sheet-line)) !important;
  text-align: left;
}

.ui-dialog #sheet-host .sheet-abilities fieldset.repeating_resources.repcontainer
  > .ttd-repeating-row .ttd-row-actions {
  margin: 0;
  padding: 6px 8px;
  background: var(--sheet-surface-2);
}

.ui-dialog #sheet-host .sheet-abilities .ability-usage-row {
  display: grid !important;
  grid-template-columns: max-content max-content minmax(110px, 1fr);
  align-items: center;
  gap: 6px 10px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
}

.ui-dialog #sheet-host .sheet-abilities .ability-usage-row > label {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  width: auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

.ui-dialog #sheet-host .sheet-abilities .ability-usage-row
  > .ability-usage-count {
  grid-template-columns: max-content 36px;
}

.ui-dialog #sheet-host .sheet-abilities .ability-usage-row
  > .ability-resource-field {
  grid-template-columns: max-content minmax(0, 1fr);
}

.ui-dialog #sheet-host .sheet-abilities .ability-usage-row
  > .ability-usage-count > input {
  box-sizing: border-box;
  width: 36px !important;
  min-width: 36px;
  max-width: 36px;
  margin: 0;
  padding-inline: 4px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.ui-dialog #sheet-host .sheet-abilities .ability-usage-row
  > .ability-resource-field > input {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  margin: 0;
  padding-inline: 7px;
  text-align: left;
}

@media (max-width: 520px) {
  .ui-dialog #sheet-host .sheet-abilities .ability-usage-row {
    grid-template-columns: 56px 74px minmax(90px, 1fr);
    gap: 6px 8px;
  }

  .ui-dialog #sheet-host .sheet-abilities .ability-usage-row
    > :is(.ability-usage-count, .ability-resource-field) {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 28px;
    justify-self: stretch;
    gap: 2px;
    width: 100%;
    text-align: center;
  }

  .ui-dialog #sheet-host .sheet-abilities .ability-usage-row
    > .ability-usage-count > input {
    justify-self: center;
  }
}

.ui-dialog #sheet-host .sheet-abilities :is(.ability-title-row, .feat-title-row),
.ui-dialog #sheet-host .sheet-spells :is(.Details-1, .Details-2, .Description, .Advanced) {
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
}

.ui-dialog #sheet-host .sheet-spells .sheet-repeating-fields,
.ui-dialog #sheet-host .sheet-spells .gridarea,
.ui-dialog #sheet-host .sheet-spells .Column1,
.ui-dialog #sheet-host .sheet-spells .Column2 {
  background: transparent !important;
  color: var(--sheet-text) !important;
}

/* Keep ability and spell dice controls compact while leaving enough room for
   the complete die label and the browser's native dropdown arrow. */
.ui-dialog #sheet-host .sheet-spells :is(.Details-1, .Details-2) {
  display: grid !important;
  grid-auto-rows: minmax(32px, auto);
  align-content: start;
  gap: 2px;
}

.ui-dialog #sheet-host .sheet-spells :is(.Details-1, .Details-2) > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 96px);
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
}

.ui-dialog #sheet-host .sheet-spells :is(.Details-1, .Details-2) > div
  > :is(input:not([type="checkbox"]), select) {
  box-sizing: border-box;
  justify-self: stretch;
  width: 100% !important;
  min-width: 0;
  margin: 0;
  float: none !important;
}

.ui-dialog #sheet-host .sheet-spells :is(.Details-1, .Details-2) > div
  > input[type="checkbox"] {
  justify-self: end;
  margin: 0;
  float: none !important;
}

.ui-dialog #sheet-host .sheet-spells .Details-2 > div:has(input[name="attr_dice_num"]) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.ui-dialog #sheet-host .sheet-spells .Details-2 > div:has(select[name="attr_save_success"])
  > div,
.ui-dialog #sheet-host .sheet-spells .Details-2 > div:has(select[name="attr_save_success"])
  > div > div {
  min-width: 0;
  float: none !important;
}

.ui-dialog #sheet-host :is(
  .sheet-abilities .ability_description div:has(> input[name="attr_ability_dice_num"]),
  .sheet-spells .Details-2 span:has(> input[name="attr_dice_num"])
) {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: auto;
  max-width: 100%;
  background: transparent !important;
}

.ui-dialog #sheet-host .sheet-spells .Details-2
  span:has(> input[name="attr_dice_num"]) {
  justify-self: end;
  float: none !important;
}

.ui-dialog #sheet-host :is(
  .sheet-abilities input[name="attr_ability_dice_num"],
  .sheet-spells input[name="attr_dice_num"]
) {
  box-sizing: border-box;
  flex: 0 0 36px;
  width: 36px !important;
  min-width: 36px;
  max-width: 36px;
  margin: 0;
  padding-inline: 4px;
  float: none !important;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.ui-dialog #sheet-host :is(
  .sheet-abilities select.die-select[name="attr_ability_dice_type"],
  .sheet-spells select.die-select[name="attr_dice_type"]
) {
  box-sizing: border-box;
  flex: 0 0 64px;
  width: 64px !important;
  min-width: 64px;
  max-width: 64px;
  margin: 0;
  padding: 0 2px 0 5px;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  font-weight: 750;
  text-align: center;
}

@media (max-width: 520px) {
  .ui-dialog #sheet-host .sheet-spells .spells_description {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "Details-1"
      "Details-2"
      "Description"
      "Advanced" !important;
  }

  .ui-dialog #sheet-host .sheet-spells :is(.Details-1, .Details-2) > div {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 112px);
  }

  .ui-dialog #sheet-host .sheet-spells .Details-1 {
    border-bottom: 1px solid var(--sheet-line);
  }
}

/* Skills */
.ui-dialog #sheet-host .SkillsPage {
  overflow: auto;
  background: var(--sheet-surface) !important;
  border: 1px solid var(--sheet-line);
  border-radius: 10px;
}

.ui-dialog #sheet-host .SkillsPage table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .SkillsPage th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 4px;
  background: var(--sheet-accent-strong) !important;
  color: #ffffff !important;
  border-color: color-mix(in srgb, #ffffff 18%, transparent) !important;
}

.ui-dialog #sheet-host .SkillsPage td {
  padding: 5px 4px;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
}

.ui-dialog #sheet-host .SkillsPage tr:nth-child(even) td {
  background: var(--sheet-surface-2) !important;
}

.ui-dialog #sheet-host .SkillsPage tr:hover td {
  background: var(--sheet-accent-soft) !important;
}

/* Gear */
.ui-dialog #sheet-host .sheet-gear :is(.gear-item-card, .weapon-repeat-box) {
  overflow: hidden;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line) !important;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 5%);
}

.ui-dialog #sheet-host .sheet-gear :is(.gear-item-summary, .weapon-summary) {
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
}

.ui-dialog #sheet-host .sheet-gear :is(.gear-item-details, .weapon-details, .weapon-advanced-body) {
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
}

.ui-dialog #sheet-host .sheet-gear :is(.weapon-field, .weapon-description-field, .weapon-grandmaster, .weapon-improved-flanking) {
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
}

.ui-dialog #sheet-host .sheet-gear .weapon-field:nth-child(even) {
  background: var(--sheet-surface-3) !important;
}

.ui-dialog #sheet-host .sheet-gear :is(.weapon-field, .weapon-description-field) > span:first-child,
.ui-dialog #sheet-host .sheet-gear label,
.ui-dialog #sheet-host .sheet-gear .weapon-name {
  color: var(--sheet-text) !important;
}

/* Inventory, profit/loss, and settings */
.ui-dialog #sheet-host :is(.inventory-item-row, .crafting-materials, .character-importer, .settings-grid, .sheet-profitloss > .ggrid) {
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line) !important;
  border-radius: 10px;
}

.ui-dialog #sheet-host :is(.inventory-item-summary, .crafting-materials-body, .character-import-body, .settings-row) {
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
}

.ui-dialog #sheet-host .settings-row:nth-child(odd),
.ui-dialog #sheet-host .mundane-materials-grid label:nth-child(odd) {
  background: var(--sheet-surface-2) !important;
}

.ui-dialog #sheet-host :is(.encumbrance-summary, .crafting-materials-totals, .inventory-item-details) {
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
}

/* Replace the last page-specific legacy black bars with the shared theme. */
.ui-dialog #sheet-host .sheet-accessories .accessories-grid {
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
}

.ui-dialog #sheet-host .sheet-accessories .HeaderM {
  background: var(--sheet-accent-strong) !important;
  color: #ffffff !important;
  border-radius: 10px 10px 0 0;
}

.ui-dialog #sheet-host .sheet-accessories .HeaderM h3 {
  color: #ffffff !important;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-grid {
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-grid > .Header-I {
  background: transparent !important;
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-grid > .Header-I h3 {
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .sheet-inventory .encumbrance-summary {
  gap: 6px;
  padding: 6px;
  background: var(--sheet-surface-2) !important;
}

.ui-dialog #sheet-host .sheet-inventory .encumbrance-summary label {
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border: 1px solid var(--sheet-line);
  border-radius: 7px;
}

.ui-dialog #sheet-host .sheet-inventory .encumbrance-summary .encumbrance-status {
  color: #ffffff !important;
  border-color: transparent;
}

.ui-dialog #sheet-host .sheet-inventory :is(.Column-I > .bag-grid.Header-I, .Column-I > div > .Header-I) {
  background: var(--sheet-accent-strong) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  border-radius: 8px 8px 0 0;
}

.ui-dialog #sheet-host .sheet-inventory .bag-grid:not(.Header-I) {
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
  border-color: var(--sheet-line) !important;
}

/* Keep inventory headings and repeating item summaries on the same responsive
   columns. The name cell reserves separate space for disclosure and sharing. */
.ui-dialog #sheet-host .sheet-inventory .inventory-grid {
  --inventory-item-columns:
    minmax(250px, 2.2fr)
    minmax(160px, 1.35fr)
    repeat(3, minmax(82px, 0.7fr));
}

.ui-dialog #sheet-host .sheet-inventory :is(
  .Column-I > .bag-grid.Header-I,
  .inventory-item-summary
) {
  grid-template-columns: var(--inventory-item-columns) !important;
  gap: 8px !important;
  align-items: center;
  justify-content: stretch;
  box-sizing: border-box;
  width: 100%;
  padding: 7px 8px;
}

.ui-dialog #sheet-host .sheet-inventory .Column-I > .bag-grid.Header-I {
  border-radius: 8px 8px 0 0;
}

.ui-dialog #sheet-host .sheet-inventory :is(
  .Column-I > .bag-grid.Header-I,
  .inventory-item-summary
) > div {
  width: auto !important;
  min-width: 0;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-item-summary {
  min-height: 48px;
  border-bottom: 1px solid var(--sheet-line) !important;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-item-name-cell {
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: center;
  width: auto !important;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-item-name-cell .inventory-item-name {
  width: 100% !important;
  min-width: 0;
  margin: 0;
  text-align: left;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-item-toggle-button {
  width: 26px !important;
  min-width: 26px;
  height: 28px;
  margin: 0;
}

.ui-dialog #sheet-host .sheet-inventory button[type="roll"].inventory-item-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  min-width: 30px;
  height: 28px;
  margin: 0;
  padding: 0;
  background: var(--sheet-accent-soft) !important;
  color: var(--sheet-accent-text) !important;
  border: 1px solid color-mix(in srgb, var(--sheet-accent) 35%, var(--sheet-line)) !important;
  border-radius: 6px;
}

.ui-dialog #sheet-host .sheet-inventory button[type="roll"].inventory-item-share:hover {
  background: color-mix(in srgb, var(--sheet-accent-soft) 72%, var(--sheet-surface)) !important;
  border-color: var(--sheet-accent) !important;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-item-summary :is(
  .location, .quantity, .piece-weight, .total-weight
) {
  min-width: 0;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-item-summary :is(
  .location, .quantity, .piece-weight, .total-weight
) :is(input, select) {
  box-sizing: border-box;
  width: 100% !important;
  margin: 0;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-location-select {
  min-width: 0;
  text-overflow: ellipsis;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-item-summary
  .inventory-location[value="0"] ~ .location {
  padding: 3px;
  background: color-mix(in srgb, var(--sheet-danger) 9%, var(--sheet-surface)) !important;
  color: var(--sheet-danger) !important;
  border: 1px solid color-mix(in srgb, var(--sheet-danger) 35%, var(--sheet-line));
  border-radius: 6px;
}

.ui-dialog #sheet-host .sheet-inventory .inventory-item-details {
  gap: 12px;
  padding: 10px;
}

.ui-dialog #sheet-host .sheet-settings .settings-label {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 8px 10px;
  background: var(--sheet-surface-2) !important;
  color: var(--sheet-text) !important;
  border-right: 1px solid var(--sheet-line);
  text-align: left;
}

.ui-dialog #sheet-host .sheet-settings .settings-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 6px;
  background: var(--sheet-surface) !important;
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .sheet-settings .settings-value input[type="number"] {
  box-sizing: border-box;
  width: 100% !important;
  margin: 0;
}

.ui-dialog #sheet-host .sheet-settings .settings-value input[type="checkbox"] {
  margin: 0;
}

.ui-dialog #sheet-host .sheet-spells > .gridarea > .titleblock h3 {
  color: var(--sheet-text) !important;
}

.ui-dialog #sheet-host .sheet-gear .weapon-name-row {
  background: var(--sheet-accent-strong) !important;
  color: #ffffff !important;
}

/* Roll panel shell only; the card itself keeps the Roll20 template layout. */
#roll-panel {
  top: 84px;
  max-height: calc(100vh - 104px);
  background: #f8fafc;
  border: 1px solid #d7dde7;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgb(15 23 42 / 8%);
}

.ttd-roll-heading {
  padding: 10px 12px;
  background: #ffffff;
  color: #3f1524;
  border-bottom: 1px solid #d7dde7;
}

.ttd-roll-heading h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

#roll-output {
  gap: 10px;
  padding: 10px;
}

.ttd-roll-empty {
  padding: 24px 12px;
  color: #667085;
  line-height: 1.5;
}

@media (max-width: 1120px) {
  .ttd-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  #roll-panel {
    max-height: none;
  }
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1024px) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) {
  .ttd-app-bar {
    gap: 10px;
    padding: 12px;
  }

  .ttd-app-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .ttd-app-actions button {
    width: 100%;
  }

  .ttd-workspace {
    padding: 8px;
  }

  .ui-dialog #sheet-host > :is(
    .sheet-main, .sheet-bio, .sheet-definitions, .sheet-abilities, .sheet-spells,
    .sheet-skills, .sheet-gear, .sheet-accessories, .sheet-inventory,
    .sheet-profitloss, .sheet-settings
  ) {
    padding: 8px;
    border-radius: 10px;
  }

  .ui-dialog #sheet-host .SAbutton {
    justify-content: flex-start;
  }

  .ui-dialog #sheet-host .sheet-inventory .Column-I > .bag-grid.Header-I {
    display: none;
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-grid .Column-I .inventory-item-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      "name name name"
      "location location location"
      "quantity piece-weight total-weight";
    gap: 9px 6px !important;
    padding: 9px;
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-summary > .name {
    grid-area: name;
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-summary > .location {
    grid-area: location;
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-summary > .quantity {
    grid-area: quantity;
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-summary > .piece-weight {
    grid-area: piece-weight;
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-summary > .total-weight {
    grid-area: total-weight;
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-summary > :is(
    .location, .quantity, .piece-weight, .total-weight
  ) {
    display: grid;
    gap: 3px;
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-summary > .location::before {
    content: "Location";
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-summary > .quantity::before {
    content: "Quantity";
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-summary > .piece-weight::before {
    content: "Unit Weight";
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-summary > .total-weight::before {
    content: "Total Weight";
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-summary > :is(
    .location, .quantity, .piece-weight, .total-weight
  )::before {
    color: var(--sheet-muted);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.2;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-inventory .inventory-item-details {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 900px) {
  .ui-dialog #sheet-host .sheet-abilities fieldset.repeating_resources.repcontainer > .ttd-repeating-row {
    flex-basis: calc((100% - 20px) / 3);
  }
}

@container (max-width: 600px) {
  .ui-dialog #sheet-host .sheet-abilities fieldset.repeating_resources.repcontainer > .ttd-repeating-row {
    flex-basis: calc((100% - 10px) / 2);
  }
}

/* In-sheet compendium tray */
#utility-panel {
  position: sticky;
  top: 84px;
  width: 100%;
  min-width: 0;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  border-radius: 12px;
  scrollbar-color: #9eabb4 transparent;
}

#utility-panel #roll-panel {
  position: static;
  top: auto;
  width: 100%;
  max-height: none;
  overflow: visible;
}

.ttd-compendium-tray {
  width: 100%;
  margin: 0;
  overflow: hidden;
  color: #26323b;
  background: #f7f9fa;
  border: 1px solid #b8c2c9;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgb(24 37 45 / 12%);
  font: 13px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ttd-compendium-tray[hidden] {
  display: none;
}

.ttd-compendium-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  color: #ffffff;
  background: linear-gradient(105deg, #3f1524, #69263d);
}

.ttd-compendium-heading small {
  display: block;
  margin-bottom: 1px;
  color: #ead8df;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ttd-compendium-heading h1 {
  margin: 0;
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.1;
}

.ttd-compendium-drag-instruction {
  display: none;
  flex: 1;
  margin: 0;
  color: #f3e8ec;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.ttd-compendium-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  color: #ffffff;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 8px;
  font: 700 20px/1 sans-serif;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.ttd-compendium-close:hover,
.ttd-compendium-close:focus-visible {
  background: rgb(255 255 255 / 17%);
  outline: 2px solid rgb(255 255 255 / 55%);
  outline-offset: 2px;
  transform: translateY(-1px);
}

.ttd-compendium-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #d4dce1;
}

.ttd-compendium-search-label {
  display: grid;
  gap: 4px;
  color: #3d4850;
  font-size: 12px;
  font-weight: 700;
}

.ttd-compendium-search {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  color: #202a31;
  background: #ffffff;
  border: 1px solid #9eabb4;
  border-radius: 8px;
}

.ttd-compendium-search:focus {
  border-color: #7d3450;
  outline: 3px solid rgb(125 52 80 / 18%);
  outline-offset: 1px;
}

.ttd-compendium-help,
.ttd-compendium-feedback {
  margin: 0;
  min-height: 38px;
  padding: 6px 0;
  line-height: 1.4;
}

.ttd-compendium-help {
  color: #56636b;
}

.ttd-compendium-feedback {
  color: #3e5360;
  font-weight: 700;
}

.ttd-compendium-feedback[data-state="success"] {
  color: #27633e;
}

.ttd-compendium-feedback[data-state="error"] {
  color: #a12e35;
}

.ttd-compendium-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 9px;
  padding: 9px 14px;
  background: #eef2f5;
  border-bottom: 1px solid #d4dce1;
}

.ttd-compendium-filters label {
  display: grid;
  gap: 3px;
  color: #46535c;
  font-size: 11px;
  font-weight: 750;
}

.ttd-compendium-filters select,
.ttd-compendium-filters button {
  min-height: 34px;
  padding: 5px 9px;
  color: #26323b;
  background: #ffffff;
  border: 1px solid #aab5bd;
  border-radius: 7px;
  font: inherit;
}

.ttd-compendium-filters button {
  padding-inline: 13px;
  color: #6b2942;
  font-weight: 750;
  cursor: pointer;
}

.ttd-compendium-filters .ttd-compendium-view-button {
  color: #ffffff;
  background: #6b2942;
  border-color: #6b2942;
}

.ttd-compendium-filters .ttd-compendium-view-button:hover,
.ttd-compendium-filters .ttd-compendium-view-button:focus-visible {
  color: #ffffff;
  background: #81334f;
}

.ttd-compendium-tray[data-view="rules"] .ttd-compendium-filters {
  grid-template-columns: minmax(0, 1fr);
}

.ttd-compendium-tray[data-view="rules"] .ttd-compendium-filters > :not(.ttd-compendium-view-button) {
  display: none;
}

.ttd-compendium-filters button:hover,
.ttd-compendium-filters button:focus-visible,
.ttd-compendium-filters select:focus-visible {
  border-color: #8b3f5b;
  outline: 3px solid rgb(125 52 80 / 16%);
  outline-offset: 1px;
}

.ttd-compendium-filters select:disabled {
  color: #8b959c;
  background: #e5e9ec;
  cursor: not-allowed;
}

.ttd-compendium-categories {
  max-height: none;
  overflow: visible;
  padding: 10px 12px 12px;
  scrollbar-color: #9eabb4 transparent;
}

.ttd-compendium-group {
  margin-top: 7px;
  background: #ffffff;
  border: 1px solid #d4dce1;
  border-radius: 8px;
}

.ttd-compendium-group:first-child {
  margin-top: 0;
}

.ttd-compendium-group > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  color: #3c2630;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.ttd-compendium-group > summary::-webkit-details-marker {
  display: none;
}

.ttd-compendium-group > summary::before {
  content: "›";
  font-size: 20px;
  line-height: 1;
  transition: transform 150ms ease;
}

.ttd-compendium-group[open] > summary::before {
  transform: rotate(90deg);
}

.ttd-compendium-group > summary span {
  flex: 1;
}

.ttd-compendium-group > summary small {
  padding: 2px 8px;
  color: #5d6970;
  background: #eef1f3;
  border-radius: 999px;
  font-size: 11px;
}

.ttd-compendium-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 0 8px 8px;
}

.ttd-compendium-card {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 74px;
  padding: 9px 48px 9px 11px;
  background: #f8fafb;
  border: 1px solid #d5dde2;
  border-left: 4px solid #8b3f5b;
  border-radius: 7px;
  cursor: grab;
}

.ttd-compendium-card:hover,
.ttd-compendium-card:focus-visible {
  background: #fff9fb;
  border-color: #a86a80;
  outline: none;
  box-shadow: 0 3px 8px rgb(63 34 44 / 14%);
}

.ttd-compendium-card.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.ttd-compendium-card strong {
  overflow-wrap: anywhere;
  color: #222c32;
  line-height: 1.25;
}

.ttd-compendium-card > span {
  display: -webkit-box;
  overflow: hidden;
  color: #637078;
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ttd-compendium-card--reference {
  padding-right: 58px;
  background: #fffaf1;
  border-left-color: #9a6629;
  cursor: default;
}

.ttd-compendium-card--reference > span {
  -webkit-line-clamp: unset;
}

.ttd-compendium-reference-points {
  display: grid;
  gap: 4px;
  margin: 5px 0 1px;
  padding-left: 18px;
  color: #4d5961;
  font-size: 12px;
  line-height: 1.4;
}

.ttd-compendium-reference-points li::marker {
  color: #9a6629;
}

.ttd-compendium-card a {
  position: absolute;
  top: 9px;
  right: 10px;
  color: #73344c;
  font-size: 11px;
  font-weight: 750;
}

.ttd-compendium-card[hidden],
.ttd-compendium-group[hidden] {
  display: none;
}

.ttd-compendium-dragging .ttd-compendium-tray {
  margin-top: 0;
  box-shadow: 0 5px 18px rgb(24 37 45 / 18%);
}

.ttd-compendium-dragging .ttd-compendium-tools,
.ttd-compendium-dragging .ttd-compendium-filters,
.ttd-compendium-dragging .ttd-compendium-categories,
.ttd-compendium-dragging .ttd-compendium-close {
  display: none;
}

.ttd-compendium-dragging .ttd-compendium-drag-instruction {
  display: block;
}

@media (max-width: 900px) {
  .ttd-compendium-tools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ttd-compendium-feedback {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 0;
  }

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

@media (max-width: 1120px) {
  #utility-panel {
    position: relative;
    top: auto;
    grid-row: 2;
    max-height: none;
    overflow: visible;
  }

  #sheet-host {
    grid-row: 1;
  }

  .ttd-compendium-open #utility-panel {
    grid-row: 1;
  }

  .ttd-compendium-open #sheet-host {
    grid-row: 2;
  }

  .ttd-compendium-tray {
    width: 100%;
  }

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

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

  .ttd-compendium-categories {
    max-height: 290px;
    overflow-y: auto;
  }

  .ttd-compendium-list {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 650px) {
  .ttd-compendium-tray {
    width: 100%;
    margin-top: 0;
  }

  .ttd-compendium-tools {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .ttd-compendium-feedback {
    grid-column: auto;
  }

  .ttd-compendium-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .ttd-compendium-categories {
    max-height: 54vh;
  }

  .ttd-compendium-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Compendium drag-and-drop feedback */
.ttd-compendium-drag-active #sheet-host {
  outline: 3px dashed rgb(126 58 83 / 55%);
  outline-offset: -5px;
}

.ttd-compendium-drag-active[data-compendium-drag-type="ability"]
  fieldset.repeating_abilities .ttd-repeating-row,
.ttd-compendium-drag-active[data-compendium-drag-type="feat"]
  fieldset.repeating_feats .ttd-repeating-row {
  outline: 3px dashed #3c8b5b;
  outline-offset: 2px;
}

.ttd-repeating-row.ttd-compendium-drop-target {
  outline: 3px solid #b16925 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgb(255 205 125 / 28%) !important;
}

.ttd-repeating-row.ttd-compendium-drop-complete {
  animation: ttd-compendium-added 1.4s ease;
}

.ttd-compendium-drop-status {
  position: fixed;
  z-index: 1000;
  right: 1rem;
  bottom: 1rem;
  max-width: min(26rem, calc(100vw - 2rem));
  padding: 0.7rem 0.9rem;
  color: #ffffff;
  background: #315f43;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 0.45rem;
  box-shadow: 0 5px 20px rgb(0 0 0 / 28%);
  font: 700 14px/1.35 system-ui, sans-serif;
}

.ttd-compendium-drop-status[data-state="error"] {
  background: #8f2f39;
}

.ttd-compendium-drop-status[hidden] {
  display: none;
}

/* Rules opened from a compendium card stay inside the sheet and can be closed
   without navigating the character-sheet iframe away from the application. */
.ttd-rules-dialog {
  width: min(1120px, calc(100vw - 32px));
  max-width: none;
  height: min(900px, calc(100vh - 32px));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  color: #172033;
  border: 1px solid #cfd6e1;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgb(15 23 42 / 35%);
}

.ttd-rules-dialog::backdrop {
  background: rgb(15 23 42 / 66%);
  backdrop-filter: blur(2px);
}

.ttd-rules-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
}

.ttd-rules-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 16px;
  background: linear-gradient(105deg, #3f1524, #69263d);
  color: #ffffff;
}

.ttd-rules-dialog-heading > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.ttd-rules-dialog-heading small {
  color: #ead8df;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ttd-rules-dialog-heading strong {
  overflow: hidden;
  font: 700 18px/1.25 Georgia, "Times New Roman", serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ttd-rules-dialog-heading button {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgb(255 255 255 / 9%);
  color: #ffffff;
  border: 1px solid rgb(255 255 255 / 48%);
  border-radius: 8px;
  font: 700 25px/1 sans-serif;
  cursor: pointer;
}

.ttd-rules-dialog-heading button:hover,
.ttd-rules-dialog-heading button:focus-visible {
  background: rgb(255 255 255 / 20%);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.ttd-rules-dialog iframe {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 0;
}

@media (max-width: 650px) {
  .ttd-rules-dialog {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
  }
}

@keyframes ttd-compendium-added {
  0%, 100% { box-shadow: inherit; }
  30% { box-shadow: 0 0 0 6px rgb(61 145 91 / 38%); }
}

/* Standalone application chrome follows the sheet's dark-mode attribute. */
html[data-ttd-theme="dark"] {
  color-scheme: dark;
  --ttd-ink: #f4f7fb;
  --ttd-muted: #b8c1cf;
  --ttd-border: #465268;
  --ttd-panel: #1f2937;
  --ttd-accent: #8b3f5b;
  --ttd-accent-dark: #5a1f33;
  --ttd-result: #293548;
}

html[data-ttd-theme="dark"],
html[data-ttd-theme="dark"] body,
html[data-ttd-theme="dark"] .ttd-workspace {
  background: #111827;
  color: var(--ttd-ink);
}

html[data-ttd-theme="dark"] .ttd-app-bar {
  background: #1f2937;
  color: var(--ttd-ink);
  border-color: var(--ttd-border);
  box-shadow: 0 2px 12px rgb(0 0 0 / 24%);
}

html[data-ttd-theme="dark"] .ttd-app-title strong {
  color: #f2c7d4;
}

html[data-ttd-theme="dark"] #save-status,
html[data-ttd-theme="dark"] .ttd-roll-empty {
  color: var(--ttd-muted);
}

html[data-ttd-theme="dark"] :is(.ttd-app-actions, .ttd-roll-heading) button {
  background: #293548;
  color: var(--ttd-ink);
  border-color: var(--ttd-border);
  box-shadow: none;
}

html[data-ttd-theme="dark"] :is(.ttd-app-actions, .ttd-roll-heading) button:hover {
  background: #354156;
  color: #f2c7d4;
  border-color: #8b3f5b;
}

html[data-ttd-theme="dark"] .ttd-app-actions :is(#toggle-compendium, #toggle-rolls)[aria-expanded="true"] {
  background: #3a202b;
  color: #f2c7d4;
  border-color: #8b3f5b;
}

html[data-ttd-theme="dark"] #roll-panel,
html[data-ttd-theme="dark"] .ttd-roll-heading,
html[data-ttd-theme="dark"] .ttd-parser-tools,
html[data-ttd-theme="dark"] .ttd-roll-card,
html[data-ttd-theme="dark"] #roll-output .sheet-rolltemplate-room .sheet-room-container {
  background: #1f2937;
  color: var(--ttd-ink);
  border-color: var(--ttd-border);
}

html[data-ttd-theme="dark"] .ttd-roll-heading {
  color: #f2c7d4;
}

html[data-ttd-theme="dark"] .ttd-parser-tools {
  background: #1f2937;
  border-color: var(--ttd-border);
}

html[data-ttd-theme="dark"] .ttd-parser-tools summary {
  color: #f2c7d4;
}

html[data-ttd-theme="dark"] .ttd-parser-tool {
  background: #293548;
  border-color: var(--ttd-border);
}

html[data-ttd-theme="dark"] .ttd-attribute-results strong {
  color: #f4f7fb;
  background: #293548;
  border-color: #667085;
}

html[data-ttd-theme="dark"] #roll-output .inlinerollresult {
  color: #f4f7fb;
}

html[data-ttd-theme="dark"] #roll-output .inlinerollresult:not(.fullcrit):not(.fullfail):not(.importantroll),
html[data-ttd-theme="dark"] .ttd-roll-total {
  background: #293548;
  color: #f4f7fb;
  border-color: #667085;
}

html[data-ttd-theme="dark"] :is(
  .ttd-roll-card dt,
  .ttd-roll-card dd,
  #roll-output .sheet-rolltemplate-room .sheet-room-row,
  #roll-output .sheet-rolltemplate-room .sheet-room-notes
) {
  border-color: var(--ttd-border);
}

html[data-ttd-theme="dark"] .ttd-roll-card dt {
  background: #293548;
}

html[data-ttd-theme="dark"] .ttd-compendium-tray {
  background: #182231;
  color: var(--ttd-ink);
  border-color: var(--ttd-border);
}

html[data-ttd-theme="dark"] .ttd-compendium-tools,
html[data-ttd-theme="dark"] .ttd-compendium-filters {
  background: #1f2937;
  border-color: var(--ttd-border);
}

html[data-ttd-theme="dark"] :is(
  .ttd-compendium-search-label,
  .ttd-compendium-help,
  .ttd-compendium-feedback,
  .ttd-compendium-filters label,
  .ttd-compendium-group > summary,
  .ttd-compendium-card strong
) {
  color: var(--ttd-ink);
}

html[data-ttd-theme="dark"] :is(
  .ttd-compendium-search,
  .ttd-compendium-filters select,
  .ttd-compendium-filters button
) {
  background: #111827;
  color: var(--ttd-ink);
  border-color: var(--ttd-border);
}

html[data-ttd-theme="dark"] .ttd-compendium-filters .ttd-compendium-view-button {
  color: #ffffff;
  background: #7d3450;
  border-color: #a85d78;
}

html[data-ttd-theme="dark"] .ttd-compendium-filters select:disabled {
  background: #293548;
  color: var(--ttd-muted);
}

html[data-ttd-theme="dark"] .ttd-compendium-group {
  background: #1f2937;
  border-color: var(--ttd-border);
}

html[data-ttd-theme="dark"] .ttd-compendium-group > summary small {
  background: #293548;
  color: var(--ttd-muted);
}

html[data-ttd-theme="dark"] .ttd-compendium-card {
  background: #293548;
  color: var(--ttd-ink);
  border-color: var(--ttd-border);
  border-left-color: #8b3f5b;
}

html[data-ttd-theme="dark"] .ttd-compendium-card--reference {
  background: #342d27;
  border-left-color: #d09a56;
}

html[data-ttd-theme="dark"] .ttd-compendium-reference-points {
  color: var(--ttd-muted);
}

html[data-ttd-theme="dark"] .ttd-compendium-reference-points li::marker {
  color: #d09a56;
}

html[data-ttd-theme="dark"] .ttd-compendium-card:hover,
html[data-ttd-theme="dark"] .ttd-compendium-card:focus-visible {
  background: #354156;
  border-color: #8b3f5b;
}

html[data-ttd-theme="dark"] .ttd-compendium-card > span {
  color: var(--ttd-muted);
}

html[data-ttd-theme="dark"] .ttd-compendium-card a {
  color: #f2c7d4;
}

html[data-ttd-theme="dark"] .ttd-rules-dialog,
html[data-ttd-theme="dark"] .ttd-rules-dialog iframe {
  background: #111827;
  color: var(--ttd-ink);
  border-color: var(--ttd-border);
}

/* --------------------------------------------------------------------------
   Smartphone application shell

   These controls live outside the Roll20-compatible source. They make the
   standalone sheet easier to navigate without changing any character attrs.
   -------------------------------------------------------------------------- */

.ttd-character-menu > summary,
.ttd-mobile-fold-toggle,
.ttd-utility-close {
  display: none;
}

.ttd-standalone-close {
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  padding: 0 0 2px;
  color: #4b1729;
  background: rgb(255 255 255 / 78%);
  border: 1px solid rgb(123 41 67 / 28%);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 10%);
  font: 400 28px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.ttd-standalone-close:hover,
.ttd-standalone-close:focus-visible {
  color: #ffffff;
  background: var(--ttd-accent);
  border-color: var(--ttd-accent);
  outline: none;
}

.ttd-standalone-close[hidden] {
  display: none !important;
}

.ttd-character-menu > .ttd-app-actions {
  display: flex !important;
}

.ttd-utility-launchers {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ttd-utility-launchers button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  background: #ffffff;
  color: #344054;
  border: 1px solid #cfd6e1;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
  font: 650 13px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.ttd-utility-launchers button:hover,
.ttd-utility-launchers button:focus-visible,
.ttd-utility-launchers button[aria-expanded="true"] {
  background: #fff7fa;
  color: var(--ttd-accent);
  border-color: #a95f78;
  outline: none;
}

.ttd-launcher-icon {
  font-size: 17px;
  line-height: 1;
}

#roll-count {
  min-width: 19px;
  padding: 2px 5px;
  background: var(--ttd-accent);
  color: #ffffff;
  border-radius: 999px;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}

#roll-count[hidden],
#utility-panel[hidden],
#roll-panel[hidden],
#compendium-panel[hidden] {
  display: none !important;
}

.ttd-roll-actions {
  display: flex;
  gap: 6px;
}

html[data-ttd-theme="dark"] .ttd-utility-launchers button {
  background: #293548;
  color: var(--ttd-ink);
  border-color: var(--ttd-border);
}

html[data-ttd-theme="dark"] .ttd-utility-launchers button[aria-expanded="true"] {
  background: #3a202b;
  color: #f2c7d4;
  border-color: #8b3f5b;
}

/* Touch and pen dragging is input-driven, so it must also work when a tablet
   requests the desktop layout and does not enter the responsive breakpoint. */
.ttd-mobile-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.ttd-mobile-drag-chip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  max-width: min(230px, calc(100vw - 30px));
  padding: 9px 12px;
  overflow: hidden;
  color: #ffffff;
  background: rgb(78 25 44 / 90%);
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(15 23 42 / 34%);
  font: 750 12px/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (pointer: coarse) {
  .ttd-compendium-card {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
  }

  .ttd-compendium-card[draggable="true"]::after {
    content: "Hold & drag";
    align-self: end;
    margin-top: 3px;
    color: #7b2943;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1024px) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  body.ttd-utility-open:not(.ttd-compendium-dragging) {
    overflow: hidden;
  }

  .ttd-app-bar {
    position: sticky;
    top: 0;
    z-index: 1200;
    flex-direction: row;
    align-items: center;
    min-height: 58px;
    padding: 8px 10px;
    background: rgb(255 255 255 / 88%);
  }

  .ttd-app-title {
    min-width: 0;
  }

  .ttd-brand-logo {
    width: 28px;
    height: 36px;
  }

  .ttd-app-title strong {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #save-status {
    overflow: hidden;
    max-width: 180px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ttd-character-menu {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .ttd-standalone-sheet .ttd-character-menu {
    margin-left: 0;
  }

  .ttd-standalone-close {
    order: 3;
    margin-left: 0;
    background: rgb(255 255 255 / 62%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .ttd-character-menu > summary {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 7px 10px;
    color: #4b1729;
    background: rgb(255 255 255 / 62%);
    border: 1px solid rgb(123 41 67 / 28%);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
  }

  .ttd-character-menu > summary::-webkit-details-marker {
    display: none;
  }

  .ttd-character-menu > summary::after {
    content: "›";
    margin-left: 7px;
    font-size: 18px;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 140ms ease;
  }

  .ttd-character-menu[open] > summary::after {
    transform: rotate(-90deg);
  }

  .ttd-character-menu > .ttd-app-actions {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2;
    display: grid !important;
    grid-template-columns: minmax(150px, 1fr);
    width: min(220px, calc(100vw - 20px));
    padding: 8px;
    background: rgb(255 255 255 / 94%);
    border: 1px solid #cfd6e1;
    border-radius: 12px;
    box-shadow: 0 14px 35px rgb(15 23 42 / 22%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .ttd-character-menu:not([open]) > .ttd-app-actions {
    display: none !important;
  }

  .ttd-character-menu .ttd-app-actions button {
    width: 100%;
    min-height: 42px;
  }

  .ttd-utility-launchers {
    position: fixed;
    z-index: 1300;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 8px;
    max-width: 430px;
    margin-inline: auto;
    padding: 7px;
    background: rgb(24 31 43 / 58%);
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgb(15 23 42 / 28%);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    transition: opacity 150ms ease;
  }

  .ttd-utility-launchers button {
    min-width: 0;
    min-height: 48px;
    padding: 7px 10px;
    overflow: hidden;
    background: rgb(255 255 255 / 72%);
    color: #35121d;
    border-color: rgb(255 255 255 / 48%);
    border-radius: 12px;
    box-shadow: inset 0 1px rgb(255 255 255 / 45%);
    font-size: 12px;
  }

  .ttd-utility-launchers button[aria-expanded="true"] {
    background: rgb(123 41 67 / 84%);
    color: #ffffff;
    border-color: rgb(255 255 255 / 36%);
  }

  .ttd-launcher-icon {
    font-size: 19px;
  }

  .ttd-workspace {
    display: block;
    width: 100%;
    padding: 6px;
  }

  #sheet-host {
    min-height: 0;
    padding-bottom: 8px;
  }

  .ui-dialog #sheet-host .sheet-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ui-dialog #sheet-host .sheet-main > :is(.main-left, .main-right) {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0;
  }

  .ui-dialog #sheet-host .SAbutton {
    position: sticky;
    top: 62px;
    z-index: 30;
    margin-bottom: 7px;
    padding: 5px;
    touch-action: pan-x pan-y;
    scroll-padding-inline: 5px;
    background: color-mix(in srgb, var(--sheet-surface-3) 88%, transparent);
    border-radius: 11px;
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    scroll-snap-type: x proximity;
  }

  .ui-dialog #sheet-host .SAbutton button {
    min-height: 38px;
    scroll-snap-align: start;
  }

  .ui-dialog #sheet-host > :is(
    .sheet-main, .sheet-bio, .sheet-definitions, .sheet-abilities, .sheet-spells,
    .sheet-skills, .sheet-gear, .sheet-accessories, .sheet-inventory,
    .sheet-profitloss, .sheet-settings
  ) {
    gap: 8px;
    padding: 6px;
    overflow: visible;
    border-radius: 11px;
    box-shadow: 0 4px 16px rgb(15 23 42 / 8%);
  }

  .ui-dialog #sheet-host .ttd-mobile-fold {
    min-width: 0;
    max-width: 100%;
    scroll-margin-top: 112px;
  }

  .ui-dialog #sheet-host .ttd-mobile-fold-toggle {
    position: sticky;
    left: 0;
    z-index: 8;
    display: flex;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 100%;
    min-height: 44px;
    margin: 0 0 7px;
    padding: 9px 11px;
    color: var(--sheet-accent-text);
    background: color-mix(in srgb, var(--sheet-accent-soft) 72%, var(--sheet-surface));
    border: 1px solid color-mix(in srgb, var(--sheet-accent) 34%, var(--sheet-line));
    border-radius: 9px;
    box-shadow: none;
    font: 750 14px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
  }

  .ui-dialog #sheet-host .ttd-mobile-fold-toggle > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ui-dialog #sheet-host .ttd-mobile-fold-toggle small {
    color: var(--sheet-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .ui-dialog #sheet-host .ttd-mobile-fold-arrow {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 150ms ease;
  }

  .ui-dialog #sheet-host .ttd-mobile-fold[data-mobile-collapsed="true"] > .ttd-mobile-fold-toggle {
    margin-bottom: 0;
  }

  .ui-dialog #sheet-host .ttd-mobile-fold[data-mobile-collapsed="true"] > .ttd-mobile-fold-toggle .ttd-mobile-fold-arrow {
    transform: rotate(0deg);
  }

  .ui-dialog #sheet-host .ttd-mobile-fold[data-mobile-collapsed="true"] > :not(.ttd-mobile-fold-toggle) {
    display: none !important;
  }

  .ui-dialog #sheet-host .ttd-mobile-fold > .ttd-mobile-fold-heading-duplicate {
    display: none !important;
  }

  .ui-dialog #sheet-host :is(.attribute-block, .saving-throw-block, .SkillsPage) {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .ui-dialog #sheet-host :is(.attribute-block, .saving-throw-block) .ttd-mobile-fold-toggle {
    width: calc(100vw - 26px) !important;
    min-width: calc(100vw - 26px);
    max-width: calc(100vw - 26px);
    justify-self: start;
  }

  .ui-dialog #sheet-host .hp-armor-block,
  .ui-dialog #sheet-host .vitals-repeat-columns,
  .ui-dialog #sheet-host .sheet-bio > .ggrid,
  .ui-dialog #sheet-host .sheet-accessories .accessories-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ui-dialog #sheet-host .hp-armor-block > :is(.grc1, .grc2),
  .ui-dialog #sheet-host .sheet-bio > .ggrid > :is(.grc1, .grc2),
  .ui-dialog #sheet-host .sheet-accessories .accessories-grid > :is(.Column1, .Column2) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .ui-dialog #sheet-host .character-info-block input:not([type="checkbox"]),
  .ui-dialog #sheet-host .character-info-block select,
  .ui-dialog #sheet-host :is(.hp-armor-block, .vitals-resistances-block) input:not([type="checkbox"]),
  .ui-dialog #sheet-host :is(.hp-armor-block, .vitals-resistances-block) select,
  .ui-dialog #sheet-host .settings-grid input:not([type="checkbox"]),
  .ui-dialog #sheet-host .settings-grid select,
  .ui-dialog #sheet-host .inventory-item-row input:not([type="checkbox"]),
  .ui-dialog #sheet-host .inventory-item-row select,
  .ui-dialog #sheet-host .inventory-item-row textarea {
    min-height: 36px;
    padding: 6px 8px;
  }

  .ui-dialog #sheet-host input[type="checkbox"],
  .ui-dialog #sheet-host input[type="radio"] {
    width: 20px;
    height: 20px;
  }

  .ui-dialog #sheet-host .sheet-definitions .species-option-grid,
  .ui-dialog #sheet-host .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-dialog #sheet-host .sheet-abilities fieldset.repeating_resources.repcontainer {
    gap: 7px;
    padding: 7px;
  }

  .ui-dialog #sheet-host .sheet-abilities fieldset.repeating_resources.repcontainer > .ttd-repeating-row {
    flex-basis: calc((100% - 7px) / 2);
  }

  #utility-panel {
    position: fixed;
    z-index: 1150;
    inset: 64px 7px calc(78px + env(safe-area-inset-bottom)) 7px;
    width: auto;
    max-height: none;
    overflow: hidden;
    background: rgb(238 242 247 / 88%);
    border: 1px solid rgb(255 255 255 / 48%);
    border-radius: 15px;
    box-shadow: 0 18px 50px rgb(15 23 42 / 34%);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    transition: opacity 130ms ease, transform 180ms ease;
  }

  #utility-panel #roll-panel,
  #utility-panel .ttd-compendium-tray {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 14px;
  }

  #utility-panel #roll-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  .ttd-parser-tool {
    align-items: stretch;
    flex-direction: column;
  }

  #roll-output {
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ttd-roll-heading,
  .ttd-compendium-heading {
    min-height: 54px;
    padding: 9px 11px;
  }

  .ttd-utility-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0 !important;
    font-size: 21px;
  }

  .ttd-compendium-tray {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .ttd-compendium-tools {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 8px 10px 7px;
  }

  .ttd-compendium-help {
    display: none;
  }

  .ttd-compendium-feedback {
    min-height: 0;
    padding: 0;
    font-size: 11px;
  }

  .ttd-compendium-filters {
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 7px 10px;
  }

  .ttd-compendium-filters select,
  .ttd-compendium-filters button,
  .ttd-compendium-search {
    min-height: 40px;
  }

  .ttd-compendium-categories {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ttd-compendium-card {
    min-height: 78px;
    padding-block: 11px;
  }

  .ttd-compendium-dragging #utility-panel {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 90px));
  }

  .ttd-compendium-dragging .ttd-utility-launchers {
    opacity: 0.18;
    pointer-events: none;
  }

  .ttd-compendium-drop-status {
    right: 10px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    left: 10px;
    max-width: none;
  }

  html[data-ttd-theme="dark"] .ttd-app-bar {
    background: rgb(31 41 55 / 88%);
  }

  html[data-ttd-theme="dark"] .ttd-character-menu > summary {
    background: rgb(41 53 72 / 82%);
    color: #f2c7d4;
    border-color: #596579;
  }

  html[data-ttd-theme="dark"] .ttd-standalone-close {
    color: #f2c7d4;
    background: rgb(41 53 72 / 82%);
    border-color: #596579;
  }

  html[data-ttd-theme="dark"] .ttd-character-menu > .ttd-app-actions,
  html[data-ttd-theme="dark"] #utility-panel {
    background: rgb(24 34 49 / 92%);
    border-color: #465268;
  }

  html[data-ttd-theme="dark"] .ttd-utility-launchers button {
    background: rgb(41 53 72 / 76%);
    color: #f4f7fb;
    border-color: rgb(255 255 255 / 20%);
  }

  html[data-ttd-theme="dark"] .ttd-utility-launchers button[aria-expanded="true"] {
    background: rgb(139 63 91 / 90%);
  }
}

/* A phone in landscape is often wider than the normal mobile breakpoint.
   Give the utility tray the visible viewport instead of leaving it squeezed
   between the app bar, browser chrome, and bottom launchers. */
@media (max-height: 500px) and (pointer: coarse) {
  #utility-panel {
    z-index: 1500;
    inset:
      max(4px, env(safe-area-inset-top))
      max(4px, env(safe-area-inset-right))
      max(4px, env(safe-area-inset-bottom))
      max(4px, env(safe-area-inset-left));
    max-height: calc(100dvh - 8px);
    border-radius: 12px;
  }

  body.ttd-utility-open:not(.ttd-compendium-dragging) .ttd-utility-launchers {
    opacity: 0;
    pointer-events: none;
  }

  .ttd-compendium-heading {
    min-height: 44px;
    padding: 5px 9px;
  }

  .ttd-compendium-heading small,
  .ttd-compendium-drag-instruction,
  .ttd-compendium-search-label > span,
  .ttd-compendium-filters label > span {
    display: none;
  }

  .ttd-compendium-heading h1 {
    font-size: 17px;
  }

  .ttd-compendium-tools {
    padding: 5px 8px;
  }

  .ttd-compendium-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 5px 8px;
  }

  .ttd-compendium-filters label:first-child {
    grid-column: auto;
  }

  .ttd-compendium-filters select,
  .ttd-compendium-filters button,
  .ttd-compendium-search {
    min-height: 36px;
  }

  .ttd-compendium-categories {
    padding: 5px 8px 8px;
  }

  .ttd-compendium-card {
    min-height: 62px;
    padding-block: 7px;
  }
}

@media (max-width: 390px) {
  .ttd-character-menu > summary {
    width: 42px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    white-space: nowrap;
  }

  .ttd-character-menu > summary::before {
    content: "⋯";
    color: #4b1729;
    font-size: 20px;
    line-height: 1;
  }

  .ttd-character-menu > summary::after {
    display: none;
  }

  html[data-ttd-theme="dark"] .ttd-character-menu > summary::before {
    color: #f2c7d4;
  }

  .ui-dialog #sheet-host .sheet-abilities fieldset.repeating_resources.repcontainer > .ttd-repeating-row {
    flex-basis: 100%;
  }
}

/* Elemental rows remain the original six-column grid on desktop. The web app
   groups them semantically so the same controls can become readable cards on
   narrow screens without changing their names or values. */
.ttd-elemental-material-card,
.ttd-elemental-material-field {
  display: contents;
}

.ttd-elemental-material-field > span {
  display: none;
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1024px) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) {
  /* Ensure every web-only fold wins over legacy component display rules. */
  body.ui-dialog #sheet-host .ttd-mobile-fold[data-mobile-collapsed="true"]
    > :not(.ttd-mobile-fold-toggle) {
    display: none !important;
  }

  .ui-dialog #sheet-host .ttd-mobile-fold-heading-duplicate {
    display: none !important;
  }

  /* Main stat blocks: keep every column visible on a phone instead of
     inheriting the desktop grids' fixed minimum widths. */
  .ui-dialog #sheet-host .sheet-main :is(.attribute-block, .saving-throw-block) {
    width: 100% !important;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .ui-dialog #sheet-host .sheet-main .attribute-block {
    grid-template-columns:
      minmax(0, 1.5fr)
      repeat(4, minmax(0, 0.72fr))
      repeat(2, minmax(0, 0.78fr))
      28px !important;
  }

  .ui-dialog #sheet-host .sheet-main .saving-throw-block {
    grid-template-columns:
      minmax(0, 1.45fr)
      repeat(6, minmax(0, 0.78fr))
      28px !important;
  }

  .ui-dialog #sheet-host .sheet-main :is(.attribute-block, .saving-throw-block)
    > div {
    min-width: 0;
  }

  .ui-dialog #sheet-host .sheet-main .attribute-block > div:not(#name),
  .ui-dialog #sheet-host .sheet-main .saving-throw-block > div:not(#save-name) {
    border-left: 1px solid color-mix(in srgb, var(--sheet-line) 72%, transparent);
  }

  .ui-dialog #sheet-host .sheet-main :is(.attribute-block, .saving-throw-block)
    > div > div {
    box-sizing: border-box;
    min-width: 0;
    min-height: 34px;
    padding: 2px 1px;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.05;
    text-overflow: ellipsis;
  }

  .ui-dialog #sheet-host .sheet-main :is(.attribute-block, .saving-throw-block)
    :is(input:not([type="checkbox"]):not([type="radio"]), select) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 2px 1px;
    font-size: 14px;
    text-align: center;
  }

  .ui-dialog #sheet-host .sheet-main .attribute-block #name > div {
    justify-content: flex-start;
    padding-left: 5px;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-main .saving-throw-block #save-name > div:nth-child(odd) {
    justify-content: flex-start;
    padding-left: 4px;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-main :is(.attribute-block, .saving-throw-block)
    button[type="roll"] {
    width: 24px !important;
    min-width: 24px;
    height: 30px;
    flex-basis: 24px;
  }

  /* Advanced Combat uses the same persistent fold and a fluid six-column
     grid, so even 320px phones do not need to pan sideways. */
  .ui-dialog #sheet-host .sheet-main .main-left > .ggrid.titleblock_stat.ttd-mobile-fold {
    width: 100% !important;
    max-width: 100%;
    grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 0.8fr)) 28px !important;
    overflow-x: hidden !important;
  }

  .ui-dialog #sheet-host .sheet-main .main-left
    > .ggrid.titleblock_stat.ttd-mobile-fold > div {
    min-width: 0;
  }

  .ui-dialog #sheet-host .sheet-main .main-left
    > .ggrid.titleblock_stat.ttd-mobile-fold > div > div {
    min-width: 0;
    min-height: 32px;
    padding-inline: 1px;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.05;
  }

  .ui-dialog #sheet-host .sheet-main .main-left
    > .ggrid.titleblock_stat.ttd-mobile-fold :is(input, select) {
    width: 100% !important;
    min-width: 0;
    height: 28px;
    margin: 0;
  }

  .ui-dialog #sheet-host .sheet-main .main-left
    > .ggrid.titleblock_stat.ttd-mobile-fold > .ttd-mobile-fold-toggle {
    width: calc(100vw - 26px) !important;
    min-width: calc(100vw - 26px);
    max-width: calc(100vw - 26px);
    justify-self: start;
  }

  /* Definitions: build mode is its own stacked, touch-friendly bubble. */
  .ui-dialog #sheet-host .sheet-definitions
    .prebuilt-progression-controls.ttd-mobile-fold {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 8px;
    overflow: hidden;
    background: var(--sheet-surface-2) !important;
    border: 1px solid var(--sheet-line);
    border-radius: 10px;
  }

  .ui-dialog #sheet-host .sheet-definitions
    .prebuilt-progression-controls.ttd-mobile-fold > .ttd-mobile-fold-toggle {
    grid-column: 1 !important;
    margin-bottom: 0;
  }

  .ui-dialog #sheet-host .sheet-definitions
    .prebuilt-progression-controls.ttd-mobile-fold > .progression-mode-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 10px 12px;
    background: var(--sheet-surface) !important;
    color: var(--sheet-text) !important;
    border: 1px solid var(--sheet-line);
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
  }

  .ui-dialog #sheet-host .sheet-definitions
    .prebuilt-progression-controls.ttd-mobile-fold > .progression-mode-picker > span {
    color: var(--sheet-muted);
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .ui-dialog #sheet-host .sheet-definitions
    .prebuilt-progression-controls.ttd-mobile-fold .progression-mode-picker select {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    min-height: 44px;
    margin: 0 !important;
    padding-inline: 10px;
    font-size: 15px;
  }

  .ui-dialog #sheet-host .sheet-definitions
    .prebuilt-progression-controls.ttd-mobile-fold > .prebuilt-progression-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px;
    background: var(--sheet-surface) !important;
    color: var(--sheet-text) !important;
    border: 1px solid var(--sheet-line);
    border-radius: 9px;
  }

  .ui-dialog #sheet-host .sheet-definitions
    .prebuilt-progression-controls.ttd-mobile-fold > .prebuilt-progression-picker > span {
    color: var(--sheet-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .ui-dialog #sheet-host .sheet-definitions
    .prebuilt-progression-controls.ttd-mobile-fold > .prebuilt-progression-picker select {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding-inline: 10px;
    font-size: 15px;
  }

  .ui-dialog #sheet-host .sheet-definitions
    .prebuilt-progression-controls.ttd-mobile-fold > .prebuilt-progression-help {
    display: block;
    width: auto;
    margin: 0;
    padding: 2px 4px 4px;
    color: var(--sheet-muted);
    font-size: 11px;
    line-height: 1.4;
  }

  /* Definitions: progression choices become compact, labeled cards. */
  .ui-dialog #sheet-host .sheet-definitions .progression-summary.ttd-mobile-fold {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    padding: 8px;
    background: var(--sheet-surface-2) !important;
    border: 1px solid var(--sheet-line);
    border-radius: 10px;
  }

  .ui-dialog #sheet-host .sheet-definitions .progression-summary.ttd-mobile-fold
    > div:not(.ttd-mobile-fold-toggle) {
    display: grid;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-template-rows: minmax(32px, auto) 40px;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    background: var(--sheet-surface) !important;
    border: 1px solid var(--sheet-line);
    border-radius: 8px;
  }

  .ui-dialog #sheet-host .sheet-definitions .progression-summary.ttd-mobile-fold
    > div:not(.ttd-mobile-fold-toggle) > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 6px;
    color: var(--sheet-muted) !important;
    background: var(--sheet-surface-2) !important;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
  }

  .ui-dialog #sheet-host .sheet-definitions .progression-summary.ttd-mobile-fold
    > div:not(.ttd-mobile-fold-toggle) > div:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 4px;
    background: var(--sheet-surface) !important;
  }

  .ui-dialog #sheet-host .sheet-definitions .progression-summary.ttd-mobile-fold
    :is(input:not([type="checkbox"]), select) {
    width: 100% !important;
    min-width: 0;
    min-height: 32px;
    margin: 0;
  }

  /* Abilities and Feats always stack vertically on phones. */
  .ui-dialog #sheet-host .sheet-abilities > .ggrid > .grr4.ggridc {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px;
  }

  .ui-dialog #sheet-host .sheet-abilities > .ggrid > .grr4.ggridc
    > :is(.grc1, .grc2) {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0;
  }

  /* Resources must fully disappear when their mobile section is collapsed. */
  body.ui-dialog #sheet-host .sheet-abilities .grr3.ggrid.ttd-mobile-fold[data-mobile-collapsed="true"]
    > fieldset.repeating_resources.repcontainer,
  body.ui-dialog #sheet-host .sheet-abilities .grr3.ggrid.ttd-mobile-fold[data-mobile-collapsed="true"]
    > .ttd-repeating-controls {
    display: none !important;
  }

  /* Flatten the source's even/odd spell columns, then order Simplex and levels
     1 through 9 as one vertical list. Each level keeps its native disclosure. */
  .ui-dialog #sheet-host .sheet-spells .gridarea {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    gap: 8px;
  }

  .ui-dialog #sheet-host .sheet-spells .gridarea > .titleblock {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: -1;
  }

  .ui-dialog #sheet-host .sheet-spells .spellcasting-summary {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px;
    width: 100%;
    min-width: 0;
    padding: 7px;
  }

  .ui-dialog #sheet-host .sheet-spells .spellcasting-summary
    > .spellcasting-field {
    grid-column: span 2;
    grid-template-rows: minmax(38px, auto) 40px;
    min-width: 0;
    min-height: 90px;
    padding: 7px 5px;
  }

  .ui-dialog #sheet-host .sheet-spells .spellcasting-summary
    > .spellcasting-field > span {
    font-size: 10px;
    line-height: 1.15;
  }

  .ui-dialog #sheet-host .sheet-spells .spellcasting-summary
    > .spellcasting-pma {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(88px, 120px);
    grid-template-rows: 40px;
    min-height: 0;
    max-width: none;
    padding: 7px 9px;
  }

  .ui-dialog #sheet-host .sheet-spells .spellcasting-summary
    :is(input[type="number"], select) {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px;
    padding: 5px 4px !important;
    font-size: 16px;
  }

  .ui-dialog #sheet-host .sheet-spells .gridarea > :is(.Column1, .Column2) {
    display: contents !important;
  }

  .ui-dialog #sheet-host .sheet-spells :is(.Column1, .Column2) > .Spell-Level {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0;
    margin: 0;
  }

  .ui-dialog #sheet-host .sheet-spells .Spell-Level:has(fieldset.repeating_spells-0) { order: 0; }
  .ui-dialog #sheet-host .sheet-spells .Spell-Level:has(fieldset.repeating_spells-1) { order: 1; }
  .ui-dialog #sheet-host .sheet-spells .Spell-Level:has(fieldset.repeating_spells-2) { order: 2; }
  .ui-dialog #sheet-host .sheet-spells .Spell-Level:has(fieldset.repeating_spells-3) { order: 3; }
  .ui-dialog #sheet-host .sheet-spells .Spell-Level:has(fieldset.repeating_spells-4) { order: 4; }
  .ui-dialog #sheet-host .sheet-spells .Spell-Level:has(fieldset.repeating_spells-5) { order: 5; }
  .ui-dialog #sheet-host .sheet-spells .Spell-Level:has(fieldset.repeating_spells-6) { order: 6; }
  .ui-dialog #sheet-host .sheet-spells .Spell-Level:has(fieldset.repeating_spells-7) { order: 7; }
  .ui-dialog #sheet-host .sheet-spells .Spell-Level:has(fieldset.repeating_spells-8) { order: 8; }
  .ui-dialog #sheet-host .sheet-spells .Spell-Level:has(fieldset.repeating_spells-9) { order: 9; }

  /* Armor, shield, and focus: turn the desktop summary strips into readable
     two-column field cards, with full-width names and descriptions. */
  .ui-dialog #sheet-host .sheet-gear .gear-equipment-list,
  .ui-dialog #sheet-host .sheet-gear .gear-item-card {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-summary,
  .ui-dialog #sheet-host .sheet-gear .gear-item-summary.focus-item-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
    gap: 7px;
    width: 100%;
    min-width: 0;
    padding: 9px;
    overflow: hidden;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-name {
    display: grid;
    grid-column: 1 / -1;
    gap: 4px;
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-name > span:first-child {
    min-height: 0;
    margin: 0;
    color: var(--sheet-muted) !important;
    font-size: 11px;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-name-controls {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 38px;
    gap: 7px;
    width: 100%;
    min-width: 0;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-name-controls input[type="text"] {
    width: 100% !important;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 7px 9px;
    font-size: 16px;
  }

  .ui-dialog #sheet-host .sheet-gear
    .gear-item-name-controls :is(.gear-item-toggle-button, .gear-item-share) {
    width: 36px !important;
    min-width: 36px;
    height: 40px;
    margin: 0;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-summary > label {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 5px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 7px;
    background: var(--sheet-surface) !important;
    border: 1px solid var(--sheet-line);
    border-radius: 7px;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-summary > label:last-child {
    grid-column: 1 / -1;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-summary > label > span:first-child {
    min-height: 26px;
    margin: 0;
    color: var(--sheet-muted) !important;
    font-size: 10px;
    line-height: 1.2;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-summary > label > input[type="number"] {
    width: 100% !important;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    margin: 0;
    padding: 5px;
    font-size: 16px;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 9px;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-details > label {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 5px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 8px;
    background: var(--sheet-surface-2) !important;
    border: 1px solid var(--sheet-line);
    border-radius: 7px;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-details
    > label:not(.gear-item-enhancement):not(.gear-item-max-hp) {
    grid-column: 1 / -1;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-details > label > span:first-child {
    min-height: 0;
    margin: 0;
    color: var(--sheet-muted) !important;
    font-size: 11px;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-details textarea {
    width: 100% !important;
    min-width: 0;
    height: 96px !important;
    min-height: 96px !important;
    margin: 0;
    padding: 7px 8px !important;
    font-size: 16px;
    line-height: 1.35;
  }

  .ui-dialog #sheet-host .sheet-gear .gear-item-details
    :is(.gear-item-enhancement, .gear-item-max-hp) input[type="number"] {
    width: 100% !important;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    margin: 0;
    font-size: 16px;
  }

  /* Weapons: one column of touch-friendly cards instead of two narrow forms. */
  .ui-dialog #sheet-host .sheet-gear .weapon-columns {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-columns > .weapon-column {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-column > fieldset,
  .ui-dialog #sheet-host .sheet-gear .weapon-column > fieldset > .ttd-repeating-row {
    width: 100% !important;
    min-width: 0;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-column > fieldset > .ttd-repeating-row {
    margin: 0 0 10px;
    padding: 0;
    overflow: hidden;
    background: var(--sheet-surface) !important;
    border: 1px solid var(--sheet-line) !important;
    border-radius: 11px;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-repeat-box {
    width: 100% !important;
    min-width: 0;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-name-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 36px;
    gap: 7px;
    align-items: center;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-name-row .weapon-name {
    width: 100% !important;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 7px 9px;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-name-row :is(.weapon-toggle-button, .weapon-share-button) {
    width: 32px !important;
    min-width: 32px;
    height: 40px;
    margin: 0;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-actions-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-actions-row :is(label, .weapon-attack-button) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 7px;
    border-radius: 7px;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-details {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px;
    padding: 10px;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-details-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px;
    min-width: 0;
    overflow: visible;
    border: 0;
  }

  .ui-dialog #sheet-host .sheet-gear :is(.weapon-field, .weapon-description-field) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px;
    min-width: 0;
    min-height: 0;
    padding: 9px;
    border: 1px solid var(--sheet-line) !important;
    border-radius: 8px;
  }

  .ui-dialog #sheet-host .sheet-gear :is(.weapon-field, .weapon-description-field)
    > span:first-child {
    min-height: 0;
    color: var(--sheet-muted) !important;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-field
    > :is(input:not([type="checkbox"]):not([type="radio"]), select),
  .ui-dialog #sheet-host .sheet-gear .weapon-description-field textarea {
    width: 100% !important;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 7px 8px;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-description-field textarea {
    min-height: 96px;
    resize: vertical;
  }

  .ui-dialog #sheet-host .sheet-gear :is(.weapon-dice-controls, .weapon-inline-controls) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-rider-controls {
    display: grid;
    grid-template-columns: 62px 78px minmax(0, 1fr);
    gap: 6px;
    width: 100%;
  }

  .ui-dialog #sheet-host .sheet-gear
    :is(.weapon-dice-controls, .weapon-inline-controls, .weapon-rider-controls)
    :is(input, select) {
    width: 100% !important;
    min-width: 0;
    min-height: 38px;
    margin: 0;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-checkbox-field {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    align-items: center;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-advanced {
    margin-top: 0;
    overflow: hidden;
    border: 1px solid var(--sheet-line);
    border-radius: 8px;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-advanced-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-advanced
    > .advancedweapon-toggle[value="0"] ~ .weapon-advanced-body {
    display: none !important;
  }

  .ui-dialog #sheet-host .sheet-gear :is(.weapon-grandmaster, .weapon-advanced-actions) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .ui-dialog #sheet-host .sheet-gear :is(.weapon-grandmaster, .weapon-advanced-actions)
    > span:first-child {
    grid-column: 1 / -1;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-advanced-actions button {
    width: 100%;
    min-height: 40px;
    margin: 0;
  }

  /* Crafting: mundane materials become rows and each element becomes its own
     vertical quality card instead of one wide spreadsheet. */
  .ui-dialog #sheet-host .sheet-inventory .crafting-materials-body {
    padding: 8px;
  }

  .ui-dialog #sheet-host .sheet-inventory .mundane-materials-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px;
  }

  .ui-dialog #sheet-host .sheet-inventory .mundane-materials-grid label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 7px 9px;
    border: 1px solid var(--sheet-line);
    border-radius: 7px;
  }

  .ui-dialog #sheet-host .sheet-inventory .mundane-materials-grid label span {
    min-width: 0;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-inventory .mundane-materials-grid input[type="number"] {
    width: 100% !important;
    min-height: 36px;
    margin: 0;
  }

  .ui-dialog #sheet-host .sheet-inventory .elemental-materials-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    background: transparent !important;
  }

  .ui-dialog #sheet-host .sheet-inventory .elemental-materials-grid
    > .elemental-materials-heading {
    display: none !important;
  }

  .ui-dialog #sheet-host .sheet-inventory .ttd-elemental-material-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    overflow: hidden;
    background: var(--sheet-surface) !important;
    border: 1px solid var(--sheet-line);
    border-radius: 9px;
  }

  .ui-dialog #sheet-host .sheet-inventory .ttd-elemental-material-card
    > .elemental-material-name {
    padding: 8px 10px;
    background: var(--sheet-accent-soft) !important;
    color: var(--sheet-accent-text) !important;
    border: 0;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
  }

  .ui-dialog #sheet-host .sheet-inventory .ttd-elemental-material-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 4px 9px;
  }

  .ui-dialog #sheet-host .sheet-inventory .ttd-elemental-material-field > span {
    display: block;
    color: var(--sheet-muted);
    font-size: 11px;
    font-weight: 750;
  }

  .ui-dialog #sheet-host .sheet-inventory .ttd-elemental-material-field input[type="number"] {
    width: 100% !important;
    min-height: 36px;
    margin: 0;
  }

  .ui-dialog #sheet-host .sheet-inventory .crafting-materials-totals {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px;
  }
}

@media (max-width: 380px) {
  .ui-dialog #sheet-host .sheet-definitions .progression-summary.ttd-mobile-fold {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-rider-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-dialog #sheet-host .sheet-gear .weapon-rider-controls > :last-child {
    grid-column: 1 / -1;
  }
}