: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);
}

* { 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: 4px;
  padding: 4px 8px;
}

.ui-dialog .charsheet .sheet-abilities > .ggrid > .grr2.ggrid > div {
  min-width: 0;
}

.ui-dialog .charsheet .sheet-abilities > .ggrid > .grr2.ggrid input[type="number"] {
  width: 64px;
  height: 18px;
}

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

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

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

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

.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: 3px 8px;
  align-items: center;
}

.ui-dialog .charsheet .sheet-spells .spellcasting-summary label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-width: 0;
  margin: 0;
  line-height: 1.05;
}

.ui-dialog .charsheet .sheet-spells .spellcasting-summary label > span {
  min-width: 0;
}

.ui-dialog .charsheet .sheet-spells .spellcasting-summary .spellcasting-pma {
  grid-column: 1 / -1;
}

.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 .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 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));
}

.ui-dialog .charsheet .settings-left,
.ui-dialog .charsheet .settings-right {
  width: 100% !important;
  min-width: 0;
}

.ui-dialog .charsheet .settings-row {
  grid-template-columns: minmax(0, 1fr) minmax(44px, auto);
  gap: 6px;
  padding: 2px 6px;
}

.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;
}

.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="0"]) > .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 {
  content: "▸";
}

/* Repeating-row disclosures are moved into the in-row action bar in the web sheet. */
.ui-dialog .charsheet .ttd-repeating-row:has(.minimizable-repeat-spells > .spells-toggle[value="0"]) > .ttd-row-actions .ttd-disclosure::before,
.ui-dialog .charsheet .ttd-repeating-row:has(.midline-right-div > .ability-toggle[value="0"]) > .ttd-row-actions .ttd-disclosure::before,
.ui-dialog .charsheet .ttd-repeating-row:has(> .feats-toggle[value="0"]) > .ttd-row-actions .ttd-disclosure::before,
.ui-dialog .charsheet .ttd-repeating-row:has(> .dta-toggle[value="1"]) > .ttd-row-actions .ttd-disclosure::before,
.ui-dialog .charsheet .ttd-repeating-row:has(.weapon-repeat-box > .weapon-toggle[value="0"]) > .ttd-row-actions .ttd-disclosure::before {
  content: "▸";
}

/* 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; }
#roll-output { display: grid; gap: 8px; padding: 8px; }
.ttd-roll-empty { margin: 8px; color: var(--ttd-muted); text-align: center; }

.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-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-start;
  gap: 3px;
  width: 100%;
  min-height: 20px;
  margin: 0 0 3px;
}
.ttd-row-actions .ttd-disclosure { margin: 0; }
.ttd-repeating-remove { position: static; z-index: 5; min-width: 20px; min-height: 20px; padding: 0; color: #fff; background: #8c2637; line-height: 18px; }

.ttd-error { margin: 8px 0; padding: 8px; color: #7a1424; background: #fff0f2; border: 1px solid #d7a2ab; border-radius: 4px; }
.ttd-rolls-hidden .ttd-workspace { grid-template-columns: minmax(0, var(--ttd-sheet-max)); }
.ttd-rolls-hidden #roll-panel { display: none; }
.ttd-rolls-external .ttd-workspace { grid-template-columns: minmax(0, var(--ttd-sheet-max)); }

@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 .grr2.ggrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

  .ui-dialog .charsheet .sheet-definitions .grr3.ggrid > 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;
  }
}