/*
Logical Fantasy Gaming (LFG)
Official Roll20 Character Sheet

Author: Daniel Brillat
System: Logical Fantasy Gaming (LFG)
Repository: https://github.com/LogicalFantasyGaming/lfg-roll20-character-sheet
*/

/* LFG Roll20 Sheet (Phase 1 - Manual Entry) */
/* v3: expanded Skills + Gear slots based on Hybrid v17 PDF form fields */

.lfg-sheet { font-family: Arial, sans-serif;   position: relative;
}


/* Default fillable field tone (matches Core Stats fields) */
.lfg-sheet input[type="text"],
.lfg-sheet textarea{
  background: #f2f2f2;
}

/* Placeholder styling: lighter than filled text */
.lfg-sheet input::placeholder,
.lfg-sheet textarea::placeholder{
  color: rgba(0,0,0,0.45);
  opacity: 1;
}

/* Hide tab state radios (still functional) */
.tabstate {
  position: absolute;
  left: -9999px;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.tabbtn {
  border: 1px solid #333;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  background: #fff;
  position: relative;
  top: 1px;
}

/* Highlight active tab */
#tab-front:checked ~ .tabs label[for="tab-front"],
#tab-back:checked  ~ .tabs label[for="tab-back"],
#tab-magic:checked ~ .tabs label[for="tab-magic"] {
  background: #fff;
  position: relative;
  top: 1px;
}

/* Pages */
.page { display: none; }
#tab-front:checked ~ .page-front { display: block; }
#tab-back:checked  ~ .page-back  { display: block; }
#tab-magic:checked ~ .page-magic { display: block; }

.grid { display: grid; gap: 10px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: 1fr 1fr 1fr; }

/* Top row (Core Stats + Armor & Saves): stack by default, sit side-by-side when wide enough */
.grid.top-two{
  display:flex;
  flex-wrap:wrap;
  gap: 20px;
  justify-content:flex-start;
  align-items:flex-start;
  /* ensures we only wrap when there would be <10px space to the right */
  padding-right:10px;
}

.grid.top-two > .card{
  flex: 0 0 auto;
}


.card {
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px;
}
.card-title { font-weight: bold; margin-bottom: 8px; }

.subcard {
  border: 1px solid #777;
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
}
.subcard-title {
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 13px;
}

.row { margin-bottom: 8px; }
.row label { display: block; font-size: 12px; margin-bottom: 2px; }
.row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

input[type="text"], textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #666;
  border-radius: 4px;
  padding: 4px 6px;
}

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

.stat small { display: block; font-size: 11px; margin-top: 4px; }
hr { border: none; border-top: 1px solid #999; margin: 10px 0; }

/* Skills */
.skill-header {
  display: grid;
  grid-template-columns: 0.7fr 2.2fr 0.9fr 0.8fr 0.8fr 0.7fr;
  gap: 6px;
  align-items: end;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 6px;
}
.skill-row {
  display: grid;
  grid-template-columns: 0.7fr 2.2fr 0.9fr 0.8fr 0.8fr 0.7fr;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.skill-name { font-size: 12px; }

/* Weapons */
.weapon-block { padding: 6px 0; }

/* Inventory grids */
.inv-grid {
  display: grid;
  gap: 6px;
}
.inv-cols-1 { grid-template-columns: 1fr; }
.inv-cols-2 { grid-template-columns: 1fr 1fr; }

.inv-row {
  display: grid;
  grid-template-columns: 28px 1fr 80px;
  gap: 6px;
  align-items: center;
}
.inv-label {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 2px 0;
}

.inv-sheaths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Equipped */
.equip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.equip-row {
  display: grid;
  grid-template-columns: 120px 1fr 80px;
  gap: 6px;
  align-items: center;
}
.equip-label {
  font-size: 12px;
  font-weight: bold;
}



/* Repeating custom skills */
fieldset.repeating_customskills {
  border: 0;
  padding: 0;
  margin: 0;
}

.skill-header-custom,
.skill-row-custom {
  grid-template-columns: 0.7fr 2.2fr 0.9fr 0.8fr 0.8fr 0.7fr;
}

.skill-row-custom input[type="text"]{
  width: 100%;
}


/* ===== Identity Strip (Front) ===== */
.identity-strip{
  border: 1px solid #333;
  border-radius: 0;
  padding: 6px 8px;
  margin-bottom: 10px;
}

.id-grid{
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 0.7fr 0.7fr 0.7fr 0.7fr 0.8fr 140px;
  gap: 6px 10px;
  align-items: end;
}

/* labels */
.identity-strip label{
  display: block;
  font-size: 10px;
  font-weight: bold;
  color: #000;
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
}

/* underline inputs */
.identity-strip input[type="text"]{
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid #333;
  border-radius: 0;
  padding: 1px 2px;
  height: 18px;
  font-size: 11px;
  background: transparent;
}
.identity-strip input[type="text"]:focus{
  outline: none;
  box-shadow: none;
}

/* XP compact box (4 digits) */
.id-xp{
  justify-self: end;
  width: 140px;
  border: 2px solid #333;
  padding: 4px 6px 6px 6px;
  border-radius: 0;
}
.id-xp label{ text-align: center; font-size: 9px; margin-bottom: 3px; }
.id-xp .xp4{
  border: 1px solid #333 !important;
  border-radius: 0;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  height: 26px;
  padding: 2px 4px;
}

/* Row layout matching paper sheet */
.id-name{ grid-column: 1 / 2; grid-row: 1; }
.id-class{ grid-column: 2 / 3; grid-row: 1; }
.id-level{ grid-column: 3 / 4; grid-row: 1; }
.id-xp{ grid-column: 4 / 5; grid-row: 1; align-self: start; }

/* second row across full width excluding XP */
.id-age{ grid-column: 1 / 2; grid-row: 2; }
.id-sex{ grid-column: 2 / 3; grid-row: 2; }
.id-height{ grid-column: 3 / 4; grid-row: 2; }
.id-weight{ grid-column: 1 / 2; grid-row: 3; }
.id-hair{ grid-column: 2 / 3; grid-row: 3; }
.id-eyes{ grid-column: 3 / 4; grid-row: 3; }
.id-race{ grid-column: 1 / 4; grid-row: 4; }

/* third row: morality + motivations */
.id-morality{ grid-column: 1 / 2; grid-row: 5; }
.id-motivation1{ grid-column: 2 / 3; grid-row: 5; }
.id-motivation2{ grid-column: 3 / 4; grid-row: 5; }

/* responsive */
@media (max-width: 900px){
  .id-grid{ grid-template-columns: 1fr 1fr; }
  .id-xp{ grid-column: 1 / 3; grid-row: auto; width: auto; }
  .id-race, .id-motivation1, .id-motivation2{ grid-column: 1 / 3; }
}


/* Override placements to fit Age/Sex/Height/Weight/Hair/Eyes/Race on one line */
.id-name{ grid-column: 1 / 4; grid-row: 1; }
.id-class{ grid-column: 4 / 7; grid-row: 1; }
.id-level{ grid-column: 7 / 8; grid-row: 1; }
.id-xp{ grid-column: 8 / 9; grid-row: 1; align-self: start; }

/* Single line: Age, Sex, Height, Weight, Hair, Eyes, Race */
.id-age{ grid-column: 1 / 2; grid-row: 2; }
.id-sex{ grid-column: 2 / 3; grid-row: 2; }
.id-height{ grid-column: 3 / 4; grid-row: 2; }
.id-weight{ grid-column: 4 / 5; grid-row: 2; }
.id-hair{ grid-column: 5 / 6; grid-row: 2; }
.id-eyes{ grid-column: 6 / 7; grid-row: 2; }
.id-race{ grid-column: 7 / 8; grid-row: 2; }

/* Row 3: Morality + Motivations */
.id-morality{ grid-column: 1 / 3; grid-row: 3; }
.id-motivation1{ grid-column: 3 / 6; grid-row: 3; }
.id-motivation2{ grid-column: 6 / 8; grid-row: 3; }


/* ===== Collapsible Identity Strip ===== */
.id-toggle{
  position: absolute;
  left: -9999px;
}

/* Button */
.id-toggle-btn{
  display: inline-block;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  margin: 0 0 6px 0;
  background: #fff;
  position: relative;
  top: 1px;
}

/* Show when checked */
.id-toggle:checked + .id-toggle-btn{
  background: #fff;
  position: relative;
  top: 1px;
}

/* Collapse/expand: checkbox and label are directly before .identity-strip */
.id-toggle:not(:checked) + .id-toggle-btn + .identity-strip{
  display: none;
}


/* ===== Core Stats Ability Block (paper style) ===== */
.ability-block{
  margin-bottom: 8px;
}
.ability-header{
  display: grid;
  grid-template-columns: 70px 1fr 0.6fr;
  gap: 8px;
  align-items: end;
  margin-bottom: 6px;
}
.ability-col-title{
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  padding: 0;
  box-sizing: border-box;
}
.ability-row{
  display: grid;
  grid-template-columns: 70px 1fr 0.6fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.ability-abbr{
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 1px;
  line-height: 1;
}
.ability-box{
  border: 2px solid #333 !important;
  border-radius: 0 !important;
  height: 44px !important;
  font-size: 18px !important;
  font-weight: bold;
  text-align: center;
  padding: 0;
  box-sizing: border-box;
}


/* ===== Ability Score Size Reduction (Sheet16) ===== */
.ability-abbr{
  font-size: 21px; /* ~25% reduction from 28px */
}

.ability-col-title{
  font-size: 10px;
}

.ability-box{
  width: 64px;
  height: 32px !important;
  font-size: 14px !important;
  font-weight: bold;
  text-align: center;
  padding: 0;
  box-sizing: border-box;
}


/* ===== Ability Block Fixes (Sheet17) ===== */
/* Make STR/DEX/etc smaller */
.ability-abbr{
  font-size: 18px !important;
  letter-spacing: 0.5px !important;
}

/* Column headers should be readable */
.ability-col-title{
  font-size: 12px !important;
}

/* Force narrow numeric boxes (3 digits) */
.ability-header,
.ability-row{
  grid-template-columns: 55px 72px 64px !important;
  gap: 6px !important;
}

.ability-box{
  width: 72px !important;
  max-width: 72px !important;
  min-width: 72px !important;
  height: 30px !important;
  font-size: 16px !important;
  padding: 0 !important;
}

/* Ensure inputs don't stretch to 100% */
.ability-row input[type="text"]{
  justify-self: center;
}


/* ===== Core Stats Card - Exact Layout (Sheet38) ===== */
.core-stats-card .card-title{
  margin-bottom: 6px;
}

.hp-panel{
  border: 2px solid #333;
  border-radius: 0;
  padding: 10px;
  margin: 12px auto 14px auto;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

.hp-panel-title{
  text-align: center;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.hp-grid{
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 14px;
  align-items: end;
  justify-content: center;
  margin-bottom: 6px;
}

.hp-label{
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.hp-label-small{
  font-size: 13px;
  line-height: 1.05;
  text-align: center;
  padding: 0;
  box-sizing: border-box;
}

.hp-box{
  width: 64px;
  box-sizing: border-box;
  border: 2px solid #333 !important;
  border-radius: 0 !important;
  height: 34px !important;
  font-size: 16px !important;
  font-weight: 700;
  text-align: center;
  padding: 0 !important;
}

.hp-drgrid{
  display: grid;
  /* Match HP grid column geometry so the DR field can align with Injured Threshold */
  grid-template-columns: repeat(3, 62px);
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
}

.hp-drlabel{
  grid-column: 1 / 3;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.hp-drbox{
  grid-column: 3;
  justify-self: stretch;
  width: 62px;
  min-width: 62px;
  max-width: 62px;
  height: 24px !important;
  border: 2px solid #333 !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 700;
  text-align: center;
  padding: 0 !important;
  box-sizing: border-box;
}

.corestat-row{
  display: grid;
  grid-template-columns: 1fr 86px;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
}

.corestat-label{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.corestat-label-initiative{
  color: #1e4db7;
}

.corestat-box{
  border: 2px solid #333 !important;
  border-radius: 0 !important;
  height: 34px !important;
  font-size: 16px !important;
  font-weight: 700;
  text-align: center;
  padding: 0 !important;
  width: 86px !important;
}



/* ===== Core Stats Fixed Box Width + Non-Drifting Spacing (Sheet39) ===== */
/* HP boxes: fixed width + fixed gaps (do not expand with window) */
.core-stats-card .hp-grid{
  grid-template-columns: repeat(3, 62px) !important;
  justify-content: center;
  gap: 14px !important;
}

.core-stats-card .hp-cell{
  width: 62px;
}

.core-stats-card .hp-box{
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
}

/* Hit Rating / Initiative / Move Speed: keep input close to label (no drifting) */
.core-stats-card .corestat-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 18px 0;
}

.core-stats-card .corestat-label{
  flex: 0 0 auto;
}

.core-stats-card .corestat-box{
  flex: 0 0 auto;
}


/* ===== Armor & Saves card (Sheet43) ===== */
.armor-saves-card { padding: 10px 12px 12px; }

.armor-saves-card .armor-box,
.armor-saves-card .save-box {
  border: 2px solid #333;
  border-radius: 0;
  height: 34px;
  font-weight: 700;
  text-align: center;
  background: #f2f2f2;
  font-size: 14px;
}

/* All Saving Throw boxes are the same size */
.armor-saves-card input.save-box{
  /* Reduce max width by 50% (84px -> 42px) */
  width: 42px;
  max-width: 42px;
  /* Reduced by 15% from prior (43px -> ~37px) */
  height: 37px;
}

/* Ensure all Saving Throw inputs (including Ability Mod) share the same size */
.armor-saves-card input.save-ability,
.armor-saves-card input.save-total{
  width: 42px;
  max-width: 42px;
  height: 37px;
}

/* Ability Mod boxes (CON/DEX/WIS) are fillable with visible placeholders */
.armor-saves-card input.save-ability{
  font-weight: 900;
}
.armor-saves-card input.save-ability::placeholder{
  color: #888;
  opacity: 1;
  font-weight: 900;
}


.armor-saves-card input.armor-box,
.armor-saves-card input.save-box{
  padding: 0 !important;
  box-sizing: border-box;
}
.armor-saves-card .armor-top{
  width: max-content;

  display: grid;
  /* Reduce Armor Class field widths by 25% (84px -> 63px) */
  grid-template-columns: auto 63px auto;
  align-items: start;
  column-gap: 12px;
  margin-top: 4px;
}

.armor-saves-card .armor-class-label{
  font-size: 26px;
  font-weight: 900;
  color: #7a1f1f;
  line-height: 1.05;
  padding-top: 6px;
  white-space: nowrap;
}

.armor-saves-card .armor-box-main{
  width: 63px;
  /* Increase height by 20% (44px -> ~53px) */
  height: 64px;
  font-size: 22px;
  margin-top: 2px;
}

.armor-saves-card .temp-ac-block{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  justify-self: center;
}
.armor-saves-card .temp-ac-label{
  font-size: 12px;
  line-height: 1.05;
  margin-top: 0px;
}

.armor-saves-card .armor-box-temp{
  width: 32px;
  /* Increase height by 20% (34px -> ~41px) */
  height: 49px;
  margin-top: 2px;
  font-size: 16px;
}

.armor-saves-card .armor-lines{
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto 63px auto;
  column-gap: 12px;
  row-gap: 10px;
  justify-content: start;
}

/* Small reference text under Touch AC (matches Temp AC label styling) */
.armor-saves-card .ac-formula{
  font-size: 12px;
  line-height: 1.05;
  margin-top: 8px;
  margin-left: 2px;
  color: #333;
  text-align: left;
}

.armor-saves-card .armor-line{
  display: contents;
}

.armor-saves-card .armor-line-label{
  grid-column: 1;
  font-size: 18px;
  font-weight: 900;
  color: #333;
  text-align: left;
  letter-spacing: 0.5px;
}

.armor-saves-card .armor-box-small{
  width: 63px;
  height: 41px;
  font-size: 16px;
  grid-column: 2;
  justify-self: center;
}

.armor-saves-card .conditions-panel{
  border: 1px solid #333;
  padding: 6px 8px 2px;
  margin-top: 12px;
  width: 300px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.armor-saves-card .conditions-label{
  font-size: 16px;
  color: #333;
  margin-bottom: 6px;
}

.armor-saves-card .conditions-text{
  width: 100%;
  height: 48px;
  border: 1px solid #333;
  resize: none;
  background: #f2f2f2;
}

.armor-saves-card .saving-title{
  margin-top: 14px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  color: #333;
}

.armor-saves-card .saving-header{
  margin-top: 4px;
  display: grid;
  grid-template-columns: 81px 37px 29px 37px 4px 37px 4px 37px;
  align-items: end;
  column-gap: 6px;
  justify-content: start;
}

.armor-saves-card .saving-header .sh{
  font-size: 12px;
  text-align: center;
  line-height: 1.05;
  color: #333;
  justify-self: center;
}

.armor-saves-card .save-row{
  margin-top: 6px;
  display: grid;
  grid-template-columns: 96px 37px 29px 37px 4px 37px 4px 37px;
  align-items: center;
  column-gap: 6px;
}

.armor-saves-card .save-name{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #333;
  text-align: left;
}

.armor-saves-card .save-eq,
.armor-saves-card .save-plus{
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  color: #333;
}

/* Ability mod boxes are now fillable inputs with placeholders */
.armor-saves-card input.save-ability::placeholder{
  color: #888;
  opacity: 1;
  font-weight: 900;
}

.armor-saves-card input.save-ability{
  font-weight: 900;
}


/* Total Save boxes: larger font to match Initiative */
.armor-saves-card .save-total{
  font-size: 16px;
}

/* ===== Sheet52 adjustments ===== */

/* Conditions / Effects: left-align and lock position with its header text */
.armor-saves-card .conditions-panel{
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* keep fixed size; do not expand with window */
  width: 300px !important;
  max-width: 300px !important;
}
.armor-saves-card .conditions-label{
  text-align: left !important;
}

/* Core Stats card max width: no more than HP panel + 40px (HP panel outer ~238px) */
.core-stats-card{
  width: fit-content;
  max-width: 278px;
}

/* Armor & Saves card max width: no more than Saving Throws grid + 40px (grid ~344px) */
.armor-saves-card{
  width: fit-content;
  max-width: 384px;
}

/* ===== Sheet61: Weapons table-style layout (Front) ===== */
.weapon-table{
  border: 1px solid #333;
  border-radius: 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.2fr;
  grid-auto-rows: auto;
  width: 100%;
  box-sizing: border-box;
}

/* grid placement */
.weapon-table > *{
  box-sizing: border-box;
}

.wt-left{
  border-right: 1px solid #333;
  padding: 8px 10px;
}

.wt-row1{ border-bottom: 1px solid #333; }
.wt-row2{ border-bottom: 1px solid #333; }

.wt-head{
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 6px 12px;
  line-height: 1.05;
}
.wt-head:last-child{ border-right: 0; }

.wt-cell{
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 10px 12px;
}
.wt-cell:last-child{ border-right: 0; }

/* left column typography */
.wt-weaponline{
  display: grid;
  grid-template-columns: 174px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.wt-weaponlabel{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.wt-weaponname{
  border: 0 !important;
  border-bottom: 1px solid #333 !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: 26px !important;
  padding: 2px 4px !important;
  font-size: 16px !important;
}

.wt-handline{
  display: flex;
  align-items: center;
  gap: 10px; /* exactly 10px between label text and R/L box */
  margin-bottom: 8px;
}
.wt-handlabel{
  font-size: 14px;
  font-weight: 400;
}
.wt-hand{
  width: 72px !important;
  height: 26px !important;
  font-size: 14px !important;
  text-align: center;
  flex: 0 0 72px;
}

.wt-bigaction{
  display: block;
}
.wt-biglabel{
  font-size: 18px;
  font-weight: 900;
}
.wt-bigbox{
  height: 28px !important;
  font-size: 14px !important;
}

/* Attack line */
.wt-attackline{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}
.wt-attacklabel{
  font-size: 22px;
  font-weight: 900;
}
.wt-attackname{
  border: 0 !important;
  border-bottom: 1px solid #333 !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: 28px !important;
  padding: 2px 4px !important;
  font-size: 16px !important;
}

/* right column inputs */
.wt-box{
  width: 100% !important;
  height: 42px !important;
  border: 2px solid #333 !important;
  border-radius: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 0 !important;
  background: #f2f2f2 !important;
}

/* Other Info row spans full width */
.wt-otherinfo{
  grid-column: 1 / 5;
  padding: 10px 12px 12px;
}
.wt-otherlabel{
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
/* Keep the weapon hr tight */
.repeating_weapons hr{
  margin: 10px 0;
}

/* Repeating Feats/Abilities: keep consistent spacing */
fieldset.repeating_featsabilities{
  border: 0;
  padding: 0;
  margin: 0;
}

/* ===== Sheet62: Weapons card full-width (Front) ===== */
.weapons-card-full{
  grid-column: 1 / -1;         /* span both columns in .grid.two */
  width: 682px;                /* Core Stats (278) + gap (20) + Armor&Saves (384) */
  max-width: 100%;
  box-sizing: border-box;
}

/* make the grid container not constrain the spanning card */
.page-front .grid.two{
  grid-auto-flow: row;
}

/* WEAPON label textbox */
.wt-weaponlabelbox{
  width: 174px !important; /* +5% from 165px */
  height: 28px !important;
  border: 2px solid #333 !important;
  border-radius: 0 !important;
  background: #f2f2f2 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: left !important;
  padding: 2px 6px !important;
  box-sizing: border-box;
}

/* Update weaponline layout since label is now an input */
.wt-weaponline{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

/* Other Attack single textbox */
.wt-otherattack{
  width: 90% !important;
  height: 29px !important;
  border: 0.7px solid #888 !important; /* ~0.5pt */
  border-radius: 0 !important;
  background: #f2f2f2 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  box-sizing: border-box !important;
}

/* Sheet63: Big Action Attack label matches Attack Bonus style */
.wt-biglabel{
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
}


/* Sheet71: Weapon Other Info textarea sizing (matches desired 1-line expandable behavior) */
.weapon-notes-text{
  width: 100%;
  height: 25px;
  min-height: 25px;
  border: 1px solid #333;
  resize: vertical;
  overflow: auto;
  background: #f2f2f2;
}

/* Sheet72: Override Roll20 largedialog textarea height for weapon notes (initially compact but resizable) */
.charsheet textarea.weapon-notes-text{
  height: 25px;
  min-height: 25px;
  resize: vertical;
  overflow: auto;
}

/* Sheet73: header inputs under Attack Bonus / Critical / Damage */
.wt-head{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.wt-headlabel{
  width: 100%;
  text-align: center;
}

.wt-box-top{
  margin-top: 8px !important;
  height: 42px !important; /* exact match to existing wt-box */
}


/* Sheet78: Secondary (second-row) weapon boxes */
.wt-row2 .wt-box{
  font-size: 12px !important;     /* already reduced */
  height: 24px !important;        /* -10% from 27px */
  border: 0.7px solid #999 !important; /* ~0.5pt, lighter */
  background: #f6f6f6 !important; /* subtle secondary feel */
}

/* Sheet76: Wider Initiative box */
input[name="attr_Initiative"].corestat-box{
  width: 96px !important;
}

/* Sheet77: Expandable Feats & Class Abilities rows (initially compact) */
.charsheet textarea.feats-notes-text{
  width: 100%;
  height: 25px;
  min-height: 25px;
  border: 1px solid #333;
  resize: vertical;
  overflow: auto;
  background: #f2f2f2;
  box-sizing: border-box;
  padding: 2px 4px;
}

/* Sheet78: Feats card row spacing consistency */
.feats-card .row{
  margin-bottom: 6px;
}
.feats-card .row:last-child{
  margin-bottom: 0;
}
.charsheet textarea.feats-notes-text{
  margin: 0;
  display: block;
}

/* Sheet81: Definitive styling for Atk Bonus 2 / Critical 2 / Damage 2 */
.charsheet input.wt-box.wt-box-secondary{
  height: 36px !important;          /* 15% shorter than 42px */
  font-size: 12px !important;       /* -2 points from 14px baseline */
  border-width: 0.7px !important;   /* ~0.5pt */
  border-style: solid !important;
  border-color: #bbb !important;    /* visibly lighter */
  background: #f7f7f7 !important;   /* subtle secondary */
}

/* Sheet82: Confidence Tokens line under CHA in Core Stats */
.ability-tokenline{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* Sheet83: Confidence Tokens box narrower (-30%) */
.charsheet input.hp-drbox.ct-box{
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
}

/* Sheet83: Prevent Identity & XP grid from stretching too wide on large windows */
.id-grid{
  max-width: 760px;
}

/* Sheet84: Morality Points compact field (3 digits) */
.id-moralitypoints input.mp3{
  width: 56px;
  max-width: 56px;
  min-width: 56px;
}

/* Sheet85: Vision & Senses / Languages row (even split) */
.id-row-vision{
  grid-column: 1 / 8; /* stop before the 140px XP column (col 8) */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

/* Sheet85: Morality Points compact field (3 digits) */
.id-moralitypoints input.mp3{
  width: 56px;
  max-width: 56px;
  min-width: 56px;
}

/* Sheet87: Prevent Vision & Senses label wrapping */
.id-vision label{
  white-space: nowrap;
}

/* Sheet88: Identity toggle chevron + clickable affordance */
.id-toggle-btn{
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-right: 22px; /* room for arrow */
}
.id-toggle-btn::after{
  content: "◀"; /* collapsed */
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}
.id-toggle:checked + .id-toggle-btn::after{
  content: "▼"; /* expanded */
  color: #000;
}
.id-toggle-btn:hover{
  filter: brightness(1.05);
}

/* Sheet88: Tabs look like real tabs */
.tabs{
  display: flex;
  gap: 6px;
  margin-bottom: 0;
}
.tabbtn{
  cursor: pointer;
  font-weight: 700;
  padding: 6px 12px;
  border: 1px solid #777;
  border-bottom: 1px solid #777;
  background: #e9e9e9;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
  user-select: none;
}
.tabbtn:hover{
  background: #f2f2f2;
}

/* Active tab */
.tabstate:checked + input.tabstate + .tabs label[for="tab-front"]{
  /* placeholder - overridden below */
}
#tab-front:checked ~ .tabs label[for="tab-front"],
#tab-back:checked  ~ .tabs label[for="tab-back"]{
  background: #eaeaea;
  border-color: #333;
  border-bottom: none; /* connected to content */
  position: relative;
  top: 1px; /* slight lift */
}

/* Sheet89: Right column stack under Armor & Saves */
.right-col{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: fit-content;
  max-width: 384px;
}

/* Sheet89: Armor & Defenses card sizing */
.armor-defenses-card{
  width: fit-content;
  max-width: 308px;
}


/* ===== Sheet94: Armor & Defenses layout (paper-style) ===== */
.armor-defenses-card{
  width: fit-content;
  max-width: 308px;
  padding: 10px 12px 12px;
}

.armor-defenses-card .ad-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* shared */
.armor-defenses-card .ad-label{
  font-size: 12px;
  font-weight: 700;
}
.armor-defenses-card .ad-label.red{
  color: #7a1f1f;
  font-size: 14px;
  font-weight: 900;
}
.armor-defenses-card .ad-input{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #333 !important;
  border-radius: 0 !important;
  padding: 2px 4px !important;
  height: 22px !important;
  font-size: 12px !important;
  box-sizing: border-box !important;
}
.armor-defenses-card .ad-input:focus{
  outline: none;
  box-shadow: none;
}

/* block wrapper */
.armor-defenses-card .ad-block{
  border: 1px solid #333;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
}
.armor-defenses-card .ad-block-title{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.4px;
  padding: 8px 10px;
  border-bottom: 1px solid #333;
  text-transform: uppercase;
}

/* armor block rows */
.armor-defenses-card .ad-armor{
  padding-bottom: 8px;
}
.armor-defenses-card .ad-row{
  padding: 6px 10px;
  border-bottom: 1px solid #333;
}
.armor-defenses-card .ad-row:last-child{
  border-bottom: 0;
}
.armor-defenses-card .ad-row-two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.armor-defenses-card .ad-row-three{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.armor-defenses-card .ad-field{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}
.armor-defenses-card .ad-field.ar-field{
  gap: 4px;
}
.armor-defenses-card .ad-line{
  width: 100%;
}
.armor-defenses-card input.ad-box{
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 26px !important;
  border: 2px solid #333 !important;
  border-radius: 0 !important;
  background: #f2f2f2 !important;
  text-align: center !important;
  font-weight: 700 !important;
  padding: 0 !important;
}
/* AR box: +20% size, +2pt font */
.armor-defenses-card input.ad-box.ad-box-ar{
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 31px !important;
  font-size: 14px !important;
}
.armor-defenses-card input.ad-box.ad-box-secondary{
  border-width: 0.7px !important;
  border-style: solid !important;
  border-color: #bbb !important;
  background: #f7f7f7 !important;
  font-size: 12px !important;
}
.armor-defenses-card .ad-divider{
  height: 0;
  border-top: 0;
  margin: 0;
  padding: 0;
}

.armor-defenses-card .ad-attackpen{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}
.armor-defenses-card .ad-details{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.armor-defenses-card .ad-check{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 11px;
  font-style: italic;
}
.armor-defenses-card .ad-check input[type="checkbox"]{
  width: 16px;
  height: 16px;
}

/* Other Defenses table */
.armor-defenses-card .ad-table{
  display: grid;
  grid-template-columns: 1fr 82px;
  border: 1px solid #333;
  border-radius: 0;
}
.armor-defenses-card .ad-th{
  padding: 8px 10px;
  border-bottom: 1px solid #333;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.armor-defenses-card .ad-th-left{
  border-right: 1px solid #333;
}
.armor-defenses-card .ad-th-right{
  text-align: center;
}
.armor-defenses-card .ad-td{
  padding: 3px 10px;
  border-bottom: 1px solid #333;
}
.armor-defenses-card .ad-td-left{
  border-right: 1px solid #333;
  font-weight: 700;
}
.armor-defenses-card .ad-td-right{
  display: flex;
  align-items: center;
  justify-content: center;
}
.armor-defenses-card input.ad-tablebox{
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 26px !important;
  border: 2px solid #333 !important;
  border-radius: 0 !important;
  background: #f2f2f2 !important;
  text-align: center !important;
  font-weight: 700 !important;
  padding: 0 !important;
}

/* Parry + Resistances spans full width */
.armor-defenses-card .ad-parry,
.armor-defenses-card .ad-resist{
  grid-column: 1 / -1;
  padding: 8px 10px;
  border-bottom: 1px solid #333;
}
.armor-defenses-card .ad-parry{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}
.armor-defenses-card .ad-parry-label{
  font-weight: 900;
}
.armor-defenses-card .ad-parry-fixed{
  font-weight: 700;
}
.armor-defenses-card .ad-parry-line{
  width: 100%;
}

.armor-defenses-card .ad-resist{
  border-bottom: 0;
}
.armor-defenses-card .ad-resist-label{
  font-weight: 900;
  margin-bottom: 6px;
}
.armor-defenses-card .ad-textarea{
  width: 100%;
  min-height: 28px !important;
  border: 1px solid #333;
  background: #f2f2f2;
  resize: vertical;
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 12px;
}

/* ===== Sheet95 tweaks ===== */
.armor-defenses-card .ad-block-title{
  display: flex;
  align-items: center;
  gap: 10px;
}

.armor-defenses-card .ad-title-input{
  flex: 1 1 auto;
  min-width: 120px;
  height: 22px !important;
  font-size: 14px !important;
  border-bottom: 1px solid #333 !important;
}

.armor-defenses-card .ad-armor-type{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}

/* ===== Sheet96: Resistances textarea smaller by default ===== */
.armor-defenses-card .ad-textarea{
  height: 28px !important;
  min-height: 28px !important;
  line-height: 14px !important;
  resize: vertical;
}

/* ===== Sheet96: Other Defenses left column inputs ===== */
.armor-defenses-card input.ad-td-input{
  width: 100% !important;
  height: 22px !important;
  border-bottom: 0 !important;
  border: 0 !important;
  padding: 0 2px !important;
  background: transparent !important;
  font-weight: 700 !important;
}

/* ===== Sheet97: Identity & XP tab width ===== */
.id-toggle-btn{
  display: block !important;
  width: 100% !important;
  max-width: 384px !important;
  box-sizing: border-box !important;
}

/* ===== Sheet97: Armor & Defenses card narrower ===== */
.armor-defenses-card{
  max-width: 308px !important;
}

/* ===== Sheet97: Smaller MP / Max DEX / Attack Penalty boxes ===== */
.armor-defenses-card input.ad-box{
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
}

/* ===== Sheet101: Parry & DR sizing + spacing ===== */
.armor-defenses-card .ad-parry{
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  gap: 4px;
}
.armor-defenses-card .ad-parry .corestat-box{
  width: 49px !important;
  height: 27px !important;
}
.armor-defenses-card .ad-dr-row{
  display: flex;
  align-items: center;
  gap: 8px;
}
.armor-defenses-card .ad-dr-row .ad-label{
  white-space: nowrap;
}
.armor-defenses-card .ad-dr-row .corestat-box{
  width: 69px !important;
  height: 27px !important;
}

/* Sheet110: ARvC label forced to black */
.armor-defenses-card .arvc-black { color: #000; }

/* Sheet112: Lighter placeholder text across the entire sheet */
.lfg-sheet input::placeholder,
.lfg-sheet textarea::placeholder{
  color: #b8b8b8 !important;
  opacity: 1;
}
.lfg-sheet input::-webkit-input-placeholder,
.lfg-sheet textarea::-webkit-input-placeholder{
  color: #b8b8b8 !important;
}
.lfg-sheet input:-ms-input-placeholder,
.lfg-sheet textarea:-ms-input-placeholder{
  color: #b8b8b8 !important;
}
.lfg-sheet input::-ms-input-placeholder,
.lfg-sheet textarea::-ms-input-placeholder{
  color: #b8b8b8 !important;
}

/* Sheet112: layout for Attack Penalty moved into Tattered row */
.armor-defenses-card .ad-row.ad-details{
  display: flex;
  align-items: center;
  gap: 10px;
}
.armor-defenses-card .ad-attackpen-inline{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Sheet113: Prevent wrapping for specific Armor & Defenses labels */
.armor-defenses-card .nowrap{ white-space: nowrap; }

/* Sheet113: Increase AR input font size */
.armor-defenses-card input[name="attr_Armor_Rating"]{ font-size: 14px; }

/* Sheet115: Armor Type row becomes a single full-width input */
.armor-defenses-card .ad-row.ad-armor-type{
  display: flex;
  align-items: center;
}
.armor-defenses-card .ad-row.ad-armor-type .armor-type-full{
  width: 100%;
  flex: 1 1 auto;
}

/* Sheet118: Reduce Attack Penalty (Tattered/Attack Penalty) row height by 4px */
.armor-defenses-card .ad-row.ad-details{
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Sheet119: Vertically center text in small inputs (Attack Penalty + Other Defenses) */
.armor-defenses-card .ad-otherdef input,
.armor-defenses-card .ad-attackpen-inline input{
  line-height: 18px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Sheet120: Vertically center text in Attack Penalty + Other Defenses inputs (override existing fixed-height styles) */
.armor-defenses-card .ad-attackpen-inline input{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 22px !important; /* matches the 22px fixed height used by ad-input */
}
.armor-defenses-card .ad-block.ad-otherdef input.ad-td-input{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 22px !important;
}

/* Sheet120: Make Other Defenses outline match Armor section (avoid double border by removing inner table border) */
.armor-defenses-card .ad-block.ad-otherdef .ad-table{
  border: 0 !important;
}


/* Sheet122: Reduce effective width of Armor & Defenses card by 10px
   (grid-controlled card; reduce horizontal padding instead) */
.armor-defenses-card{
  padding-left: calc(var(--card-padding, 10px) - 5px);
  padding-right: calc(var(--card-padding, 10px) - 5px);
}

/* Sheet127: Font size adjustments requested */

/* Armor Rating input +2 */
.armor-defenses-card .ad-box-ar{
  font-size: 14px;
}

/* Attack Penalty input +2 */
.armor-defenses-card input[name="attr_Attack_Penalty"]{
  font-size: 14px;
}

/* Reduce FORT / REF / WILL label size by 2 */
.save-name{
  font-size: 10px;
}

/* Sheet128: Force font size changes (override ad-input !important base) */
.armor-defenses-card input.ad-input[name="attr_Armor_Rating"]{
  font-size: 14px !important; /* +2 from 12px base */
}
.armor-defenses-card input.ad-input[name="attr_Attack_Penalty"]{
  font-size: 14px !important; /* +2 from 12px base */
}

/* Sheet128: Reduce FORT/REF/WILL label size by 2 (scope to AC & Saves card) */
.armor-saves-card .save-name{
  font-size: 18px !important; /* from 20px */
}

/* Sheet129: Increase AR input font size by +2 */
.armor-defenses-card input.ad-input[name="attr_Armor_Rating"]{
  font-size: 16px !important;
}

/* Sheet129: Move Saving Throws boxes/labels 5px left by tightening first grid column */
.armor-saves-card .saving-header,
.armor-saves-card .save-row{
  grid-template-columns: 61px 42px 18px 42px 18px 42px 18px 42px;
}

/* Sheet130: Collapsible Armor & Defenses card (Front tab only) */
.armor-defenses-card .ad-card-toggle{ display:none; }
.armor-defenses-card .card-title.ad-card-toggle-btn{
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-right: 22px;
}
.armor-defenses-card .card-title.ad-card-toggle-btn::after{
  content: "▼";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}
.armor-defenses-card .ad-card-toggle:not(:checked) + .card-title.ad-card-toggle-btn::after{
  content: "▶";
}
.armor-defenses-card .ad-card-collapsible{ display:none; }
.armor-defenses-card .ad-card-toggle:checked + .card-title.ad-card-toggle-btn + .ad-card-collapsible{
  display:block;
}

/* sheet139: Boot Sheath weight fields narrower */
.boot-sheath input[placeholder^="Wt"]{ width:50%; }

/* sheet139: separator before TOTAL EQUIPPED */
.equip-sep{
  grid-column: 1 / -1;
  border-top: 1px solid #000;
  margin: 2px 0;
}

/* sheet141: ensure Boot Sheath item fields remain readable */
.boot-sheath input[placeholder^="Boot Sheath"]{
  min-width: 100px;
}

/* sheet144: make Boot Sheath Wt column truly narrower without leaving right-side whitespace */
.boot-sheath .inv-row{
  grid-template-columns: 28px 1fr 40px; /* 80px -> 40px (50%) */
}
.boot-sheath input[placeholder^="Wt"]{
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}


/* sheet145: Capacity & Encumbrance subcard */
.capacity-encumbrance .cap-block{
  border: 1px solid #000;
  margin-top: 6px;
  padding: 4px;
}

.capacity-encumbrance .cap-header{
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
  margin-bottom: 4px;
}

.capacity-encumbrance .cap-row{
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}

.capacity-encumbrance .cap-label{
  font-size: 0.9em;
}

.capacity-encumbrance .cap-row input{
  width: 100%;
}

.capacity-encumbrance .cap-grid{
  display: grid;
  grid-template-columns: 1fr 80px 55px;
  gap: 6px;
  align-items: center;
}

.capacity-encumbrance .cap-grid-head{
  font-weight: 700;
  font-size: 0.85em;
}

.capacity-encumbrance .cap-grid-right{
  grid-column: 3;
  text-align: center;
}

.capacity-encumbrance .cap-grid-label{
  font-size: 0.9em;
}

.capacity-encumbrance .cap-grid-input{
  width: 100%;
}

.capacity-encumbrance .cap-grid-penalty{
  text-align: center;
  font-weight: 700;
}

/* sheet147: TOTAL EQUIPPED WEIGHT spans name+wt columns and aligns with Wt fields */
input[name="attr_TotalEquippedWeight"]{
  grid-column: 2 / 4;
  width: 100%;
  min-width: 160px;
}


/* sheet149: Equip Slots weight column header */
.equip-weight-header{
  font-size: 0.85em;
  line-height: 1;
}
.equip-weight-header-text{
  text-align: center;
  font-weight: 700;
}


/* sheet150: Equip Slots column headers */
.equip-header-row{
  margin-bottom: 2px;
}
.equip-header-row .equip-col-header{
  text-align: center;
  font-weight: 700;
  font-size: 0.85em;
  line-height: 1;
}


/* sheet151: tighten Gear & Equipment card width */
.gear-equipment{
  padding-left: calc(var(--card-padding, 10px) - 5px);
  padding-right: calc(var(--card-padding, 10px) - 5px);
}


/* sheet152: tighten Equip Slots row label column by 15px (moves fields closer to labels) */
.equip-slots .equip-row{
  grid-template-columns: 105px 1fr 80px;
}


/* sheet152: TOTAL EQUIPPED WEIGHT slightly narrower but right-aligned with Weight column */
.equip-slots input[name="attr_TotalEquippedWeight"]{
  width: calc(100% - 15px);
  justify-self: end;
}


/* sheet153: Backpack repeating rows + total */
.backpack-card fieldset.repeating_backpack{
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

/* Number repeating rows starting at 6 (after fixed 1–5) */
.backpack-card{
  counter-reset: backpackrep 5;
}
.backpack-card fieldset.repeating_backpack .repitem{
  counter-increment: backpackrep;
}
.backpack-card fieldset.repeating_backpack .repitem .rep-index::before{
  content: counter(backpackrep);
}

/* Separator line before total */
.backpack-card .inv-sep{
  border-top: 1px solid #000;
  margin-top: 2px;
}

/* Total backpack weight row: single field spanning name+weight columns, right-aligned */
.backpack-card .inv-total-row input[name="attr_TotalBackpackWeight"]{
  grid-column: 2 / 4;
  width: 100%;
  justify-self: end;
  min-width: 160px;
}


/* sheet154: Backpack remove numbered column + consistent spacing */
.backpack-card .inv-grid{
  gap: 6px;
}
.backpack-card .inv-row{
  grid-template-columns: 1fr 80px;
  gap: 6px;
}
.backpack-card .inv-row input{
  width: 100%;
}

/* Total backpack weight spans both columns */
.backpack-card .inv-total-row input[name="attr_TotalBackpackWeight"]{
  grid-column: 1 / 3;
  justify-self: end;
}


/* sheet154: Equip Slots label column 15px tighter */
.equip-slots .equip-row{
  grid-template-columns: 90px 1fr 80px;
}

/* sheet154: Equipped Item inputs 10px narrower, keep right edge aligned (gap to Weight stays the same) */
.equip-slots input[placeholder$=" Equip"]{
  width: calc(100% - 10px);
  justify-self: end;
}


/* sheet155: Carried Item inputs match Equipped Item input width */
.equip-slots input[placeholder^="Carried Item"]{
  width: calc(100% - 10px);
  justify-self: end;
}


/* sheet155: Backpack repeating row spacing matches fixed rows */
.backpack-card fieldset.repeating_backpack{
  display: block;
}
.backpack-card fieldset.repeating_backpack .repitem{
  margin: 0;
}
.backpack-card fieldset.repeating_backpack .repitem + .repitem{
  margin-top: 6px;
}
.backpack-card fieldset.repeating_backpack .repitem .inv-row{
  margin: 0;
}


/* sheet170: Gear & Equipment - reduce all Wt fields by 25% (80px -> 60px) and keep spacing consistent */
.gear-equipment .inv-row{
  grid-template-columns: 28px 1fr 60px;
  gap: 6px;
}

.gear-equipment .equip-row{
  grid-template-columns: 120px 1fr 60px;
  gap: 6px;
}

/* Ensure all Wt inputs within Gear & Equipment fit the new column width */
.gear-equipment input[placeholder^="Wt"]{
  width: 100%;
  max-width: 60px;
  box-sizing: border-box;
}


/* sheet171 – Equip Slots: shift item + weight columns 20px left and narrow card by 20px */

/* Reduce right padding / width so card is 20px thinner */
.gear-equipment .equip-slots{
  padding-right: 10px;
  padding-left: 10px;
}

/* Shift Equipped Item + Weight columns left */
.gear-equipment .equip-row{
  grid-template-columns: 120px calc(1fr - 20px) 60px;
  column-gap: 6px;
}

/* Ensure inputs still fill their columns */
.gear-equipment .equip-row input{
  width: 100%;
  box-sizing: border-box;
}


/* sheet172 – Equip Slots: shift item + weight columns 30px left and narrow card by 30px */

/* Make the Equip Slots card 30px thinner */
.gear-equipment .equip-slots{
  padding-right: 5px;
  padding-left: 5px;
}

/* Shift Equipped Item + Weight columns 30px closer to labels */
.gear-equipment .equip-row{
  grid-template-columns: 120px calc(1fr - 30px) 60px;
  column-gap: 6px;
}

/* Inputs fill their adjusted columns */
.gear-equipment .equip-row input{
  width: 100%;
  box-sizing: border-box;
}


/* sheet173 – Fix Equip Slots shift: use valid grid sizing (no calc with fr) */

/* Make Equip Slots subcard 30px thinner by reducing its width (left edge stays put) */
.gear-equipment .equip-slots{
  box-sizing: border-box;
  width: calc(100% - 30px);
}

/* Shift Equipped Item + Weight columns 30px left by shrinking the label column */
.gear-equipment .equip-slots .equip-row{
  grid-template-columns: 90px 1fr 60px;
  gap: 6px;
}


/* sheet174 – Backpack field widths match Equip Slots (Equipped Item + Weight columns) */

/* Match Backpack subcard overall width to Equip Slots subcard width */
.gear-equipment .backpack-card{
  box-sizing: border-box;
  width: calc(100% - 30px);
}

/* Use the same column sizing as Equip Slots: label-area 90px, item 1fr, weight 60px */
.gear-equipment .backpack-card .inv-row{
  grid-template-columns: 90px 1fr 60px;
  gap: 6px;
}

/* Keep the numbered squares at the right edge of the 90px label area */
.gear-equipment .backpack-card .inv-label{
  justify-self: end;
}

/* Ensure Backpack Item + Wt inputs fill their columns (matching Equip Slots behavior) */
.gear-equipment .backpack-card .inv-row input{
  width: 100%;
  box-sizing: border-box;
}

/* TOTAL BACKPACK WEIGHT row uses the same grid sizing */
.gear-equipment .backpack-card .inv-total-row{
  grid-template-columns: 90px 1fr 60px;
  gap: 6px;
}


/* sheet176 – Backpack: item column min/max widths + placeholder fix support */
.gear-equipment .backpack-card .inv-row{
  grid-template-columns: 90px minmax(100px, 350px) 60px !important;
  gap: 6px;
}


/* sheet177 – Backpack: match Equip Slots right edge + responsive item field (100–350px) */

/* Match Backpack subcard right edge to Equip Slots (which is 30px thinner) */
.gear-equipment .backpack-card{
  box-sizing: border-box;
  width: calc(100% - 30px);
}

/* Make Backpack rows use the same overall column geometry as Equip Slots:
   label 90px, item flexible, wt 60px */
.gear-equipment .backpack-card .inv-row,
.gear-equipment .backpack-card .inv-total-row{
  grid-template-columns: 90px minmax(100px, 1fr) 60px !important;
  gap: 6px;
}

/* Backpack Item fields: shrink to 100px, grow with column, but cap at 350px */
.gear-equipment .backpack-card input[placeholder="Backpack Item"]{
  min-width: 100px !important;
  max-width: 350px !important;
  width: 100%;
  box-sizing: border-box;
}

/* Keep Wt fields sized to the 60px column */
.gear-equipment .backpack-card input[placeholder^="Wt"]{
  width: 100%;
  max-width: 60px;
  box-sizing: border-box;
}


/* sheet178 – Backpack: hug content (<=5px extra) and prevent Item/Wt overlap */

/* Make Backpack subcard size to its contents instead of stretching */
.gear-equipment .backpack-card{
  box-sizing: border-box;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding-right: 5px; /* <=5px beyond contents */
}

/* Lock row geometry so item column cannot spill into Wt column */
.gear-equipment .backpack-card .inv-row,
.gear-equipment .backpack-card .inv-total-row{
  grid-template-columns: 90px minmax(100px, 350px) 60px !important;
  column-gap: 6px;
}

/* Critical: allow grid items to shrink within their column (prevents overlap in CSS grid) */
.gear-equipment .backpack-card .inv-row > *,
.gear-equipment .backpack-card .inv-total-row > *{
  min-width: 0;
}

/* Inputs fill their own columns, never exceeding them */
.gear-equipment .backpack-card input[placeholder="Backpack Item"]{
  width: 100%;
  min-width: 100px !important;
  max-width: 350px !important;
  box-sizing: border-box;
}

.gear-equipment .backpack-card input[placeholder^="Wt"]{
  width: 100%;
  max-width: 60px;
  box-sizing: border-box;
}


/* sheet179 – Backpack: 10px gap between Item and Wt; right edge within 10px of Wt column */

/* Set the gap between Backpack Item and Wt columns to 10px (between col 2 and col 3) */
.gear-equipment .backpack-card .inv-row,
.gear-equipment .backpack-card .inv-total-row{
  column-gap: 10px;
}

/* Keep Backpack card right padding to 10px so right edge is within 10px of Wt column */
.gear-equipment .backpack-card{
  padding-right: 10px;
}


/* sheet181 – Backpack Test: remove label column, hug content, keep inputs near left edge */
.gear-equipment .backpack-test{
  box-sizing: border-box;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding-left: 5px;
  padding-right: 5px;
}

.gear-equipment .backpack-test .equip-row{
  grid-template-columns: 1fr 60px;
  gap: 6px;
  justify-content: start;
}

/* Ensure inputs shrink properly inside CSS grid (prevents overlap) */
.gear-equipment .backpack-test .equip-row > *{
  min-width: 0;
}

.gear-equipment .backpack-test .equip-row input{
  width: 100%;
  box-sizing: border-box;
}


/* sheet183 – Backpack Test: fix header row to 2 columns (no wrapped header labels) */
.gear-equipment .backpack-test .equip-row.equip-header-row{
  grid-template-columns: 1fr 60px;
  gap: 6px;
}

.gear-equipment .backpack-test .equip-row.equip-header-row .equip-col-header{
  text-align: center;
}


/* sheet189 – Backpack Test: total row spans full width (no extra columns) */
.gear-equipment .backpack-test .equip-row.backpack-total-row{
  grid-template-columns: 1fr;
}


/* sheet197a – Backpack: repeating rows without affecting card width/layout */
.gear-equipment .backpack-test fieldset.repeating_backpack{
  margin: 0;
  padding: 0;
  border: 0;
}

.gear-equipment .backpack-test .repcontainer,
.gear-equipment .backpack-test .repitem{
  margin: 0;
  padding: 0;
}

/* Keep repeating row aligned with existing grid */
.gear-equipment .backpack-test fieldset.repeating_backpack .equip-row{
  grid-template-columns: 1fr 60px;
  gap: 6px;
}


/* sheet198a – Gold & Money card uses existing equip-grid styling; keep it compact */
.card.gold-money .equip-grid{ margin: 0; }


/* sheet199b – constrain Gold & Money card size and field widths */
.card.gold-money{
  max-height: 60px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.card.gold-money .card-title{
  margin-bottom: 4px;
}

.card.gold-money .equip-grid{
  gap: 4px;
}

.card.gold-money .equip-row{
  grid-template-columns: 1.5fr 0.5fr;
}

.card.gold-money input[name="attr_Gold"]{
  max-width: 50%;
}

.card.gold-money input[name="attr_GemsValuables"]{
  width: 100%;
}


/* sheet200a – Gold & Money moved inside Gear & Equipment as first subcard */
.gear-equipment .gold-money-subcard .equip-grid{
  margin: 0;
}

.gear-equipment .gold-money-subcard .equip-row{
  grid-template-columns: 1.5fr 0.5fr; /* Gems wider, Gold narrower */
  gap: 6px;
}

.gear-equipment .gold-money-subcard{
  padding-bottom: 6px;
}

.gear-equipment .gold-money-subcard .equip-sep{
  margin: 2px 0;
}


/* sheet202b – Make Gold & Money subcard width match Equip Slots at minimum size (scoped) */
.gear-equipment .gold-money-subcard{
  box-sizing: border-box;
  width: calc(100% - 30px);
  padding-left: 5px;
  padding-right: 5px;
}


/* sheet205 – Gold & Money: resizable Gems & Valuables textarea (starts taller) */
.gear-equipment .gold-money-subcard textarea.gm-gems-text{
  width: 100%;
  min-height: 26px;
  height: 26px;
  resize: vertical;
  box-sizing: border-box;
}


/* sheet205 – Boot Sheath: remove number column */
.inv-sheaths .boot-sheath .inv-row{
  grid-template-columns: 1fr 45px;
}


/* sheet206 – Boot Sheath: delete numbered squares */
.inv-sheaths .boot-sheath .inv-label{
  display: none;
}

.inv-sheaths .boot-sheath .inv-row{
  grid-template-columns: 1fr 45px;
}


/* sheet207 – Skills card: avoid grid row stretching and tighten height */
.skills-card{
  align-self: start;           /* stop CSS grid stretching this card to match neighbor height */
  padding-bottom: 10px;        /* keep ~10px below last content */
}

/* Total Skill Ranks box: 50% width, no impact on card width */
.skills-card input[name="attr_Total_Skill_Ranks"]{
  width: 50%;
  max-width: 50%;
  min-width: 0;
}


/* sheet208 – Skills: shift Total Skill Ranks label + field 20px right */
.skills-card .skills-totalranks{
  margin-left: 20px;
}


/* sheet211: ensure Belt Pouches item fields remain readable */
.belt-pouches input[placeholder^="Pouch Item"]{
  min-width: 100px;
}


/* sheet214: Belt Pouches total weight row */
.belt-pouches .pouch-total-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 45px;
  gap: 6px;
  align-items: center;
}
.belt-pouches .pouch-total-row input{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* sheet217: Total weight row (shared layout) */
.pouch-total-row{
  display: grid;
  grid-template-columns: 1fr;
}
.pouch-total-row input{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* sheet217: ensure Sheaths & Bandoliers item fields remain readable (matches Boot/Belt behavior) */
.inv-sheaths .boot-sheath .inv-row input:first-child{
  min-width: 100px;
}


/* sheet219: Capacity & Encumbrance header note */
.cap-grid-lefthead{
  text-align: left;
}
.cap-grid-lefthead .cap-grid-note{
  font-weight: normal;
  font-style: italic;
  font-size: 10px;
  line-height: 1.2;
}


/* sheet223: Capacity & Encumbrance – widen With/Without Backpack fields by 25px (grow left, keep right edge) */
.capacity-encumbrance .cap-row{
  grid-template-columns: 1fr 95px; /* was 70px */
}

/* sheet223: Skills – prevent Total column inputs from compressing below 25px */
.skill-row > input:first-child{
  min-width: 25px;
  box-sizing: border-box;
}


/* sheet224: enforce minimum width for Skills Total column */
.skill-row > input:first-child{
  min-width: 35px !important;
  width: auto;
  box-sizing: border-box;
}


/* sheet225: Capacity & Encumbrance – combined totals grid */
.capacity-encumbrance .cap-totals-grid{
  display: grid;
  grid-template-columns: 1fr 95px 95px;
  gap: 6px;
  align-items: center;
}

.capacity-encumbrance .cap-totals-head{
  font-weight: 700;
  font-size: 0.85em;
}

.capacity-encumbrance .cap-totals-left{
  text-align: left;
}

.capacity-encumbrance .cap-totals-sep{
  grid-column: 1 / -1;
  border-top: 1px solid #000;
  margin: 2px 0;
}

.capacity-encumbrance .cap-totals-label{
  font-size: 0.9em;
}

.capacity-encumbrance .cap-totals-grid input{
  width: 100%;
  box-sizing: border-box;
}


/* sheet226: Capacity & Encumbrance – evenly distribute totals columns (no width increase) */
.capacity-encumbrance .cap-totals-grid{
  grid-template-columns: 1fr 1fr 1fr;
}

/* sheet226: make TOTALS header 2px larger */
.capacity-encumbrance .cap-totals-head.cap-totals-left{
  font-size: calc(0.85em + 2px);
}

/* Skills card: physical-skill note (does not affect column sizing) */
.skills-card .skills-physnote{
  font-size: 10px;
  font-style: italic;
  font-weight: normal;
  margin: 4px 0 2px 0;
}


/* sheet231: place Total Skill Ranks input adjacent to label */
.skills-totalranks{
  display: flex;
  align-items: center;
  gap: 6px;
}
.skills-totalranks label{
  white-space: nowrap;
}
.skills-totalranks input{
  width: auto;
}


/* sheet235: Align Backpack, Sheaths & Bandoliers, and Belt Pouches cards on the same row when space allows */
.inv-sheaths{
  display: contents;
}

/* Shared sizing: match max width across the three cards */
.gear-equipment .backpack-test,
.inv-sheaths .boot-sheath,
.inv-sheaths .belt-pouches{
  display: inline-block;
  vertical-align: top;
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
}


/* sheet236: third tab (Spells & Magic) */
#tab-magic:checked ~ .tabs label[for="tab-magic"]{
  background: #fff;
  position: relative;
  top: 1px;
}
#tab-magic:checked ~ .page-magic{ display:block; }

/* Spells & Magic page styling */

.magic-card{
  padding-top: 8px;
}

.magic-subtitle{
  font-weight: 700;
  margin-bottom: 10px;
}

.magic-row{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-bottom: 10px;
}

.magic-label{
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.5px;
}

.magic-pair{
  display: flex;
  align-items: center;
  gap: 8px;
}

.magic-pair.wide{
  flex: 1 1 260px;
  justify-content: flex-start;
}

.magic-group{
  display: flex;
  align-items: center;
  gap: 10px;
}

.magic-inline{
  display: flex;
  align-items: center;
  gap: 8px;
}

.magic-box{
  background: #f2f2f2;
  border: 2px solid #000;
  height: 26px;
  box-sizing: border-box;
}

.magic-box.small{ width: 46px; }
.magic-box.medium{ width: 90px; }

.magic-notes{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: start;
}

.magic-notes-label{
  font-weight: 700;
  padding-top: 4px;
  white-space: nowrap;
}

.magic-notes-box{
  grid-column: 2 / -1;
  height: 26px;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  resize: none;
  padding: 2px 4px;
  box-sizing: border-box;
}


/* sheet238: Spells & Magic – match card header font styling */
.page-magic .magic-card{
  font-size: 13px;
}

.page-magic .magic-subtitle{
  font-size: 13px;
  font-weight: bold;
}

/* Match all text in the card to the header style (no small-caps treatment) */
.page-magic .magic-label{
  font-weight: bold;
  font-variant: normal;
  letter-spacing: normal;
}

/* sheet238: remove bottom line from Spellcasting Notes boxes */
.page-magic .magic-notes-box{
  border-bottom: none !important;
}


/* sheet239: Spells & Magic layout adjustments */
.page-magic .magic-row{
  flex-wrap: nowrap;
  gap: 12px;
}

/* Reduce CastingMod box width by ~35% (from 90px to 58px) */
.page-magic .magic-box.medium{ width: 58px; }

/* Let notes boxes span full card width now that label removed */
.page-magic .magic-notes{
  grid-template-columns: 1fr;
}
.page-magic .magic-notes-box{
  grid-column: 1 / -1;
}


/* sheet240: Spellcasting Notes single resizable box */
.page-magic .magic-notes-box{
  height: 60px;
  resize: vertical;
}


/* sheet241: responsive wrapping + minimum width for Spellcasting Information */
.page-magic .magic-card{
  min-width: 350px;
}

.page-magic .magic-row{
  flex-wrap: wrap;
}


/* sheet242: adjust Spellcasting Information card minimum width after label shortening */
.page-magic .magic-card{
  min-width: 335px;
}


/* sheet243: Spell Level 0 (SL0) card (Arial only) */
.sl0-card{
  position: relative;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 20px 14px 12px 14px;
  box-sizing: border-box;
}

.sl0-title{
  position: absolute;
  top: -11px;
  left: 10px;
  background: #fff;
  padding: 2px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
}

.sl0-toprow{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-bottom: 12px;
}

.sl0-topitem{
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.sl0-box{
  width: 58px;
  height: 30px;
  border: 2px solid #000;
  background: #f2f2f2;
  box-sizing: border-box;
}

.sl0-knownrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.sl0-knownlabel{
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

.sl0-knownline{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}

.sl0-sep{
  border-top: 2px solid #000;
  margin: 8px 0 14px 0;
}

.sl0-spellbox{
  border: 2px solid #000;
  border-radius: 4px;
  padding: 10px 10px 6px 10px;
  box-sizing: border-box;
}

.sl0-spellrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

/* Spell Info: Spell Name row adds Casting Time on the same line */
.sl0-spellrow.sl0-spellrow-name{
  grid-template-columns: auto 1fr auto 1fr;
}

.sl0-spelllabel{
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}

.sl0-line{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}

.sl0-line.short{
  max-width: 240px;
}


/* sheet244: SL0 card border thickness + layout fixes */
.sl0-card{
  border: 1px solid #777;   /* match other cards */
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  position: static;
}

/* Remove the prior floating title styling if still present */
.sl0-title{ display: none; }

/* Force top row to stay on one line */
.sl0-toprow{
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}

/* Reduce the three small boxes by ~65% (58px -> ~20px) */
.sl0-box{
  width: 20px;
  height: 26px;
}

/* Resizable Spells Known box */
.sl0-knownarea{
  width: 100%;
  min-height: 28px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}

/* Resizable Spell Description box */
.sl0-descarea{
  width: 100%;
  min-height: 32px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}

/* Keep Spell Name line as underline but align nicely with textarea below */
.sl0-spellrow{
  align-items: start;
}


/* sheet245: refine SL0 borders + field default heights + label sizing */

/* match normal thin borders for separator and spell entry box */
.sl0-sep{
  border-top: 1px solid #777;
}

.sl0-spellbox{
  border: 1px solid #777;
}

/* default (collapsed) heights before user expands */
.sl0-knownarea{
  min-height: 25px;
  height: 25px;
}

.sl0-descarea{
  min-height: 20px;
  height: 20px;
}

/* Spell Name / Spell Description label font size -2px */
.sl0-spelllabel{
  font-size: 16px;
}

/* Adjust associated inputs to visually match the smaller labels */
.sl0-line{
  height: 20px;
}

.sl0-line.short{
  max-width: 210px;
}


/* sheet246: enforce max collapsed height for SL0 textareas */
.sl0-knownarea{
  height: 20px;
  min-height: 20px;
}

.sl0-descarea{
  height: 20px;
  min-height: 20px;
}


/* sheet248: allow user resize to change height (do NOT lock height with !important) */
.page-magic .sl0-card textarea.sl0-knownarea,
.page-magic .sl0-card textarea.sl0-descarea{
  height: 20px;              /* initial visible height */
  min-padding: 0 4px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}


/* sheet249: SL0 textareas start at 20px but remain user-resizable */
.page-magic .sl0-card textarea.sl0-knownarea,
.page-magic .sl0-card textarea.sl0-descarea{
  height: 20px;
  min-height: 20px;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet250: restore tab selected (white/pressed) vs unselected (grey) styling */
.tabs{
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.tabs .tabbtn{
  border: 1px solid #333 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  user-select: none !important;
  font-weight: 700 !important;
  background: #e0e0e0 !important; /* unselected grey */
  position: relative !important;
  top: 0 !important;
}

/* Active tab: white + looks pressed */
#tab-front:checked ~ .tabs label[for="tab-front"],
#tab-back:checked  ~ .tabs label[for="tab-back"],
#tab-magic:checked ~ .tabs label[for="tab-magic"]{
  background: #fff !important;
  top: 1px !important;
}


/* sheet251: Spellcasting Information - Spells Known min-height +5px */
.page-magic .magic-notes-box{
  min-height: 65px; /* was 60px in sheet240 */
}

/* sheet251: SL0 card - Spells Known min-height +5px */
.page-magic .sl0-card textarea.sl0-knownarea{
  min-height: 25px;
}

/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
.page-magic .sl0-card{
  min-width: 335px;
}

/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
.page-magic .sl0-box{
  min-width: 25px;
}


/* sheet252: SL0 Spell Description height matches Spells Known */
.page-magic .sl0-card textarea.sl0-descarea{
  min-height: 25px;
}



/* sheet258: Spell Info card (extracted from SL0 spell box) */
.page-magic .spellinfo-card{
  min-width: 335px; /* match magic-card and sl0-card */
}

/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
.page-magic .spellinfo-card textarea.sl0-descarea{
  height: 20px;
  min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}

/* sheet260: SL0 Spell Info repeating section (+Add) */
.page-magic .sl0-spellinfo-repeat-note{
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.9;
}

.page-magic .sl0-addhint{
  font-weight: 700;
}

/* Slight separation between repeating Spell Info entries */
.page-magic .sl0-spellbox-repeat{
  margin-top: 6px;
}


/* Spell Info – minimum width for Spell Name and Casting Time */
.sl0-spellrow-name .sl0-line.short {
  min-width: 60px;
}



/* =========================
   Responsive containment fixes
   Spell Level 0 + Spell Info
   ========================= */

/* Ensure all SL0 elements size within their containers */
.sl0-card, .sl0-card * {
  box-sizing: border-box;
}

/* Prevent any child content from visually spilling out of the card */
.sl0-card {
  overflow: hidden;
}

/* Allow top-row items to wrap inside the card instead of overflowing */
.sl0-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}

/* Make each top item flexible and allow it to shrink within the card */
.sl0-topitem {
  flex: 1 1 240px;
  min-width: 0;
}

/* Keep the little number boxes from forcing overflow */
.sl0-topitem .sl0-box {
  max-width: 100%;
}

/* Spells Known row: allow textarea to shrink/wrap within card */
.sl0-knownrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
}

.sl0-knownlabel {
  flex: 0 0 auto;
  min-width: 0;
}

.sl0-knownarea {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}

/* Spell Info rows: wrap on narrow screens, keep fields inside */
.sl0-spellrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}

.sl0-spelllabel {
  flex: 0 0 auto;
  min-width: 0;
}

/* Inputs should be allowed to shrink instead of overflowing */
.sl0-spellrow input.sl0-line,
.sl0-spellrow textarea {
  min-width: 0;
  max-width: 100%;
}

/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
.sl0-spellrow-name input.sl0-line.short {
  flex: 1 1 240px;   /* grows, shrinks, wraps */
  min-width: 60px;   /* your requested minimum */
  max-width: 100%;
}

/* Description textarea should always stay within the card */
.sl0-descarea {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}

/* Repeat spell boxes should also clip/wrap properly */
.sl0-spellbox,
.sl0-spellbox-repeat {
  max-width: 100%;
  overflow: hidden;
}


/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
.sl0-spellrow-name {
  display: flex;
  flex-wrap: nowrap; /* stay on one row */
  align-items: center;
}

.sl0-spellrow-name .sl0-line.name {
  flex: 3 1 0;       /* 50% wider */
  min-width: 60px;
}

.sl0-spellrow-name .sl0-line.time,
.sl0-spellrow-name .sl0-line.range {
  flex: 2 1 0;
  min-width: 60px;
}



/* =========================
   Spell Info containment (responsive)
   Keeps content inside Spell Info card on narrow widths
   ========================= */
.sl0-card, .sl0-card * { box-sizing: border-box; }

.sl0-card,
.sl0-spellbox,
.sl0-spellbox-repeat {
  max-width: 100%;
  overflow: hidden; /* prevent spill outside card */
}

.sl0-spellrow,
.sl0-knownrow,
.sl0-toprow {
  min-width: 0;
  max-width: 100%;
}

.sl0-spellrow input,
.sl0-spellrow textarea,
.sl0-knownrow textarea,
.sl0-toprow input {
  min-width: 0;
  max-width: 100%;
}

/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
.sl0-spellrow-name { flex-wrap: nowrap; }

/* If the window becomes too narrow to honor min-widths + labels,
   allow wrapping within the Spell Info row instead of overflowing. */
@media (max-width: 700px) {
  .sl0-spellrow-name { flex-wrap: wrap; }
  .sl0-spellrow-name .sl0-spelllabel { white-space: nowrap; }
}



/* Spell Info – keep each label+field together as a unit */
.sl0-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* prevents label and its input from splitting lines */
  min-width: 0;
}

/* Allow the row to wrap by pair when needed, without breaking pairs */
@media (max-width: 700px){
  .sl0-spellrow-name{ flex-wrap: wrap; }
}

/* Ensure inputs inside pairs can still shrink within the card */
.sl0-spellpair .sl0-line{
  min-width: 60px; /* your minimum */
  max-width: 100%;
}


/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
.sl0-spellrow-name{
  display:flex;
  gap: 6px 10px;
  align-items:center;
  max-width:100%;
  min-width:0;
}

/* Each label+input pair stays together */
.sl0-spellpair{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}

/* Proportional widths (Spell Name 50% wider than Time/Range) */
.sl0-spellpair.pair-name{ flex:3 1 0; }
.sl0-spellpair.pair-time{ flex:2 1 0; }
.sl0-spellpair.pair-range{ flex:2 1 0; }

/* Inputs shrink inside their pair; keep your minimum */
.sl0-spellpair .sl0-line{
  flex:1 1 0;
  min-width:60px;
  max-width:100%;
}

/* Responsive: if too narrow, wrap by PAIR (never split label from field) */
@media (max-width: 700px){
  .sl0-spellrow-name{ flex-wrap:wrap; }
}



/* Spell Info – final overrides for pair classes used in HTML */
.sl0-spellrow-name{ flex-wrap: wrap; }
.sl0-spellpair.namepair{ flex: 3 1 0; }
.sl0-spellpair.timepair{ flex: 2 1 0; }
.sl0-spellpair.rangepair{ flex: 2 1 0; }



/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
.sl0-spellrow-name{
  display:flex;
  flex-wrap: wrap;   /* allow pairs to wrap to lower rows */
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.sl0-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* label and its field stay on same line */
  min-width: 0;
  max-width: 100%;
}

/* Proportional widths by PAIR so the whole unit wraps together */
.sl0-spellpair-name{  flex: 3 1 0; }
.sl0-spellpair-time{  flex: 2 1 0; }
.sl0-spellpair-range{ flex: 2 1 0; }

/* Inputs inside pairs can shrink but respect your minimum */
.sl0-spellpair .sl0-line{
  min-width: 60px;
  max-width: 100%;
}



/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
.sl0-spellrow-name{
  flex-wrap: wrap !important;
}

/* Prevent pairs from shrinking to avoid suppressing wrapping */
.sl0-spellpair{
  flex-shrink: 0;
}



/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
   This makes Casting Time / Range drop to a new row when the window is narrow,
   while keeping each label attached to its field. */
.sl0-spellrow-name{
  width: 100%;
  max-width: 100%;
}

/* Minimum widths are set to the pair (label+field), not just the input,
   so pairs stop compressing and instead wrap. */
.sl0-spellpair-name{  min-width: 320px; }
.sl0-spellpair-time{  min-width: 220px; }
.sl0-spellpair-range{ min-width: 200px; }

/* Keep 50% wider intent while still permitting wrap by pair */
.sl0-spellpair-name{ flex: 3 0 auto; }
.sl0-spellpair-time,
.sl0-spellpair-range{ flex: 2 0 auto; }



/* Spell Info – force Casting Time + Range pairs to drop to new rows on narrow widths */
@media (max-width: 620px){
  .sl0-spellpair-time,
  .sl0-spellpair-range{
    flex-basis: 100% !important;   /* each pair becomes a full row */
    width: 100% !important;
  }
}



/* ===== Spell Info wrap fix (authoritative) =====
   Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
   and older grid/flex rules conflict. These rules are appended LAST and use
   high specificity/!important so the Spell Info row actually wraps by pair. */

/* Ensure the Spell Name row is flex (not grid) and can wrap */
.sl0-spellbox .sl0-spellrow.sl0-spellrow-name{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Keep each label+field together */
.sl0-spellbox .sl0-spellrow.sl0-spellrow-name .sl0-spellpair{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0; /* don't compress forever; wrap instead */
  min-width: 0;
  max-width: 100%;
}

/* Inputs still respect your minimum and stay within the card */
.sl0-spellbox .sl0-spellrow.sl0-spellrow-name .sl0-spellpair .sl0-line{
  min-width: 60px;
  max-width: 100%;
}

/* On narrow widths, force Casting Time + Range pairs onto their own rows */
@media (max-width: 700px){
  .sl0-spellbox .sl0-spellrow.sl0-spellrow-name .timepair,
  .sl0-spellbox .sl0-spellrow.sl0-spellrow-name .rangepair{
    flex-basis: 100% !important;
    width: 100% !important;
  }
}



/* ===== Collapsible Spell Level 0 Card (SL0) ===== */
.sl0-toggle{
  position: absolute;
  left: -9999px;
}

/* Button styled like Identity & XP */
.sl0-toggle-btn{
  display: inline-block;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  margin: 0 0 6px 0;
  background: #fff;
  position: relative;
  top: 1px;
  padding-right: 22px; /* room for arrow */
}

.sl0-toggle-btn::after{
  content: "◀"; /* collapsed */
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}

.sl0-toggle:checked + .sl0-toggle-btn::after{
  content: "▼"; /* expanded */
  color: #000;
}

.sl0-toggle-btn:hover{
  filter: brightness(1.05);
}

/* Collapse/expand: checkbox and label directly before .sl0-body */
.sl0-toggle:not(:checked) + .sl0-toggle-btn + .sl0-body{
  display: none;
}



/* ===== Collapsible Spell Level 1 Card (SL1) ===== */
.sl1-toggle{
  position: absolute;
  left: -9999px;
}

.sl1-toggle-btn{
  display: inline-block;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  margin: 0 0 6px 0;
  background: #fff;
  position: relative;
  top: 1px;
  padding-right: 22px; /* room for arrow */
}

.sl1-toggle-btn::after{
  content: "◀"; /* collapsed */
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}

.sl1-toggle:checked + .sl1-toggle-btn::after{
  content: "▼"; /* expanded */
  color: #000;
}

.sl1-toggle-btn:hover{
  filter: brightness(1.05);
}

.sl1-toggle:not(:checked) + .sl1-toggle-btn + .sl1-body{
  display: none;
}


/* ===== SL1 structural style mirror (from SL0) ===== */



/* sheet243: Spell Level 0 (SL0) card (Arial only) */
.sl1-card{
  position: relative;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 20px 14px 12px 14px;
  box-sizing: border-box;
}


.sl1-title{
  position: absolute;
  top: -11px;
  left: 10px;
  background: #fff;
  padding: 2px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
}


.sl1-toprow{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-bottom: 12px;
}


.sl1-topitem{
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}


.sl1-box{
  width: 58px;
  height: 30px;
  border: 2px solid #000;
  background: #f2f2f2;
  box-sizing: border-box;
}


.sl1-knownrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}


.sl1-knownlabel{
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}


.sl1-knownline{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl1-sep{
  border-top: 2px solid #000;
  margin: 8px 0 14px 0;
}


.sl1-spellbox{
  border: 2px solid #000;
  border-radius: 4px;
  padding: 10px 10px 6px 10px;
  box-sizing: border-box;
}


.sl1-spellrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}


/* Spell Info: Spell Name row adds Casting Time on the same line */
.sl1-spellrow.sl1-spellrow-name{
  grid-template-columns: auto 1fr auto 1fr;
}


.sl1-spelllabel{
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}


.sl1-line{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl1-line.short{
  max-width: 240px;
}



/* sheet244: SL0 card border thickness + layout fixes */
.sl1-card{
  border: 1px solid #777;   /* match other cards */
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  position: static;
}


/* Remove the prior floating title styling if still present */
.sl1-title{ display: none; }


/* Force top row to stay on one line */
.sl1-toprow{
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}


/* Reduce the three small boxes by ~65% (58px -> ~20px) */
.sl1-box{
  width: 20px;
  height: 26px;
}


/* Resizable Spells Known box */
.sl1-knownarea{
  width: 100%;
  min-height: 28px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Resizable Spell Description box */
.sl1-descarea{
  width: 100%;
  min-height: 32px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Keep Spell Name line as underline but align nicely with textarea below */
.sl1-spellrow{
  align-items: start;
}



/* sheet245: refine SL0 borders + field default heights + label sizing */

/* match normal thin borders for separator and spell entry box */
.sl1-sep{
  border-top: 1px solid #777;
}


.sl1-spellbox{
  border: 1px solid #777;
}


/* default (collapsed) heights before user expands */
.sl1-knownarea{
  min-height: 25px;
  height: 25px;
}


.sl1-descarea{
  min-height: 20px;
  height: 20px;
}


/* Spell Name / Spell Description label font size -2px */
.sl1-spelllabel{
  font-size: 16px;
}


/* Adjust associated inputs to visually match the smaller labels */
.sl1-line{
  height: 20px;
}


.sl1-line.short{
  max-width: 210px;
}



/* sheet246: enforce max collapsed height for SL0 textareas */
.sl1-knownarea{
  height: 20px;
  min-height: 20px;
}


.sl1-descarea{
  height: 20px;
  min-height: 20px;
}



/* sheet248: allow user resize to change height (do NOT lock height with !important) */
.page-magic .sl1-card textarea.sl1-knownarea,
.page-magic .sl1-card textarea.sl1-descarea{
  height: 20px;              /* initial visible height */
  min-padding: 0 4px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}



/* sheet249: SL0 textareas start at 20px but remain user-resizable */
.page-magic .sl1-card textarea.sl1-knownarea,
.page-magic .sl1-card textarea.sl1-descarea{
  height: 20px;
  min-height: 20px;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet251: SL0 card - Spells Known min-height +5px */
.page-magic .sl1-card textarea.sl1-knownarea{
  min-height: 25px;
}


/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
.page-magic .sl1-card{
  min-width: 335px;
}


/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
.page-magic .sl1-box{
  min-width: 25px;
}



/* sheet252: SL0 Spell Description height matches Spells Known */
.page-magic .sl1-card textarea.sl1-descarea{
  min-height: 25px;
}


/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
.page-magic .spellinfo-card textarea.sl1-descarea{
  height: 20px;
  min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet260: SL0 Spell Info repeating section (+Add) */
.page-magic .sl1-spellinfo-repeat-note{
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.9;
}


.page-magic .sl1-addhint{
  font-weight: 700;
}


/* Slight separation between repeating Spell Info entries */
.page-magic .sl1-spellbox-repeat{
  margin-top: 6px;
}



/* Spell Info – minimum width for Spell Name and Casting Time */
.sl1-spellrow-name .sl1-line.short {
  min-width: 60px;
}




/* =========================
   Responsive containment fixes
   Spell Level 0 + Spell Info
   ========================= */

/* Ensure all SL0 elements size within their containers */
.sl1-card, .sl1-card * {
  box-sizing: border-box;
}


/* Prevent any child content from visually spilling out of the card */
.sl1-card {
  overflow: hidden;
}


/* Allow top-row items to wrap inside the card instead of overflowing */
.sl1-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}


/* Make each top item flexible and allow it to shrink within the card */
.sl1-topitem {
  flex: 1 1 240px;
  min-width: 0;
}


/* Keep the little number boxes from forcing overflow */
.sl1-topitem .sl1-box {
  max-width: 100%;
}


/* Spells Known row: allow textarea to shrink/wrap within card */
.sl1-knownrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
}


.sl1-knownlabel {
  flex: 0 0 auto;
  min-width: 0;
}


.sl1-knownarea {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}


/* Spell Info rows: wrap on narrow screens, keep fields inside */
.sl1-spellrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}


.sl1-spelllabel {
  flex: 0 0 auto;
  min-width: 0;
}


/* Inputs should be allowed to shrink instead of overflowing */
.sl1-spellrow input.sl1-line,
.sl1-spellrow textarea {
  min-width: 0;
  max-width: 100%;
}


/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
.sl1-spellrow-name input.sl1-line.short {
  flex: 1 1 240px;   /* grows, shrinks, wraps */
  min-width: 60px;   /* your requested minimum */
  max-width: 100%;
}


/* Description textarea should always stay within the card */
.sl1-descarea {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}


/* Repeat spell boxes should also clip/wrap properly */
.sl1-spellbox,
.sl1-spellbox-repeat {
  max-width: 100%;
  overflow: hidden;
}



/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
.sl1-spellrow-name {
  display: flex;
  flex-wrap: nowrap; /* stay on one row */
  align-items: center;
}


.sl1-spellrow-name .sl1-line.name {
  flex: 3 1 0;       /* 50% wider */
  min-width: 60px;
}


.sl1-spellrow-name .sl1-line.time,
.sl1-spellrow-name .sl1-line.range {
  flex: 2 1 0;
  min-width: 60px;
}




/* =========================
   Spell Info containment (responsive)
   Keeps content inside Spell Info card on narrow widths
   ========================= */
.sl1-card, .sl1-card * { box-sizing: border-box; }


.sl1-card,
.sl1-spellbox,
.sl1-spellbox-repeat {
  max-width: 100%;
  overflow: hidden; /* prevent spill outside card */
}


.sl1-spellrow,
.sl1-knownrow,
.sl1-toprow {
  min-width: 0;
  max-width: 100%;
}


.sl1-spellrow input,
.sl1-spellrow textarea,
.sl1-knownrow textarea,
.sl1-toprow input {
  min-width: 0;
  max-width: 100%;
}


/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
.sl1-spellrow-name { flex-wrap: nowrap; }

  .sl1-spellrow-name .sl1-spelllabel { white-space: nowrap; }




/* Spell Info – keep each label+field together as a unit */
.sl1-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* prevents label and its input from splitting lines */
  min-width: 0;
}


/* Ensure inputs inside pairs can still shrink within the card */
.sl1-spellpair .sl1-line{
  min-width: 60px; /* your minimum */
  max-width: 100%;
}



/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
.sl1-spellrow-name{
  display:flex;
  gap: 6px 10px;
  align-items:center;
  max-width:100%;
  min-width:0;
}


/* Each label+input pair stays together */
.sl1-spellpair{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}


/* Proportional widths (Spell Name 50% wider than Time/Range) */
.sl1-spellpair.pair-name{ flex:3 1 0; }

.sl1-spellpair.pair-time{ flex:2 1 0; }

.sl1-spellpair.pair-range{ flex:2 1 0; }


/* Inputs shrink inside their pair; keep your minimum */
.sl1-spellpair .sl1-line{
  flex:1 1 0;
  min-width:60px;
  max-width:100%;
}




/* Spell Info – final overrides for pair classes used in HTML */
.sl1-spellrow-name{ flex-wrap: wrap; }

.sl1-spellpair.namepair{ flex: 3 1 0; }

.sl1-spellpair.timepair{ flex: 2 1 0; }

.sl1-spellpair.rangepair{ flex: 2 1 0; }




/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
.sl1-spellrow-name{
  display:flex;
  flex-wrap: wrap;   /* allow pairs to wrap to lower rows */
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}


.sl1-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* label and its field stay on same line */
  min-width: 0;
  max-width: 100%;
}


/* Proportional widths by PAIR so the whole unit wraps together */
.sl1-spellpair-name{  flex: 3 1 0; }

.sl1-spellpair-time{  flex: 2 1 0; }

.sl1-spellpair-range{ flex: 2 1 0; }


/* Inputs inside pairs can shrink but respect your minimum */
.sl1-spellpair .sl1-line{
  min-width: 60px;
  max-width: 100%;
}




/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
.sl1-spellrow-name{
  flex-wrap: wrap !important;
}


/* Prevent pairs from shrinking to avoid suppressing wrapping */
.sl1-spellpair{
  flex-shrink: 0;
}




/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
   This makes Casting Time / Range drop to a new row when the window is narrow,
   while keeping each label attached to its field. */
.sl1-spellrow-name{
  width: 100%;
  max-width: 100%;
}


/* Minimum widths are set to the pair (label+field), not just the input,
   so pairs stop compressing and instead wrap. */
.sl1-spellpair-name{  min-width: 320px; }

.sl1-spellpair-time{  min-width: 220px; }

.sl1-spellpair-range{ min-width: 200px; }


/* Keep 50% wider intent while still permitting wrap by pair */
.sl1-spellpair-name{ flex: 3 0 auto; }

.sl1-spellpair-time,
.sl1-spellpair-range{ flex: 2 0 auto; }




/* ===== Spell Info wrap fix (authoritative) =====
   Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
   and older grid/flex rules conflict. These rules are appended LAST and use
   high specificity/!important so the Spell Info row actually wraps by pair. */

/* Ensure the Spell Name row is flex (not grid) and can wrap */
.sl1-spellbox .sl1-spellrow.sl1-spellrow-name{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* Keep each label+field together */
.sl1-spellbox .sl1-spellrow.sl1-spellrow-name .sl1-spellpair{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0; /* don't compress forever; wrap instead */
  min-width: 0;
  max-width: 100%;
}


/* Inputs still respect your minimum and stay within the card */
.sl1-spellbox .sl1-spellrow.sl1-spellrow-name .sl1-spellpair .sl1-line{
  min-width: 60px;
  max-width: 100%;
}

/* ===== Bulk Spell Level Cards SL2-SL9 ===== */

/* ===== Collapsible Spell Level 2 Card (SL2) ===== */
.sl2-toggle{
  position: absolute;
  left: -9999px;
}

.sl2-toggle-btn{
  display: inline-block;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  margin: 0 0 6px 0;
  background: #fff;
  position: relative;
  top: 1px;
  padding-right: 22px;
}

.sl2-toggle-btn::after{
  content: "◀";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}

.sl2-toggle:checked + .sl2-toggle-btn::after{
  content: "▼";
  color: #000;
}

.sl2-toggle-btn:hover{
  filter: brightness(1.05);
}

.sl2-toggle:not(:checked) + .sl2-toggle-btn + .sl2-body{
  display: none;
}

/* ===== SL2 structural style mirror (from SL0) ===== */



/* sheet243: Spell Level 0 (SL0) card (Arial only) */
.sl2-card{
  position: relative;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 20px 14px 12px 14px;
  box-sizing: border-box;
}


.sl2-title{
  position: absolute;
  top: -11px;
  left: 10px;
  background: #fff;
  padding: 2px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
}


.sl2-toprow{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-bottom: 12px;
}


.sl2-topitem{
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}


.sl2-box{
  width: 58px;
  height: 30px;
  border: 2px solid #000;
  background: #f2f2f2;
  box-sizing: border-box;
}


.sl2-knownrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}


.sl2-knownlabel{
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}


.sl2-knownline{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl2-sep{
  border-top: 2px solid #000;
  margin: 8px 0 14px 0;
}


.sl2-spellbox{
  border: 2px solid #000;
  border-radius: 4px;
  padding: 10px 10px 6px 10px;
  box-sizing: border-box;
}


.sl2-spellrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}


/* Spell Info: Spell Name row adds Casting Time on the same line */
.sl2-spellrow.sl2-spellrow-name{
  grid-template-columns: auto 1fr auto 1fr;
}


.sl2-spelllabel{
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}


.sl2-line{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl2-line.short{
  max-width: 240px;
}



/* sheet244: SL0 card border thickness + layout fixes */
.sl2-card{
  border: 1px solid #777;   /* match other cards */
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  position: static;
}


/* Remove the prior floating title styling if still present */
.sl2-title{ display: none; }


/* Force top row to stay on one line */
.sl2-toprow{
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}


/* Reduce the three small boxes by ~65% (58px -> ~20px) */
.sl2-box{
  width: 20px;
  height: 26px;
}


/* Resizable Spells Known box */
.sl2-knownarea{
  width: 100%;
  min-height: 28px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Resizable Spell Description box */
.sl2-descarea{
  width: 100%;
  min-height: 32px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Keep Spell Name line as underline but align nicely with textarea below */
.sl2-spellrow{
  align-items: start;
}



/* sheet245: refine SL0 borders + field default heights + label sizing */

/* match normal thin borders for separator and spell entry box */
.sl2-sep{
  border-top: 1px solid #777;
}


.sl2-spellbox{
  border: 1px solid #777;
}


/* default (collapsed) heights before user expands */
.sl2-knownarea{
  min-height: 25px;
  height: 25px;
}


.sl2-descarea{
  min-height: 20px;
  height: 20px;
}


/* Spell Name / Spell Description label font size -2px */
.sl2-spelllabel{
  font-size: 16px;
}


/* Adjust associated inputs to visually match the smaller labels */
.sl2-line{
  height: 20px;
}


.sl2-line.short{
  max-width: 210px;
}



/* sheet246: enforce max collapsed height for SL0 textareas */
.sl2-knownarea{
  height: 20px;
  min-height: 20px;
}


.sl2-descarea{
  height: 20px;
  min-height: 20px;
}



/* sheet248: allow user resize to change height (do NOT lock height with !important) */
.page-magic .sl2-card textarea.sl2-knownarea,
.page-magic .sl2-card textarea.sl2-descarea{
  height: 20px;              /* initial visible height */
  min-padding: 0 4px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}



/* sheet249: SL0 textareas start at 20px but remain user-resizable */
.page-magic .sl2-card textarea.sl2-knownarea,
.page-magic .sl2-card textarea.sl2-descarea{
  height: 20px;
  min-height: 20px;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet251: SL0 card - Spells Known min-height +5px */
.page-magic .sl2-card textarea.sl2-knownarea{
  min-height: 25px;
}


/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
.page-magic .sl2-card{
  min-width: 335px;
}


/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
.page-magic .sl2-box{
  min-width: 25px;
}



/* sheet252: SL0 Spell Description height matches Spells Known */
.page-magic .sl2-card textarea.sl2-descarea{
  min-height: 25px;
}


/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
.page-magic .spellinfo-card textarea.sl2-descarea{
  height: 20px;
  min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet260: SL0 Spell Info repeating section (+Add) */
.page-magic .sl2-spellinfo-repeat-note{
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.9;
}


.page-magic .sl2-addhint{
  font-weight: 700;
}


/* Slight separation between repeating Spell Info entries */
.page-magic .sl2-spellbox-repeat{
  margin-top: 6px;
}



/* Spell Info – minimum width for Spell Name and Casting Time */
.sl2-spellrow-name .sl2-line.short {
  min-width: 60px;
}




/* =========================
   Responsive containment fixes
   Spell Level 0 + Spell Info
   ========================= */

/* Ensure all SL0 elements size within their containers */
.sl2-card, .sl2-card * {
  box-sizing: border-box;
}


/* Prevent any child content from visually spilling out of the card */
.sl2-card {
  overflow: hidden;
}


/* Allow top-row items to wrap inside the card instead of overflowing */
.sl2-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}


/* Make each top item flexible and allow it to shrink within the card */
.sl2-topitem {
  flex: 1 1 240px;
  min-width: 0;
}


/* Keep the little number boxes from forcing overflow */
.sl2-topitem .sl2-box {
  max-width: 100%;
}


/* Spells Known row: allow textarea to shrink/wrap within card */
.sl2-knownrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
}


.sl2-knownlabel {
  flex: 0 0 auto;
  min-width: 0;
}


.sl2-knownarea {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}


/* Spell Info rows: wrap on narrow screens, keep fields inside */
.sl2-spellrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}


.sl2-spelllabel {
  flex: 0 0 auto;
  min-width: 0;
}


/* Inputs should be allowed to shrink instead of overflowing */
.sl2-spellrow input.sl2-line,
.sl2-spellrow textarea {
  min-width: 0;
  max-width: 100%;
}


/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
.sl2-spellrow-name input.sl2-line.short {
  flex: 1 1 240px;   /* grows, shrinks, wraps */
  min-width: 60px;   /* your requested minimum */
  max-width: 100%;
}


/* Description textarea should always stay within the card */
.sl2-descarea {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}


/* Repeat spell boxes should also clip/wrap properly */
.sl2-spellbox,
.sl2-spellbox-repeat {
  max-width: 100%;
  overflow: hidden;
}



/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
.sl2-spellrow-name {
  display: flex;
  flex-wrap: nowrap; /* stay on one row */
  align-items: center;
}


.sl2-spellrow-name .sl2-line.name {
  flex: 3 1 0;       /* 50% wider */
  min-width: 60px;
}


.sl2-spellrow-name .sl2-line.time,
.sl2-spellrow-name .sl2-line.range {
  flex: 2 1 0;
  min-width: 60px;
}




/* =========================
   Spell Info containment (responsive)
   Keeps content inside Spell Info card on narrow widths
   ========================= */
.sl2-card, .sl2-card * { box-sizing: border-box; }


.sl2-card,
.sl2-spellbox,
.sl2-spellbox-repeat {
  max-width: 100%;
  overflow: hidden; /* prevent spill outside card */
}


.sl2-spellrow,
.sl2-knownrow,
.sl2-toprow {
  min-width: 0;
  max-width: 100%;
}


.sl2-spellrow input,
.sl2-spellrow textarea,
.sl2-knownrow textarea,
.sl2-toprow input {
  min-width: 0;
  max-width: 100%;
}


/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
.sl2-spellrow-name { flex-wrap: nowrap; }

  .sl2-spellrow-name .sl2-spelllabel { white-space: nowrap; }




/* Spell Info – keep each label+field together as a unit */
.sl2-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* prevents label and its input from splitting lines */
  min-width: 0;
}


/* Ensure inputs inside pairs can still shrink within the card */
.sl2-spellpair .sl2-line{
  min-width: 60px; /* your minimum */
  max-width: 100%;
}



/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
.sl2-spellrow-name{
  display:flex;
  gap: 6px 10px;
  align-items:center;
  max-width:100%;
  min-width:0;
}


/* Each label+input pair stays together */
.sl2-spellpair{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}


/* Proportional widths (Spell Name 50% wider than Time/Range) */
.sl2-spellpair.pair-name{ flex:3 1 0; }

.sl2-spellpair.pair-time{ flex:2 1 0; }

.sl2-spellpair.pair-range{ flex:2 1 0; }


/* Inputs shrink inside their pair; keep your minimum */
.sl2-spellpair .sl2-line{
  flex:1 1 0;
  min-width:60px;
  max-width:100%;
}




/* Spell Info – final overrides for pair classes used in HTML */
.sl2-spellrow-name{ flex-wrap: wrap; }

.sl2-spellpair.namepair{ flex: 3 1 0; }

.sl2-spellpair.timepair{ flex: 2 1 0; }

.sl2-spellpair.rangepair{ flex: 2 1 0; }




/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
.sl2-spellrow-name{
  display:flex;
  flex-wrap: wrap;   /* allow pairs to wrap to lower rows */
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}


.sl2-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* label and its field stay on same line */
  min-width: 0;
  max-width: 100%;
}


/* Proportional widths by PAIR so the whole unit wraps together */
.sl2-spellpair-name{  flex: 3 1 0; }

.sl2-spellpair-time{  flex: 2 1 0; }

.sl2-spellpair-range{ flex: 2 1 0; }


/* Inputs inside pairs can shrink but respect your minimum */
.sl2-spellpair .sl2-line{
  min-width: 60px;
  max-width: 100%;
}




/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
.sl2-spellrow-name{
  flex-wrap: wrap !important;
}


/* Prevent pairs from shrinking to avoid suppressing wrapping */
.sl2-spellpair{
  flex-shrink: 0;
}




/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
   This makes Casting Time / Range drop to a new row when the window is narrow,
   while keeping each label attached to its field. */
.sl2-spellrow-name{
  width: 100%;
  max-width: 100%;
}


/* Minimum widths are set to the pair (label+field), not just the input,
   so pairs stop compressing and instead wrap. */
.sl2-spellpair-name{  min-width: 320px; }

.sl2-spellpair-time{  min-width: 220px; }

.sl2-spellpair-range{ min-width: 200px; }


/* Keep 50% wider intent while still permitting wrap by pair */
.sl2-spellpair-name{ flex: 3 0 auto; }

.sl2-spellpair-time,
.sl2-spellpair-range{ flex: 2 0 auto; }




/* ===== Spell Info wrap fix (authoritative) =====
   Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
   and older grid/flex rules conflict. These rules are appended LAST and use
   high specificity/!important so the Spell Info row actually wraps by pair. */

/* Ensure the Spell Name row is flex (not grid) and can wrap */
.sl2-spellbox .sl2-spellrow.sl2-spellrow-name{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* Keep each label+field together */
.sl2-spellbox .sl2-spellrow.sl2-spellrow-name .sl2-spellpair{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0; /* don't compress forever; wrap instead */
  min-width: 0;
  max-width: 100%;
}


/* Inputs still respect your minimum and stay within the card */
.sl2-spellbox .sl2-spellrow.sl2-spellrow-name .sl2-spellpair .sl2-line{
  min-width: 60px;
  max-width: 100%;
}

/* ===== Collapsible Spell Level 3 Card (SL3) ===== */
.sl3-toggle{
  position: absolute;
  left: -9999px;
}

.sl3-toggle-btn{
  display: inline-block;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  margin: 0 0 6px 0;
  background: #fff;
  position: relative;
  top: 1px;
  padding-right: 22px;
}

.sl3-toggle-btn::after{
  content: "◀";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}

.sl3-toggle:checked + .sl3-toggle-btn::after{
  content: "▼";
  color: #000;
}

.sl3-toggle-btn:hover{
  filter: brightness(1.05);
}

.sl3-toggle:not(:checked) + .sl3-toggle-btn + .sl3-body{
  display: none;
}

/* ===== SL3 structural style mirror (from SL0) ===== */



/* sheet243: Spell Level 0 (SL0) card (Arial only) */
.sl3-card{
  position: relative;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 20px 14px 12px 14px;
  box-sizing: border-box;
}


.sl3-title{
  position: absolute;
  top: -11px;
  left: 10px;
  background: #fff;
  padding: 2px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
}


.sl3-toprow{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-bottom: 12px;
}


.sl3-topitem{
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}


.sl3-box{
  width: 58px;
  height: 30px;
  border: 2px solid #000;
  background: #f2f2f2;
  box-sizing: border-box;
}


.sl3-knownrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}


.sl3-knownlabel{
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}


.sl3-knownline{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl3-sep{
  border-top: 2px solid #000;
  margin: 8px 0 14px 0;
}


.sl3-spellbox{
  border: 2px solid #000;
  border-radius: 4px;
  padding: 10px 10px 6px 10px;
  box-sizing: border-box;
}


.sl3-spellrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}


/* Spell Info: Spell Name row adds Casting Time on the same line */
.sl3-spellrow.sl3-spellrow-name{
  grid-template-columns: auto 1fr auto 1fr;
}


.sl3-spelllabel{
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}


.sl3-line{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl3-line.short{
  max-width: 240px;
}



/* sheet244: SL0 card border thickness + layout fixes */
.sl3-card{
  border: 1px solid #777;   /* match other cards */
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  position: static;
}


/* Remove the prior floating title styling if still present */
.sl3-title{ display: none; }


/* Force top row to stay on one line */
.sl3-toprow{
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}


/* Reduce the three small boxes by ~65% (58px -> ~20px) */
.sl3-box{
  width: 20px;
  height: 26px;
}


/* Resizable Spells Known box */
.sl3-knownarea{
  width: 100%;
  min-height: 28px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Resizable Spell Description box */
.sl3-descarea{
  width: 100%;
  min-height: 32px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Keep Spell Name line as underline but align nicely with textarea below */
.sl3-spellrow{
  align-items: start;
}



/* sheet245: refine SL0 borders + field default heights + label sizing */

/* match normal thin borders for separator and spell entry box */
.sl3-sep{
  border-top: 1px solid #777;
}


.sl3-spellbox{
  border: 1px solid #777;
}


/* default (collapsed) heights before user expands */
.sl3-knownarea{
  min-height: 25px;
  height: 25px;
}


.sl3-descarea{
  min-height: 20px;
  height: 20px;
}


/* Spell Name / Spell Description label font size -2px */
.sl3-spelllabel{
  font-size: 16px;
}


/* Adjust associated inputs to visually match the smaller labels */
.sl3-line{
  height: 20px;
}


.sl3-line.short{
  max-width: 210px;
}



/* sheet246: enforce max collapsed height for SL0 textareas */
.sl3-knownarea{
  height: 20px;
  min-height: 20px;
}


.sl3-descarea{
  height: 20px;
  min-height: 20px;
}



/* sheet248: allow user resize to change height (do NOT lock height with !important) */
.page-magic .sl3-card textarea.sl3-knownarea,
.page-magic .sl3-card textarea.sl3-descarea{
  height: 20px;              /* initial visible height */
  min-padding: 0 4px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}



/* sheet249: SL0 textareas start at 20px but remain user-resizable */
.page-magic .sl3-card textarea.sl3-knownarea,
.page-magic .sl3-card textarea.sl3-descarea{
  height: 20px;
  min-height: 20px;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet251: SL0 card - Spells Known min-height +5px */
.page-magic .sl3-card textarea.sl3-knownarea{
  min-height: 25px;
}


/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
.page-magic .sl3-card{
  min-width: 335px;
}


/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
.page-magic .sl3-box{
  min-width: 25px;
}



/* sheet252: SL0 Spell Description height matches Spells Known */
.page-magic .sl3-card textarea.sl3-descarea{
  min-height: 25px;
}


/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
.page-magic .spellinfo-card textarea.sl3-descarea{
  height: 20px;
  min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet260: SL0 Spell Info repeating section (+Add) */
.page-magic .sl3-spellinfo-repeat-note{
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.9;
}


.page-magic .sl3-addhint{
  font-weight: 700;
}


/* Slight separation between repeating Spell Info entries */
.page-magic .sl3-spellbox-repeat{
  margin-top: 6px;
}



/* Spell Info – minimum width for Spell Name and Casting Time */
.sl3-spellrow-name .sl3-line.short {
  min-width: 60px;
}




/* =========================
   Responsive containment fixes
   Spell Level 0 + Spell Info
   ========================= */

/* Ensure all SL0 elements size within their containers */
.sl3-card, .sl3-card * {
  box-sizing: border-box;
}


/* Prevent any child content from visually spilling out of the card */
.sl3-card {
  overflow: hidden;
}


/* Allow top-row items to wrap inside the card instead of overflowing */
.sl3-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}


/* Make each top item flexible and allow it to shrink within the card */
.sl3-topitem {
  flex: 1 1 240px;
  min-width: 0;
}


/* Keep the little number boxes from forcing overflow */
.sl3-topitem .sl3-box {
  max-width: 100%;
}


/* Spells Known row: allow textarea to shrink/wrap within card */
.sl3-knownrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
}


.sl3-knownlabel {
  flex: 0 0 auto;
  min-width: 0;
}


.sl3-knownarea {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}


/* Spell Info rows: wrap on narrow screens, keep fields inside */
.sl3-spellrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}


.sl3-spelllabel {
  flex: 0 0 auto;
  min-width: 0;
}


/* Inputs should be allowed to shrink instead of overflowing */
.sl3-spellrow input.sl3-line,
.sl3-spellrow textarea {
  min-width: 0;
  max-width: 100%;
}


/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
.sl3-spellrow-name input.sl3-line.short {
  flex: 1 1 240px;   /* grows, shrinks, wraps */
  min-width: 60px;   /* your requested minimum */
  max-width: 100%;
}


/* Description textarea should always stay within the card */
.sl3-descarea {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}


/* Repeat spell boxes should also clip/wrap properly */
.sl3-spellbox,
.sl3-spellbox-repeat {
  max-width: 100%;
  overflow: hidden;
}



/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
.sl3-spellrow-name {
  display: flex;
  flex-wrap: nowrap; /* stay on one row */
  align-items: center;
}


.sl3-spellrow-name .sl3-line.name {
  flex: 3 1 0;       /* 50% wider */
  min-width: 60px;
}


.sl3-spellrow-name .sl3-line.time,
.sl3-spellrow-name .sl3-line.range {
  flex: 2 1 0;
  min-width: 60px;
}




/* =========================
   Spell Info containment (responsive)
   Keeps content inside Spell Info card on narrow widths
   ========================= */
.sl3-card, .sl3-card * { box-sizing: border-box; }


.sl3-card,
.sl3-spellbox,
.sl3-spellbox-repeat {
  max-width: 100%;
  overflow: hidden; /* prevent spill outside card */
}


.sl3-spellrow,
.sl3-knownrow,
.sl3-toprow {
  min-width: 0;
  max-width: 100%;
}


.sl3-spellrow input,
.sl3-spellrow textarea,
.sl3-knownrow textarea,
.sl3-toprow input {
  min-width: 0;
  max-width: 100%;
}


/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
.sl3-spellrow-name { flex-wrap: nowrap; }

  .sl3-spellrow-name .sl3-spelllabel { white-space: nowrap; }




/* Spell Info – keep each label+field together as a unit */
.sl3-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* prevents label and its input from splitting lines */
  min-width: 0;
}


/* Ensure inputs inside pairs can still shrink within the card */
.sl3-spellpair .sl3-line{
  min-width: 60px; /* your minimum */
  max-width: 100%;
}



/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
.sl3-spellrow-name{
  display:flex;
  gap: 6px 10px;
  align-items:center;
  max-width:100%;
  min-width:0;
}


/* Each label+input pair stays together */
.sl3-spellpair{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}


/* Proportional widths (Spell Name 50% wider than Time/Range) */
.sl3-spellpair.pair-name{ flex:3 1 0; }

.sl3-spellpair.pair-time{ flex:2 1 0; }

.sl3-spellpair.pair-range{ flex:2 1 0; }


/* Inputs shrink inside their pair; keep your minimum */
.sl3-spellpair .sl3-line{
  flex:1 1 0;
  min-width:60px;
  max-width:100%;
}




/* Spell Info – final overrides for pair classes used in HTML */
.sl3-spellrow-name{ flex-wrap: wrap; }

.sl3-spellpair.namepair{ flex: 3 1 0; }

.sl3-spellpair.timepair{ flex: 2 1 0; }

.sl3-spellpair.rangepair{ flex: 2 1 0; }




/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
.sl3-spellrow-name{
  display:flex;
  flex-wrap: wrap;   /* allow pairs to wrap to lower rows */
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}


.sl3-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* label and its field stay on same line */
  min-width: 0;
  max-width: 100%;
}


/* Proportional widths by PAIR so the whole unit wraps together */
.sl3-spellpair-name{  flex: 3 1 0; }

.sl3-spellpair-time{  flex: 2 1 0; }

.sl3-spellpair-range{ flex: 2 1 0; }


/* Inputs inside pairs can shrink but respect your minimum */
.sl3-spellpair .sl3-line{
  min-width: 60px;
  max-width: 100%;
}




/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
.sl3-spellrow-name{
  flex-wrap: wrap !important;
}


/* Prevent pairs from shrinking to avoid suppressing wrapping */
.sl3-spellpair{
  flex-shrink: 0;
}




/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
   This makes Casting Time / Range drop to a new row when the window is narrow,
   while keeping each label attached to its field. */
.sl3-spellrow-name{
  width: 100%;
  max-width: 100%;
}


/* Minimum widths are set to the pair (label+field), not just the input,
   so pairs stop compressing and instead wrap. */
.sl3-spellpair-name{  min-width: 320px; }

.sl3-spellpair-time{  min-width: 220px; }

.sl3-spellpair-range{ min-width: 200px; }


/* Keep 50% wider intent while still permitting wrap by pair */
.sl3-spellpair-name{ flex: 3 0 auto; }

.sl3-spellpair-time,
.sl3-spellpair-range{ flex: 2 0 auto; }




/* ===== Spell Info wrap fix (authoritative) =====
   Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
   and older grid/flex rules conflict. These rules are appended LAST and use
   high specificity/!important so the Spell Info row actually wraps by pair. */

/* Ensure the Spell Name row is flex (not grid) and can wrap */
.sl3-spellbox .sl3-spellrow.sl3-spellrow-name{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* Keep each label+field together */
.sl3-spellbox .sl3-spellrow.sl3-spellrow-name .sl3-spellpair{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0; /* don't compress forever; wrap instead */
  min-width: 0;
  max-width: 100%;
}


/* Inputs still respect your minimum and stay within the card */
.sl3-spellbox .sl3-spellrow.sl3-spellrow-name .sl3-spellpair .sl3-line{
  min-width: 60px;
  max-width: 100%;
}

/* ===== Collapsible Spell Level 4 Card (SL4) ===== */
.sl4-toggle{
  position: absolute;
  left: -9999px;
}

.sl4-toggle-btn{
  display: inline-block;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  margin: 0 0 6px 0;
  background: #fff;
  position: relative;
  top: 1px;
  padding-right: 22px;
}

.sl4-toggle-btn::after{
  content: "◀";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}

.sl4-toggle:checked + .sl4-toggle-btn::after{
  content: "▼";
  color: #000;
}

.sl4-toggle-btn:hover{
  filter: brightness(1.05);
}

.sl4-toggle:not(:checked) + .sl4-toggle-btn + .sl4-body{
  display: none;
}

/* ===== SL4 structural style mirror (from SL0) ===== */



/* sheet243: Spell Level 0 (SL0) card (Arial only) */
.sl4-card{
  position: relative;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 20px 14px 12px 14px;
  box-sizing: border-box;
}


.sl4-title{
  position: absolute;
  top: -11px;
  left: 10px;
  background: #fff;
  padding: 2px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
}


.sl4-toprow{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-bottom: 12px;
}


.sl4-topitem{
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}


.sl4-box{
  width: 58px;
  height: 30px;
  border: 2px solid #000;
  background: #f2f2f2;
  box-sizing: border-box;
}


.sl4-knownrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}


.sl4-knownlabel{
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}


.sl4-knownline{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl4-sep{
  border-top: 2px solid #000;
  margin: 8px 0 14px 0;
}


.sl4-spellbox{
  border: 2px solid #000;
  border-radius: 4px;
  padding: 10px 10px 6px 10px;
  box-sizing: border-box;
}


.sl4-spellrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}


/* Spell Info: Spell Name row adds Casting Time on the same line */
.sl4-spellrow.sl4-spellrow-name{
  grid-template-columns: auto 1fr auto 1fr;
}


.sl4-spelllabel{
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}


.sl4-line{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl4-line.short{
  max-width: 240px;
}



/* sheet244: SL0 card border thickness + layout fixes */
.sl4-card{
  border: 1px solid #777;   /* match other cards */
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  position: static;
}


/* Remove the prior floating title styling if still present */
.sl4-title{ display: none; }


/* Force top row to stay on one line */
.sl4-toprow{
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}


/* Reduce the three small boxes by ~65% (58px -> ~20px) */
.sl4-box{
  width: 20px;
  height: 26px;
}


/* Resizable Spells Known box */
.sl4-knownarea{
  width: 100%;
  min-height: 28px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Resizable Spell Description box */
.sl4-descarea{
  width: 100%;
  min-height: 32px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Keep Spell Name line as underline but align nicely with textarea below */
.sl4-spellrow{
  align-items: start;
}



/* sheet245: refine SL0 borders + field default heights + label sizing */

/* match normal thin borders for separator and spell entry box */
.sl4-sep{
  border-top: 1px solid #777;
}


.sl4-spellbox{
  border: 1px solid #777;
}


/* default (collapsed) heights before user expands */
.sl4-knownarea{
  min-height: 25px;
  height: 25px;
}


.sl4-descarea{
  min-height: 20px;
  height: 20px;
}


/* Spell Name / Spell Description label font size -2px */
.sl4-spelllabel{
  font-size: 16px;
}


/* Adjust associated inputs to visually match the smaller labels */
.sl4-line{
  height: 20px;
}


.sl4-line.short{
  max-width: 210px;
}



/* sheet246: enforce max collapsed height for SL0 textareas */
.sl4-knownarea{
  height: 20px;
  min-height: 20px;
}


.sl4-descarea{
  height: 20px;
  min-height: 20px;
}



/* sheet248: allow user resize to change height (do NOT lock height with !important) */
.page-magic .sl4-card textarea.sl4-knownarea,
.page-magic .sl4-card textarea.sl4-descarea{
  height: 20px;              /* initial visible height */
  min-padding: 0 4px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}



/* sheet249: SL0 textareas start at 20px but remain user-resizable */
.page-magic .sl4-card textarea.sl4-knownarea,
.page-magic .sl4-card textarea.sl4-descarea{
  height: 20px;
  min-height: 20px;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet251: SL0 card - Spells Known min-height +5px */
.page-magic .sl4-card textarea.sl4-knownarea{
  min-height: 25px;
}


/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
.page-magic .sl4-card{
  min-width: 335px;
}


/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
.page-magic .sl4-box{
  min-width: 25px;
}



/* sheet252: SL0 Spell Description height matches Spells Known */
.page-magic .sl4-card textarea.sl4-descarea{
  min-height: 25px;
}


/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
.page-magic .spellinfo-card textarea.sl4-descarea{
  height: 20px;
  min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet260: SL0 Spell Info repeating section (+Add) */
.page-magic .sl4-spellinfo-repeat-note{
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.9;
}


.page-magic .sl4-addhint{
  font-weight: 700;
}


/* Slight separation between repeating Spell Info entries */
.page-magic .sl4-spellbox-repeat{
  margin-top: 6px;
}



/* Spell Info – minimum width for Spell Name and Casting Time */
.sl4-spellrow-name .sl4-line.short {
  min-width: 60px;
}




/* =========================
   Responsive containment fixes
   Spell Level 0 + Spell Info
   ========================= */

/* Ensure all SL0 elements size within their containers */
.sl4-card, .sl4-card * {
  box-sizing: border-box;
}


/* Prevent any child content from visually spilling out of the card */
.sl4-card {
  overflow: hidden;
}


/* Allow top-row items to wrap inside the card instead of overflowing */
.sl4-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}


/* Make each top item flexible and allow it to shrink within the card */
.sl4-topitem {
  flex: 1 1 240px;
  min-width: 0;
}


/* Keep the little number boxes from forcing overflow */
.sl4-topitem .sl4-box {
  max-width: 100%;
}


/* Spells Known row: allow textarea to shrink/wrap within card */
.sl4-knownrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
}


.sl4-knownlabel {
  flex: 0 0 auto;
  min-width: 0;
}


.sl4-knownarea {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}


/* Spell Info rows: wrap on narrow screens, keep fields inside */
.sl4-spellrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}


.sl4-spelllabel {
  flex: 0 0 auto;
  min-width: 0;
}


/* Inputs should be allowed to shrink instead of overflowing */
.sl4-spellrow input.sl4-line,
.sl4-spellrow textarea {
  min-width: 0;
  max-width: 100%;
}


/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
.sl4-spellrow-name input.sl4-line.short {
  flex: 1 1 240px;   /* grows, shrinks, wraps */
  min-width: 60px;   /* your requested minimum */
  max-width: 100%;
}


/* Description textarea should always stay within the card */
.sl4-descarea {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}


/* Repeat spell boxes should also clip/wrap properly */
.sl4-spellbox,
.sl4-spellbox-repeat {
  max-width: 100%;
  overflow: hidden;
}



/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
.sl4-spellrow-name {
  display: flex;
  flex-wrap: nowrap; /* stay on one row */
  align-items: center;
}


.sl4-spellrow-name .sl4-line.name {
  flex: 3 1 0;       /* 50% wider */
  min-width: 60px;
}


.sl4-spellrow-name .sl4-line.time,
.sl4-spellrow-name .sl4-line.range {
  flex: 2 1 0;
  min-width: 60px;
}




/* =========================
   Spell Info containment (responsive)
   Keeps content inside Spell Info card on narrow widths
   ========================= */
.sl4-card, .sl4-card * { box-sizing: border-box; }


.sl4-card,
.sl4-spellbox,
.sl4-spellbox-repeat {
  max-width: 100%;
  overflow: hidden; /* prevent spill outside card */
}


.sl4-spellrow,
.sl4-knownrow,
.sl4-toprow {
  min-width: 0;
  max-width: 100%;
}


.sl4-spellrow input,
.sl4-spellrow textarea,
.sl4-knownrow textarea,
.sl4-toprow input {
  min-width: 0;
  max-width: 100%;
}


/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
.sl4-spellrow-name { flex-wrap: nowrap; }

  .sl4-spellrow-name .sl4-spelllabel { white-space: nowrap; }




/* Spell Info – keep each label+field together as a unit */
.sl4-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* prevents label and its input from splitting lines */
  min-width: 0;
}


/* Ensure inputs inside pairs can still shrink within the card */
.sl4-spellpair .sl4-line{
  min-width: 60px; /* your minimum */
  max-width: 100%;
}



/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
.sl4-spellrow-name{
  display:flex;
  gap: 6px 10px;
  align-items:center;
  max-width:100%;
  min-width:0;
}


/* Each label+input pair stays together */
.sl4-spellpair{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}


/* Proportional widths (Spell Name 50% wider than Time/Range) */
.sl4-spellpair.pair-name{ flex:3 1 0; }

.sl4-spellpair.pair-time{ flex:2 1 0; }

.sl4-spellpair.pair-range{ flex:2 1 0; }


/* Inputs shrink inside their pair; keep your minimum */
.sl4-spellpair .sl4-line{
  flex:1 1 0;
  min-width:60px;
  max-width:100%;
}




/* Spell Info – final overrides for pair classes used in HTML */
.sl4-spellrow-name{ flex-wrap: wrap; }

.sl4-spellpair.namepair{ flex: 3 1 0; }

.sl4-spellpair.timepair{ flex: 2 1 0; }

.sl4-spellpair.rangepair{ flex: 2 1 0; }




/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
.sl4-spellrow-name{
  display:flex;
  flex-wrap: wrap;   /* allow pairs to wrap to lower rows */
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}


.sl4-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* label and its field stay on same line */
  min-width: 0;
  max-width: 100%;
}


/* Proportional widths by PAIR so the whole unit wraps together */
.sl4-spellpair-name{  flex: 3 1 0; }

.sl4-spellpair-time{  flex: 2 1 0; }

.sl4-spellpair-range{ flex: 2 1 0; }


/* Inputs inside pairs can shrink but respect your minimum */
.sl4-spellpair .sl4-line{
  min-width: 60px;
  max-width: 100%;
}




/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
.sl4-spellrow-name{
  flex-wrap: wrap !important;
}


/* Prevent pairs from shrinking to avoid suppressing wrapping */
.sl4-spellpair{
  flex-shrink: 0;
}




/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
   This makes Casting Time / Range drop to a new row when the window is narrow,
   while keeping each label attached to its field. */
.sl4-spellrow-name{
  width: 100%;
  max-width: 100%;
}


/* Minimum widths are set to the pair (label+field), not just the input,
   so pairs stop compressing and instead wrap. */
.sl4-spellpair-name{  min-width: 320px; }

.sl4-spellpair-time{  min-width: 220px; }

.sl4-spellpair-range{ min-width: 200px; }


/* Keep 50% wider intent while still permitting wrap by pair */
.sl4-spellpair-name{ flex: 3 0 auto; }

.sl4-spellpair-time,
.sl4-spellpair-range{ flex: 2 0 auto; }




/* ===== Spell Info wrap fix (authoritative) =====
   Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
   and older grid/flex rules conflict. These rules are appended LAST and use
   high specificity/!important so the Spell Info row actually wraps by pair. */

/* Ensure the Spell Name row is flex (not grid) and can wrap */
.sl4-spellbox .sl4-spellrow.sl4-spellrow-name{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* Keep each label+field together */
.sl4-spellbox .sl4-spellrow.sl4-spellrow-name .sl4-spellpair{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0; /* don't compress forever; wrap instead */
  min-width: 0;
  max-width: 100%;
}


/* Inputs still respect your minimum and stay within the card */
.sl4-spellbox .sl4-spellrow.sl4-spellrow-name .sl4-spellpair .sl4-line{
  min-width: 60px;
  max-width: 100%;
}

/* ===== Collapsible Spell Level 5 Card (SL5) ===== */
.sl5-toggle{
  position: absolute;
  left: -9999px;
}

.sl5-toggle-btn{
  display: inline-block;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  margin: 0 0 6px 0;
  background: #fff;
  position: relative;
  top: 1px;
  padding-right: 22px;
}

.sl5-toggle-btn::after{
  content: "◀";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}

.sl5-toggle:checked + .sl5-toggle-btn::after{
  content: "▼";
  color: #000;
}

.sl5-toggle-btn:hover{
  filter: brightness(1.05);
}

.sl5-toggle:not(:checked) + .sl5-toggle-btn + .sl5-body{
  display: none;
}

/* ===== SL5 structural style mirror (from SL0) ===== */



/* sheet243: Spell Level 0 (SL0) card (Arial only) */
.sl5-card{
  position: relative;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 20px 14px 12px 14px;
  box-sizing: border-box;
}


.sl5-title{
  position: absolute;
  top: -11px;
  left: 10px;
  background: #fff;
  padding: 2px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
}


.sl5-toprow{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-bottom: 12px;
}


.sl5-topitem{
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}


.sl5-box{
  width: 58px;
  height: 30px;
  border: 2px solid #000;
  background: #f2f2f2;
  box-sizing: border-box;
}


.sl5-knownrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}


.sl5-knownlabel{
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}


.sl5-knownline{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl5-sep{
  border-top: 2px solid #000;
  margin: 8px 0 14px 0;
}


.sl5-spellbox{
  border: 2px solid #000;
  border-radius: 4px;
  padding: 10px 10px 6px 10px;
  box-sizing: border-box;
}


.sl5-spellrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}


/* Spell Info: Spell Name row adds Casting Time on the same line */
.sl5-spellrow.sl5-spellrow-name{
  grid-template-columns: auto 1fr auto 1fr;
}


.sl5-spelllabel{
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}


.sl5-line{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl5-line.short{
  max-width: 240px;
}



/* sheet244: SL0 card border thickness + layout fixes */
.sl5-card{
  border: 1px solid #777;   /* match other cards */
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  position: static;
}


/* Remove the prior floating title styling if still present */
.sl5-title{ display: none; }


/* Force top row to stay on one line */
.sl5-toprow{
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}


/* Reduce the three small boxes by ~65% (58px -> ~20px) */
.sl5-box{
  width: 20px;
  height: 26px;
}


/* Resizable Spells Known box */
.sl5-knownarea{
  width: 100%;
  min-height: 28px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Resizable Spell Description box */
.sl5-descarea{
  width: 100%;
  min-height: 32px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Keep Spell Name line as underline but align nicely with textarea below */
.sl5-spellrow{
  align-items: start;
}



/* sheet245: refine SL0 borders + field default heights + label sizing */

/* match normal thin borders for separator and spell entry box */
.sl5-sep{
  border-top: 1px solid #777;
}


.sl5-spellbox{
  border: 1px solid #777;
}


/* default (collapsed) heights before user expands */
.sl5-knownarea{
  min-height: 25px;
  height: 25px;
}


.sl5-descarea{
  min-height: 20px;
  height: 20px;
}


/* Spell Name / Spell Description label font size -2px */
.sl5-spelllabel{
  font-size: 16px;
}


/* Adjust associated inputs to visually match the smaller labels */
.sl5-line{
  height: 20px;
}


.sl5-line.short{
  max-width: 210px;
}



/* sheet246: enforce max collapsed height for SL0 textareas */
.sl5-knownarea{
  height: 20px;
  min-height: 20px;
}


.sl5-descarea{
  height: 20px;
  min-height: 20px;
}



/* sheet248: allow user resize to change height (do NOT lock height with !important) */
.page-magic .sl5-card textarea.sl5-knownarea,
.page-magic .sl5-card textarea.sl5-descarea{
  height: 20px;              /* initial visible height */
  min-padding: 0 4px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}



/* sheet249: SL0 textareas start at 20px but remain user-resizable */
.page-magic .sl5-card textarea.sl5-knownarea,
.page-magic .sl5-card textarea.sl5-descarea{
  height: 20px;
  min-height: 20px;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet251: SL0 card - Spells Known min-height +5px */
.page-magic .sl5-card textarea.sl5-knownarea{
  min-height: 25px;
}


/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
.page-magic .sl5-card{
  min-width: 335px;
}


/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
.page-magic .sl5-box{
  min-width: 25px;
}



/* sheet252: SL0 Spell Description height matches Spells Known */
.page-magic .sl5-card textarea.sl5-descarea{
  min-height: 25px;
}


/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
.page-magic .spellinfo-card textarea.sl5-descarea{
  height: 20px;
  min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet260: SL0 Spell Info repeating section (+Add) */
.page-magic .sl5-spellinfo-repeat-note{
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.9;
}


.page-magic .sl5-addhint{
  font-weight: 700;
}


/* Slight separation between repeating Spell Info entries */
.page-magic .sl5-spellbox-repeat{
  margin-top: 6px;
}



/* Spell Info – minimum width for Spell Name and Casting Time */
.sl5-spellrow-name .sl5-line.short {
  min-width: 60px;
}




/* =========================
   Responsive containment fixes
   Spell Level 0 + Spell Info
   ========================= */

/* Ensure all SL0 elements size within their containers */
.sl5-card, .sl5-card * {
  box-sizing: border-box;
}


/* Prevent any child content from visually spilling out of the card */
.sl5-card {
  overflow: hidden;
}


/* Allow top-row items to wrap inside the card instead of overflowing */
.sl5-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}


/* Make each top item flexible and allow it to shrink within the card */
.sl5-topitem {
  flex: 1 1 240px;
  min-width: 0;
}


/* Keep the little number boxes from forcing overflow */
.sl5-topitem .sl5-box {
  max-width: 100%;
}


/* Spells Known row: allow textarea to shrink/wrap within card */
.sl5-knownrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
}


.sl5-knownlabel {
  flex: 0 0 auto;
  min-width: 0;
}


.sl5-knownarea {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}


/* Spell Info rows: wrap on narrow screens, keep fields inside */
.sl5-spellrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}


.sl5-spelllabel {
  flex: 0 0 auto;
  min-width: 0;
}


/* Inputs should be allowed to shrink instead of overflowing */
.sl5-spellrow input.sl5-line,
.sl5-spellrow textarea {
  min-width: 0;
  max-width: 100%;
}


/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
.sl5-spellrow-name input.sl5-line.short {
  flex: 1 1 240px;   /* grows, shrinks, wraps */
  min-width: 60px;   /* your requested minimum */
  max-width: 100%;
}


/* Description textarea should always stay within the card */
.sl5-descarea {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}


/* Repeat spell boxes should also clip/wrap properly */
.sl5-spellbox,
.sl5-spellbox-repeat {
  max-width: 100%;
  overflow: hidden;
}



/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
.sl5-spellrow-name {
  display: flex;
  flex-wrap: nowrap; /* stay on one row */
  align-items: center;
}


.sl5-spellrow-name .sl5-line.name {
  flex: 3 1 0;       /* 50% wider */
  min-width: 60px;
}


.sl5-spellrow-name .sl5-line.time,
.sl5-spellrow-name .sl5-line.range {
  flex: 2 1 0;
  min-width: 60px;
}




/* =========================
   Spell Info containment (responsive)
   Keeps content inside Spell Info card on narrow widths
   ========================= */
.sl5-card, .sl5-card * { box-sizing: border-box; }


.sl5-card,
.sl5-spellbox,
.sl5-spellbox-repeat {
  max-width: 100%;
  overflow: hidden; /* prevent spill outside card */
}


.sl5-spellrow,
.sl5-knownrow,
.sl5-toprow {
  min-width: 0;
  max-width: 100%;
}


.sl5-spellrow input,
.sl5-spellrow textarea,
.sl5-knownrow textarea,
.sl5-toprow input {
  min-width: 0;
  max-width: 100%;
}


/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
.sl5-spellrow-name { flex-wrap: nowrap; }

  .sl5-spellrow-name .sl5-spelllabel { white-space: nowrap; }




/* Spell Info – keep each label+field together as a unit */
.sl5-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* prevents label and its input from splitting lines */
  min-width: 0;
}


/* Ensure inputs inside pairs can still shrink within the card */
.sl5-spellpair .sl5-line{
  min-width: 60px; /* your minimum */
  max-width: 100%;
}



/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
.sl5-spellrow-name{
  display:flex;
  gap: 6px 10px;
  align-items:center;
  max-width:100%;
  min-width:0;
}


/* Each label+input pair stays together */
.sl5-spellpair{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}


/* Proportional widths (Spell Name 50% wider than Time/Range) */
.sl5-spellpair.pair-name{ flex:3 1 0; }

.sl5-spellpair.pair-time{ flex:2 1 0; }

.sl5-spellpair.pair-range{ flex:2 1 0; }


/* Inputs shrink inside their pair; keep your minimum */
.sl5-spellpair .sl5-line{
  flex:1 1 0;
  min-width:60px;
  max-width:100%;
}




/* Spell Info – final overrides for pair classes used in HTML */
.sl5-spellrow-name{ flex-wrap: wrap; }

.sl5-spellpair.namepair{ flex: 3 1 0; }

.sl5-spellpair.timepair{ flex: 2 1 0; }

.sl5-spellpair.rangepair{ flex: 2 1 0; }




/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
.sl5-spellrow-name{
  display:flex;
  flex-wrap: wrap;   /* allow pairs to wrap to lower rows */
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}


.sl5-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* label and its field stay on same line */
  min-width: 0;
  max-width: 100%;
}


/* Proportional widths by PAIR so the whole unit wraps together */
.sl5-spellpair-name{  flex: 3 1 0; }

.sl5-spellpair-time{  flex: 2 1 0; }

.sl5-spellpair-range{ flex: 2 1 0; }


/* Inputs inside pairs can shrink but respect your minimum */
.sl5-spellpair .sl5-line{
  min-width: 60px;
  max-width: 100%;
}




/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
.sl5-spellrow-name{
  flex-wrap: wrap !important;
}


/* Prevent pairs from shrinking to avoid suppressing wrapping */
.sl5-spellpair{
  flex-shrink: 0;
}




/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
   This makes Casting Time / Range drop to a new row when the window is narrow,
   while keeping each label attached to its field. */
.sl5-spellrow-name{
  width: 100%;
  max-width: 100%;
}


/* Minimum widths are set to the pair (label+field), not just the input,
   so pairs stop compressing and instead wrap. */
.sl5-spellpair-name{  min-width: 320px; }

.sl5-spellpair-time{  min-width: 220px; }

.sl5-spellpair-range{ min-width: 200px; }


/* Keep 50% wider intent while still permitting wrap by pair */
.sl5-spellpair-name{ flex: 3 0 auto; }

.sl5-spellpair-time,
.sl5-spellpair-range{ flex: 2 0 auto; }




/* ===== Spell Info wrap fix (authoritative) =====
   Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
   and older grid/flex rules conflict. These rules are appended LAST and use
   high specificity/!important so the Spell Info row actually wraps by pair. */

/* Ensure the Spell Name row is flex (not grid) and can wrap */
.sl5-spellbox .sl5-spellrow.sl5-spellrow-name{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* Keep each label+field together */
.sl5-spellbox .sl5-spellrow.sl5-spellrow-name .sl5-spellpair{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0; /* don't compress forever; wrap instead */
  min-width: 0;
  max-width: 100%;
}


/* Inputs still respect your minimum and stay within the card */
.sl5-spellbox .sl5-spellrow.sl5-spellrow-name .sl5-spellpair .sl5-line{
  min-width: 60px;
  max-width: 100%;
}

/* ===== Collapsible Spell Level 6 Card (SL6) ===== */
.sl6-toggle{
  position: absolute;
  left: -9999px;
}

.sl6-toggle-btn{
  display: inline-block;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  margin: 0 0 6px 0;
  background: #fff;
  position: relative;
  top: 1px;
  padding-right: 22px;
}

.sl6-toggle-btn::after{
  content: "◀";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}

.sl6-toggle:checked + .sl6-toggle-btn::after{
  content: "▼";
  color: #000;
}

.sl6-toggle-btn:hover{
  filter: brightness(1.05);
}

.sl6-toggle:not(:checked) + .sl6-toggle-btn + .sl6-body{
  display: none;
}

/* ===== SL6 structural style mirror (from SL0) ===== */



/* sheet243: Spell Level 0 (SL0) card (Arial only) */
.sl6-card{
  position: relative;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 20px 14px 12px 14px;
  box-sizing: border-box;
}


.sl6-title{
  position: absolute;
  top: -11px;
  left: 10px;
  background: #fff;
  padding: 2px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
}


.sl6-toprow{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-bottom: 12px;
}


.sl6-topitem{
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}


.sl6-box{
  width: 58px;
  height: 30px;
  border: 2px solid #000;
  background: #f2f2f2;
  box-sizing: border-box;
}


.sl6-knownrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}


.sl6-knownlabel{
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}


.sl6-knownline{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl6-sep{
  border-top: 2px solid #000;
  margin: 8px 0 14px 0;
}


.sl6-spellbox{
  border: 2px solid #000;
  border-radius: 4px;
  padding: 10px 10px 6px 10px;
  box-sizing: border-box;
}


.sl6-spellrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}


/* Spell Info: Spell Name row adds Casting Time on the same line */
.sl6-spellrow.sl6-spellrow-name{
  grid-template-columns: auto 1fr auto 1fr;
}


.sl6-spelllabel{
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}


.sl6-line{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl6-line.short{
  max-width: 240px;
}



/* sheet244: SL0 card border thickness + layout fixes */
.sl6-card{
  border: 1px solid #777;   /* match other cards */
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  position: static;
}


/* Remove the prior floating title styling if still present */
.sl6-title{ display: none; }


/* Force top row to stay on one line */
.sl6-toprow{
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}


/* Reduce the three small boxes by ~65% (58px -> ~20px) */
.sl6-box{
  width: 20px;
  height: 26px;
}


/* Resizable Spells Known box */
.sl6-knownarea{
  width: 100%;
  min-height: 28px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Resizable Spell Description box */
.sl6-descarea{
  width: 100%;
  min-height: 32px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Keep Spell Name line as underline but align nicely with textarea below */
.sl6-spellrow{
  align-items: start;
}



/* sheet245: refine SL0 borders + field default heights + label sizing */

/* match normal thin borders for separator and spell entry box */
.sl6-sep{
  border-top: 1px solid #777;
}


.sl6-spellbox{
  border: 1px solid #777;
}


/* default (collapsed) heights before user expands */
.sl6-knownarea{
  min-height: 25px;
  height: 25px;
}


.sl6-descarea{
  min-height: 20px;
  height: 20px;
}


/* Spell Name / Spell Description label font size -2px */
.sl6-spelllabel{
  font-size: 16px;
}


/* Adjust associated inputs to visually match the smaller labels */
.sl6-line{
  height: 20px;
}


.sl6-line.short{
  max-width: 210px;
}



/* sheet246: enforce max collapsed height for SL0 textareas */
.sl6-knownarea{
  height: 20px;
  min-height: 20px;
}


.sl6-descarea{
  height: 20px;
  min-height: 20px;
}



/* sheet248: allow user resize to change height (do NOT lock height with !important) */
.page-magic .sl6-card textarea.sl6-knownarea,
.page-magic .sl6-card textarea.sl6-descarea{
  height: 20px;              /* initial visible height */
  min-padding: 0 4px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}



/* sheet249: SL0 textareas start at 20px but remain user-resizable */
.page-magic .sl6-card textarea.sl6-knownarea,
.page-magic .sl6-card textarea.sl6-descarea{
  height: 20px;
  min-height: 20px;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet251: SL0 card - Spells Known min-height +5px */
.page-magic .sl6-card textarea.sl6-knownarea{
  min-height: 25px;
}


/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
.page-magic .sl6-card{
  min-width: 335px;
}


/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
.page-magic .sl6-box{
  min-width: 25px;
}



/* sheet252: SL0 Spell Description height matches Spells Known */
.page-magic .sl6-card textarea.sl6-descarea{
  min-height: 25px;
}


/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
.page-magic .spellinfo-card textarea.sl6-descarea{
  height: 20px;
  min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet260: SL0 Spell Info repeating section (+Add) */
.page-magic .sl6-spellinfo-repeat-note{
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.9;
}


.page-magic .sl6-addhint{
  font-weight: 700;
}


/* Slight separation between repeating Spell Info entries */
.page-magic .sl6-spellbox-repeat{
  margin-top: 6px;
}



/* Spell Info – minimum width for Spell Name and Casting Time */
.sl6-spellrow-name .sl6-line.short {
  min-width: 60px;
}




/* =========================
   Responsive containment fixes
   Spell Level 0 + Spell Info
   ========================= */

/* Ensure all SL0 elements size within their containers */
.sl6-card, .sl6-card * {
  box-sizing: border-box;
}


/* Prevent any child content from visually spilling out of the card */
.sl6-card {
  overflow: hidden;
}


/* Allow top-row items to wrap inside the card instead of overflowing */
.sl6-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}


/* Make each top item flexible and allow it to shrink within the card */
.sl6-topitem {
  flex: 1 1 240px;
  min-width: 0;
}


/* Keep the little number boxes from forcing overflow */
.sl6-topitem .sl6-box {
  max-width: 100%;
}


/* Spells Known row: allow textarea to shrink/wrap within card */
.sl6-knownrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
}


.sl6-knownlabel {
  flex: 0 0 auto;
  min-width: 0;
}


.sl6-knownarea {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}


/* Spell Info rows: wrap on narrow screens, keep fields inside */
.sl6-spellrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}


.sl6-spelllabel {
  flex: 0 0 auto;
  min-width: 0;
}


/* Inputs should be allowed to shrink instead of overflowing */
.sl6-spellrow input.sl6-line,
.sl6-spellrow textarea {
  min-width: 0;
  max-width: 100%;
}


/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
.sl6-spellrow-name input.sl6-line.short {
  flex: 1 1 240px;   /* grows, shrinks, wraps */
  min-width: 60px;   /* your requested minimum */
  max-width: 100%;
}


/* Description textarea should always stay within the card */
.sl6-descarea {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}


/* Repeat spell boxes should also clip/wrap properly */
.sl6-spellbox,
.sl6-spellbox-repeat {
  max-width: 100%;
  overflow: hidden;
}



/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
.sl6-spellrow-name {
  display: flex;
  flex-wrap: nowrap; /* stay on one row */
  align-items: center;
}


.sl6-spellrow-name .sl6-line.name {
  flex: 3 1 0;       /* 50% wider */
  min-width: 60px;
}


.sl6-spellrow-name .sl6-line.time,
.sl6-spellrow-name .sl6-line.range {
  flex: 2 1 0;
  min-width: 60px;
}




/* =========================
   Spell Info containment (responsive)
   Keeps content inside Spell Info card on narrow widths
   ========================= */
.sl6-card, .sl6-card * { box-sizing: border-box; }


.sl6-card,
.sl6-spellbox,
.sl6-spellbox-repeat {
  max-width: 100%;
  overflow: hidden; /* prevent spill outside card */
}


.sl6-spellrow,
.sl6-knownrow,
.sl6-toprow {
  min-width: 0;
  max-width: 100%;
}


.sl6-spellrow input,
.sl6-spellrow textarea,
.sl6-knownrow textarea,
.sl6-toprow input {
  min-width: 0;
  max-width: 100%;
}


/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
.sl6-spellrow-name { flex-wrap: nowrap; }

  .sl6-spellrow-name .sl6-spelllabel { white-space: nowrap; }




/* Spell Info – keep each label+field together as a unit */
.sl6-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* prevents label and its input from splitting lines */
  min-width: 0;
}


/* Ensure inputs inside pairs can still shrink within the card */
.sl6-spellpair .sl6-line{
  min-width: 60px; /* your minimum */
  max-width: 100%;
}



/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
.sl6-spellrow-name{
  display:flex;
  gap: 6px 10px;
  align-items:center;
  max-width:100%;
  min-width:0;
}


/* Each label+input pair stays together */
.sl6-spellpair{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}


/* Proportional widths (Spell Name 50% wider than Time/Range) */
.sl6-spellpair.pair-name{ flex:3 1 0; }

.sl6-spellpair.pair-time{ flex:2 1 0; }

.sl6-spellpair.pair-range{ flex:2 1 0; }


/* Inputs shrink inside their pair; keep your minimum */
.sl6-spellpair .sl6-line{
  flex:1 1 0;
  min-width:60px;
  max-width:100%;
}




/* Spell Info – final overrides for pair classes used in HTML */
.sl6-spellrow-name{ flex-wrap: wrap; }

.sl6-spellpair.namepair{ flex: 3 1 0; }

.sl6-spellpair.timepair{ flex: 2 1 0; }

.sl6-spellpair.rangepair{ flex: 2 1 0; }




/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
.sl6-spellrow-name{
  display:flex;
  flex-wrap: wrap;   /* allow pairs to wrap to lower rows */
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}


.sl6-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* label and its field stay on same line */
  min-width: 0;
  max-width: 100%;
}


/* Proportional widths by PAIR so the whole unit wraps together */
.sl6-spellpair-name{  flex: 3 1 0; }

.sl6-spellpair-time{  flex: 2 1 0; }

.sl6-spellpair-range{ flex: 2 1 0; }


/* Inputs inside pairs can shrink but respect your minimum */
.sl6-spellpair .sl6-line{
  min-width: 60px;
  max-width: 100%;
}




/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
.sl6-spellrow-name{
  flex-wrap: wrap !important;
}


/* Prevent pairs from shrinking to avoid suppressing wrapping */
.sl6-spellpair{
  flex-shrink: 0;
}




/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
   This makes Casting Time / Range drop to a new row when the window is narrow,
   while keeping each label attached to its field. */
.sl6-spellrow-name{
  width: 100%;
  max-width: 100%;
}


/* Minimum widths are set to the pair (label+field), not just the input,
   so pairs stop compressing and instead wrap. */
.sl6-spellpair-name{  min-width: 320px; }

.sl6-spellpair-time{  min-width: 220px; }

.sl6-spellpair-range{ min-width: 200px; }


/* Keep 50% wider intent while still permitting wrap by pair */
.sl6-spellpair-name{ flex: 3 0 auto; }

.sl6-spellpair-time,
.sl6-spellpair-range{ flex: 2 0 auto; }




/* ===== Spell Info wrap fix (authoritative) =====
   Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
   and older grid/flex rules conflict. These rules are appended LAST and use
   high specificity/!important so the Spell Info row actually wraps by pair. */

/* Ensure the Spell Name row is flex (not grid) and can wrap */
.sl6-spellbox .sl6-spellrow.sl6-spellrow-name{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* Keep each label+field together */
.sl6-spellbox .sl6-spellrow.sl6-spellrow-name .sl6-spellpair{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0; /* don't compress forever; wrap instead */
  min-width: 0;
  max-width: 100%;
}


/* Inputs still respect your minimum and stay within the card */
.sl6-spellbox .sl6-spellrow.sl6-spellrow-name .sl6-spellpair .sl6-line{
  min-width: 60px;
  max-width: 100%;
}

/* ===== Collapsible Spell Level 7 Card (SL7) ===== */
.sl7-toggle{
  position: absolute;
  left: -9999px;
}

.sl7-toggle-btn{
  display: inline-block;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  margin: 0 0 6px 0;
  background: #fff;
  position: relative;
  top: 1px;
  padding-right: 22px;
}

.sl7-toggle-btn::after{
  content: "◀";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}

.sl7-toggle:checked + .sl7-toggle-btn::after{
  content: "▼";
  color: #000;
}

.sl7-toggle-btn:hover{
  filter: brightness(1.05);
}

.sl7-toggle:not(:checked) + .sl7-toggle-btn + .sl7-body{
  display: none;
}

/* ===== SL7 structural style mirror (from SL0) ===== */



/* sheet243: Spell Level 0 (SL0) card (Arial only) */
.sl7-card{
  position: relative;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 20px 14px 12px 14px;
  box-sizing: border-box;
}


.sl7-title{
  position: absolute;
  top: -11px;
  left: 10px;
  background: #fff;
  padding: 2px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
}


.sl7-toprow{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-bottom: 12px;
}


.sl7-topitem{
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}


.sl7-box{
  width: 58px;
  height: 30px;
  border: 2px solid #000;
  background: #f2f2f2;
  box-sizing: border-box;
}


.sl7-knownrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}


.sl7-knownlabel{
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}


.sl7-knownline{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl7-sep{
  border-top: 2px solid #000;
  margin: 8px 0 14px 0;
}


.sl7-spellbox{
  border: 2px solid #000;
  border-radius: 4px;
  padding: 10px 10px 6px 10px;
  box-sizing: border-box;
}


.sl7-spellrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}


/* Spell Info: Spell Name row adds Casting Time on the same line */
.sl7-spellrow.sl7-spellrow-name{
  grid-template-columns: auto 1fr auto 1fr;
}


.sl7-spelllabel{
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}


.sl7-line{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl7-line.short{
  max-width: 240px;
}



/* sheet244: SL0 card border thickness + layout fixes */
.sl7-card{
  border: 1px solid #777;   /* match other cards */
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  position: static;
}


/* Remove the prior floating title styling if still present */
.sl7-title{ display: none; }


/* Force top row to stay on one line */
.sl7-toprow{
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}


/* Reduce the three small boxes by ~65% (58px -> ~20px) */
.sl7-box{
  width: 20px;
  height: 26px;
}


/* Resizable Spells Known box */
.sl7-knownarea{
  width: 100%;
  min-height: 28px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Resizable Spell Description box */
.sl7-descarea{
  width: 100%;
  min-height: 32px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Keep Spell Name line as underline but align nicely with textarea below */
.sl7-spellrow{
  align-items: start;
}



/* sheet245: refine SL0 borders + field default heights + label sizing */

/* match normal thin borders for separator and spell entry box */
.sl7-sep{
  border-top: 1px solid #777;
}


.sl7-spellbox{
  border: 1px solid #777;
}


/* default (collapsed) heights before user expands */
.sl7-knownarea{
  min-height: 25px;
  height: 25px;
}


.sl7-descarea{
  min-height: 20px;
  height: 20px;
}


/* Spell Name / Spell Description label font size -2px */
.sl7-spelllabel{
  font-size: 16px;
}


/* Adjust associated inputs to visually match the smaller labels */
.sl7-line{
  height: 20px;
}


.sl7-line.short{
  max-width: 210px;
}



/* sheet246: enforce max collapsed height for SL0 textareas */
.sl7-knownarea{
  height: 20px;
  min-height: 20px;
}


.sl7-descarea{
  height: 20px;
  min-height: 20px;
}



/* sheet248: allow user resize to change height (do NOT lock height with !important) */
.page-magic .sl7-card textarea.sl7-knownarea,
.page-magic .sl7-card textarea.sl7-descarea{
  height: 20px;              /* initial visible height */
  min-padding: 0 4px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}



/* sheet249: SL0 textareas start at 20px but remain user-resizable */
.page-magic .sl7-card textarea.sl7-knownarea,
.page-magic .sl7-card textarea.sl7-descarea{
  height: 20px;
  min-height: 20px;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet251: SL0 card - Spells Known min-height +5px */
.page-magic .sl7-card textarea.sl7-knownarea{
  min-height: 25px;
}


/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
.page-magic .sl7-card{
  min-width: 335px;
}


/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
.page-magic .sl7-box{
  min-width: 25px;
}



/* sheet252: SL0 Spell Description height matches Spells Known */
.page-magic .sl7-card textarea.sl7-descarea{
  min-height: 25px;
}


/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
.page-magic .spellinfo-card textarea.sl7-descarea{
  height: 20px;
  min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet260: SL0 Spell Info repeating section (+Add) */
.page-magic .sl7-spellinfo-repeat-note{
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.9;
}


.page-magic .sl7-addhint{
  font-weight: 700;
}


/* Slight separation between repeating Spell Info entries */
.page-magic .sl7-spellbox-repeat{
  margin-top: 6px;
}



/* Spell Info – minimum width for Spell Name and Casting Time */
.sl7-spellrow-name .sl7-line.short {
  min-width: 60px;
}




/* =========================
   Responsive containment fixes
   Spell Level 0 + Spell Info
   ========================= */

/* Ensure all SL0 elements size within their containers */
.sl7-card, .sl7-card * {
  box-sizing: border-box;
}


/* Prevent any child content from visually spilling out of the card */
.sl7-card {
  overflow: hidden;
}


/* Allow top-row items to wrap inside the card instead of overflowing */
.sl7-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}


/* Make each top item flexible and allow it to shrink within the card */
.sl7-topitem {
  flex: 1 1 240px;
  min-width: 0;
}


/* Keep the little number boxes from forcing overflow */
.sl7-topitem .sl7-box {
  max-width: 100%;
}


/* Spells Known row: allow textarea to shrink/wrap within card */
.sl7-knownrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
}


.sl7-knownlabel {
  flex: 0 0 auto;
  min-width: 0;
}


.sl7-knownarea {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}


/* Spell Info rows: wrap on narrow screens, keep fields inside */
.sl7-spellrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}


.sl7-spelllabel {
  flex: 0 0 auto;
  min-width: 0;
}


/* Inputs should be allowed to shrink instead of overflowing */
.sl7-spellrow input.sl7-line,
.sl7-spellrow textarea {
  min-width: 0;
  max-width: 100%;
}


/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
.sl7-spellrow-name input.sl7-line.short {
  flex: 1 1 240px;   /* grows, shrinks, wraps */
  min-width: 60px;   /* your requested minimum */
  max-width: 100%;
}


/* Description textarea should always stay within the card */
.sl7-descarea {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}


/* Repeat spell boxes should also clip/wrap properly */
.sl7-spellbox,
.sl7-spellbox-repeat {
  max-width: 100%;
  overflow: hidden;
}



/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
.sl7-spellrow-name {
  display: flex;
  flex-wrap: nowrap; /* stay on one row */
  align-items: center;
}


.sl7-spellrow-name .sl7-line.name {
  flex: 3 1 0;       /* 50% wider */
  min-width: 60px;
}


.sl7-spellrow-name .sl7-line.time,
.sl7-spellrow-name .sl7-line.range {
  flex: 2 1 0;
  min-width: 60px;
}




/* =========================
   Spell Info containment (responsive)
   Keeps content inside Spell Info card on narrow widths
   ========================= */
.sl7-card, .sl7-card * { box-sizing: border-box; }


.sl7-card,
.sl7-spellbox,
.sl7-spellbox-repeat {
  max-width: 100%;
  overflow: hidden; /* prevent spill outside card */
}


.sl7-spellrow,
.sl7-knownrow,
.sl7-toprow {
  min-width: 0;
  max-width: 100%;
}


.sl7-spellrow input,
.sl7-spellrow textarea,
.sl7-knownrow textarea,
.sl7-toprow input {
  min-width: 0;
  max-width: 100%;
}


/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
.sl7-spellrow-name { flex-wrap: nowrap; }

  .sl7-spellrow-name .sl7-spelllabel { white-space: nowrap; }




/* Spell Info – keep each label+field together as a unit */
.sl7-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* prevents label and its input from splitting lines */
  min-width: 0;
}


/* Ensure inputs inside pairs can still shrink within the card */
.sl7-spellpair .sl7-line{
  min-width: 60px; /* your minimum */
  max-width: 100%;
}



/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
.sl7-spellrow-name{
  display:flex;
  gap: 6px 10px;
  align-items:center;
  max-width:100%;
  min-width:0;
}


/* Each label+input pair stays together */
.sl7-spellpair{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}


/* Proportional widths (Spell Name 50% wider than Time/Range) */
.sl7-spellpair.pair-name{ flex:3 1 0; }

.sl7-spellpair.pair-time{ flex:2 1 0; }

.sl7-spellpair.pair-range{ flex:2 1 0; }


/* Inputs shrink inside their pair; keep your minimum */
.sl7-spellpair .sl7-line{
  flex:1 1 0;
  min-width:60px;
  max-width:100%;
}




/* Spell Info – final overrides for pair classes used in HTML */
.sl7-spellrow-name{ flex-wrap: wrap; }

.sl7-spellpair.namepair{ flex: 3 1 0; }

.sl7-spellpair.timepair{ flex: 2 1 0; }

.sl7-spellpair.rangepair{ flex: 2 1 0; }




/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
.sl7-spellrow-name{
  display:flex;
  flex-wrap: wrap;   /* allow pairs to wrap to lower rows */
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}


.sl7-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* label and its field stay on same line */
  min-width: 0;
  max-width: 100%;
}


/* Proportional widths by PAIR so the whole unit wraps together */
.sl7-spellpair-name{  flex: 3 1 0; }

.sl7-spellpair-time{  flex: 2 1 0; }

.sl7-spellpair-range{ flex: 2 1 0; }


/* Inputs inside pairs can shrink but respect your minimum */
.sl7-spellpair .sl7-line{
  min-width: 60px;
  max-width: 100%;
}




/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
.sl7-spellrow-name{
  flex-wrap: wrap !important;
}


/* Prevent pairs from shrinking to avoid suppressing wrapping */
.sl7-spellpair{
  flex-shrink: 0;
}




/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
   This makes Casting Time / Range drop to a new row when the window is narrow,
   while keeping each label attached to its field. */
.sl7-spellrow-name{
  width: 100%;
  max-width: 100%;
}


/* Minimum widths are set to the pair (label+field), not just the input,
   so pairs stop compressing and instead wrap. */
.sl7-spellpair-name{  min-width: 320px; }

.sl7-spellpair-time{  min-width: 220px; }

.sl7-spellpair-range{ min-width: 200px; }


/* Keep 50% wider intent while still permitting wrap by pair */
.sl7-spellpair-name{ flex: 3 0 auto; }

.sl7-spellpair-time,
.sl7-spellpair-range{ flex: 2 0 auto; }




/* ===== Spell Info wrap fix (authoritative) =====
   Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
   and older grid/flex rules conflict. These rules are appended LAST and use
   high specificity/!important so the Spell Info row actually wraps by pair. */

/* Ensure the Spell Name row is flex (not grid) and can wrap */
.sl7-spellbox .sl7-spellrow.sl7-spellrow-name{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* Keep each label+field together */
.sl7-spellbox .sl7-spellrow.sl7-spellrow-name .sl7-spellpair{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0; /* don't compress forever; wrap instead */
  min-width: 0;
  max-width: 100%;
}


/* Inputs still respect your minimum and stay within the card */
.sl7-spellbox .sl7-spellrow.sl7-spellrow-name .sl7-spellpair .sl7-line{
  min-width: 60px;
  max-width: 100%;
}

/* ===== Collapsible Spell Level 8 Card (SL8) ===== */
.sl8-toggle{
  position: absolute;
  left: -9999px;
}

.sl8-toggle-btn{
  display: inline-block;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  margin: 0 0 6px 0;
  background: #fff;
  position: relative;
  top: 1px;
  padding-right: 22px;
}

.sl8-toggle-btn::after{
  content: "◀";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}

.sl8-toggle:checked + .sl8-toggle-btn::after{
  content: "▼";
  color: #000;
}

.sl8-toggle-btn:hover{
  filter: brightness(1.05);
}

.sl8-toggle:not(:checked) + .sl8-toggle-btn + .sl8-body{
  display: none;
}

/* ===== SL8 structural style mirror (from SL0) ===== */



/* sheet243: Spell Level 0 (SL0) card (Arial only) */
.sl8-card{
  position: relative;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 20px 14px 12px 14px;
  box-sizing: border-box;
}


.sl8-title{
  position: absolute;
  top: -11px;
  left: 10px;
  background: #fff;
  padding: 2px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
}


.sl8-toprow{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-bottom: 12px;
}


.sl8-topitem{
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}


.sl8-box{
  width: 58px;
  height: 30px;
  border: 2px solid #000;
  background: #f2f2f2;
  box-sizing: border-box;
}


.sl8-knownrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}


.sl8-knownlabel{
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}


.sl8-knownline{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl8-sep{
  border-top: 2px solid #000;
  margin: 8px 0 14px 0;
}


.sl8-spellbox{
  border: 2px solid #000;
  border-radius: 4px;
  padding: 10px 10px 6px 10px;
  box-sizing: border-box;
}


.sl8-spellrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}


/* Spell Info: Spell Name row adds Casting Time on the same line */
.sl8-spellrow.sl8-spellrow-name{
  grid-template-columns: auto 1fr auto 1fr;
}


.sl8-spelllabel{
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}


.sl8-line{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl8-line.short{
  max-width: 240px;
}



/* sheet244: SL0 card border thickness + layout fixes */
.sl8-card{
  border: 1px solid #777;   /* match other cards */
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  position: static;
}


/* Remove the prior floating title styling if still present */
.sl8-title{ display: none; }


/* Force top row to stay on one line */
.sl8-toprow{
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}


/* Reduce the three small boxes by ~65% (58px -> ~20px) */
.sl8-box{
  width: 20px;
  height: 26px;
}


/* Resizable Spells Known box */
.sl8-knownarea{
  width: 100%;
  min-height: 28px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Resizable Spell Description box */
.sl8-descarea{
  width: 100%;
  min-height: 32px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Keep Spell Name line as underline but align nicely with textarea below */
.sl8-spellrow{
  align-items: start;
}



/* sheet245: refine SL0 borders + field default heights + label sizing */

/* match normal thin borders for separator and spell entry box */
.sl8-sep{
  border-top: 1px solid #777;
}


.sl8-spellbox{
  border: 1px solid #777;
}


/* default (collapsed) heights before user expands */
.sl8-knownarea{
  min-height: 25px;
  height: 25px;
}


.sl8-descarea{
  min-height: 20px;
  height: 20px;
}


/* Spell Name / Spell Description label font size -2px */
.sl8-spelllabel{
  font-size: 16px;
}


/* Adjust associated inputs to visually match the smaller labels */
.sl8-line{
  height: 20px;
}


.sl8-line.short{
  max-width: 210px;
}



/* sheet246: enforce max collapsed height for SL0 textareas */
.sl8-knownarea{
  height: 20px;
  min-height: 20px;
}


.sl8-descarea{
  height: 20px;
  min-height: 20px;
}



/* sheet248: allow user resize to change height (do NOT lock height with !important) */
.page-magic .sl8-card textarea.sl8-knownarea,
.page-magic .sl8-card textarea.sl8-descarea{
  height: 20px;              /* initial visible height */
  min-padding: 0 4px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}



/* sheet249: SL0 textareas start at 20px but remain user-resizable */
.page-magic .sl8-card textarea.sl8-knownarea,
.page-magic .sl8-card textarea.sl8-descarea{
  height: 20px;
  min-height: 20px;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet251: SL0 card - Spells Known min-height +5px */
.page-magic .sl8-card textarea.sl8-knownarea{
  min-height: 25px;
}


/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
.page-magic .sl8-card{
  min-width: 335px;
}


/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
.page-magic .sl8-box{
  min-width: 25px;
}



/* sheet252: SL0 Spell Description height matches Spells Known */
.page-magic .sl8-card textarea.sl8-descarea{
  min-height: 25px;
}


/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
.page-magic .spellinfo-card textarea.sl8-descarea{
  height: 20px;
  min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet260: SL0 Spell Info repeating section (+Add) */
.page-magic .sl8-spellinfo-repeat-note{
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.9;
}


.page-magic .sl8-addhint{
  font-weight: 700;
}


/* Slight separation between repeating Spell Info entries */
.page-magic .sl8-spellbox-repeat{
  margin-top: 6px;
}



/* Spell Info – minimum width for Spell Name and Casting Time */
.sl8-spellrow-name .sl8-line.short {
  min-width: 60px;
}




/* =========================
   Responsive containment fixes
   Spell Level 0 + Spell Info
   ========================= */

/* Ensure all SL0 elements size within their containers */
.sl8-card, .sl8-card * {
  box-sizing: border-box;
}


/* Prevent any child content from visually spilling out of the card */
.sl8-card {
  overflow: hidden;
}


/* Allow top-row items to wrap inside the card instead of overflowing */
.sl8-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}


/* Make each top item flexible and allow it to shrink within the card */
.sl8-topitem {
  flex: 1 1 240px;
  min-width: 0;
}


/* Keep the little number boxes from forcing overflow */
.sl8-topitem .sl8-box {
  max-width: 100%;
}


/* Spells Known row: allow textarea to shrink/wrap within card */
.sl8-knownrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
}


.sl8-knownlabel {
  flex: 0 0 auto;
  min-width: 0;
}


.sl8-knownarea {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}


/* Spell Info rows: wrap on narrow screens, keep fields inside */
.sl8-spellrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}


.sl8-spelllabel {
  flex: 0 0 auto;
  min-width: 0;
}


/* Inputs should be allowed to shrink instead of overflowing */
.sl8-spellrow input.sl8-line,
.sl8-spellrow textarea {
  min-width: 0;
  max-width: 100%;
}


/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
.sl8-spellrow-name input.sl8-line.short {
  flex: 1 1 240px;   /* grows, shrinks, wraps */
  min-width: 60px;   /* your requested minimum */
  max-width: 100%;
}


/* Description textarea should always stay within the card */
.sl8-descarea {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}


/* Repeat spell boxes should also clip/wrap properly */
.sl8-spellbox,
.sl8-spellbox-repeat {
  max-width: 100%;
  overflow: hidden;
}



/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
.sl8-spellrow-name {
  display: flex;
  flex-wrap: nowrap; /* stay on one row */
  align-items: center;
}


.sl8-spellrow-name .sl8-line.name {
  flex: 3 1 0;       /* 50% wider */
  min-width: 60px;
}


.sl8-spellrow-name .sl8-line.time,
.sl8-spellrow-name .sl8-line.range {
  flex: 2 1 0;
  min-width: 60px;
}




/* =========================
   Spell Info containment (responsive)
   Keeps content inside Spell Info card on narrow widths
   ========================= */
.sl8-card, .sl8-card * { box-sizing: border-box; }


.sl8-card,
.sl8-spellbox,
.sl8-spellbox-repeat {
  max-width: 100%;
  overflow: hidden; /* prevent spill outside card */
}


.sl8-spellrow,
.sl8-knownrow,
.sl8-toprow {
  min-width: 0;
  max-width: 100%;
}


.sl8-spellrow input,
.sl8-spellrow textarea,
.sl8-knownrow textarea,
.sl8-toprow input {
  min-width: 0;
  max-width: 100%;
}


/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
.sl8-spellrow-name { flex-wrap: nowrap; }

  .sl8-spellrow-name .sl8-spelllabel { white-space: nowrap; }




/* Spell Info – keep each label+field together as a unit */
.sl8-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* prevents label and its input from splitting lines */
  min-width: 0;
}


/* Ensure inputs inside pairs can still shrink within the card */
.sl8-spellpair .sl8-line{
  min-width: 60px; /* your minimum */
  max-width: 100%;
}



/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
.sl8-spellrow-name{
  display:flex;
  gap: 6px 10px;
  align-items:center;
  max-width:100%;
  min-width:0;
}


/* Each label+input pair stays together */
.sl8-spellpair{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}


/* Proportional widths (Spell Name 50% wider than Time/Range) */
.sl8-spellpair.pair-name{ flex:3 1 0; }

.sl8-spellpair.pair-time{ flex:2 1 0; }

.sl8-spellpair.pair-range{ flex:2 1 0; }


/* Inputs shrink inside their pair; keep your minimum */
.sl8-spellpair .sl8-line{
  flex:1 1 0;
  min-width:60px;
  max-width:100%;
}




/* Spell Info – final overrides for pair classes used in HTML */
.sl8-spellrow-name{ flex-wrap: wrap; }

.sl8-spellpair.namepair{ flex: 3 1 0; }

.sl8-spellpair.timepair{ flex: 2 1 0; }

.sl8-spellpair.rangepair{ flex: 2 1 0; }




/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
.sl8-spellrow-name{
  display:flex;
  flex-wrap: wrap;   /* allow pairs to wrap to lower rows */
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}


.sl8-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* label and its field stay on same line */
  min-width: 0;
  max-width: 100%;
}


/* Proportional widths by PAIR so the whole unit wraps together */
.sl8-spellpair-name{  flex: 3 1 0; }

.sl8-spellpair-time{  flex: 2 1 0; }

.sl8-spellpair-range{ flex: 2 1 0; }


/* Inputs inside pairs can shrink but respect your minimum */
.sl8-spellpair .sl8-line{
  min-width: 60px;
  max-width: 100%;
}




/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
.sl8-spellrow-name{
  flex-wrap: wrap !important;
}


/* Prevent pairs from shrinking to avoid suppressing wrapping */
.sl8-spellpair{
  flex-shrink: 0;
}




/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
   This makes Casting Time / Range drop to a new row when the window is narrow,
   while keeping each label attached to its field. */
.sl8-spellrow-name{
  width: 100%;
  max-width: 100%;
}


/* Minimum widths are set to the pair (label+field), not just the input,
   so pairs stop compressing and instead wrap. */
.sl8-spellpair-name{  min-width: 320px; }

.sl8-spellpair-time{  min-width: 220px; }

.sl8-spellpair-range{ min-width: 200px; }


/* Keep 50% wider intent while still permitting wrap by pair */
.sl8-spellpair-name{ flex: 3 0 auto; }

.sl8-spellpair-time,
.sl8-spellpair-range{ flex: 2 0 auto; }




/* ===== Spell Info wrap fix (authoritative) =====
   Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
   and older grid/flex rules conflict. These rules are appended LAST and use
   high specificity/!important so the Spell Info row actually wraps by pair. */

/* Ensure the Spell Name row is flex (not grid) and can wrap */
.sl8-spellbox .sl8-spellrow.sl8-spellrow-name{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* Keep each label+field together */
.sl8-spellbox .sl8-spellrow.sl8-spellrow-name .sl8-spellpair{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0; /* don't compress forever; wrap instead */
  min-width: 0;
  max-width: 100%;
}


/* Inputs still respect your minimum and stay within the card */
.sl8-spellbox .sl8-spellrow.sl8-spellrow-name .sl8-spellpair .sl8-line{
  min-width: 60px;
  max-width: 100%;
}

/* ===== Collapsible Spell Level 9 Card (SL9) ===== */
.sl9-toggle{
  position: absolute;
  left: -9999px;
}

.sl9-toggle-btn{
  display: inline-block;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  margin: 0 0 6px 0;
  background: #fff;
  position: relative;
  top: 1px;
  padding-right: 22px;
}

.sl9-toggle-btn::after{
  content: "◀";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 12px;
  line-height: 1;
}

.sl9-toggle:checked + .sl9-toggle-btn::after{
  content: "▼";
  color: #000;
}

.sl9-toggle-btn:hover{
  filter: brightness(1.05);
}

.sl9-toggle:not(:checked) + .sl9-toggle-btn + .sl9-body{
  display: none;
}

/* ===== SL9 structural style mirror (from SL0) ===== */



/* sheet243: Spell Level 0 (SL0) card (Arial only) */
.sl9-card{
  position: relative;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 20px 14px 12px 14px;
  box-sizing: border-box;
}


.sl9-title{
  position: absolute;
  top: -11px;
  left: 10px;
  background: #fff;
  padding: 2px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
}


.sl9-toprow{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-bottom: 12px;
}


.sl9-topitem{
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}


.sl9-box{
  width: 58px;
  height: 30px;
  border: 2px solid #000;
  background: #f2f2f2;
  box-sizing: border-box;
}


.sl9-knownrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}


.sl9-knownlabel{
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}


.sl9-knownline{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl9-sep{
  border-top: 2px solid #000;
  margin: 8px 0 14px 0;
}


.sl9-spellbox{
  border: 2px solid #000;
  border-radius: 4px;
  padding: 10px 10px 6px 10px;
  box-sizing: border-box;
}


.sl9-spellrow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}


/* Spell Info: Spell Name row adds Casting Time on the same line */
.sl9-spellrow.sl9-spellrow-name{
  grid-template-columns: auto 1fr auto 1fr;
}


.sl9-spelllabel{
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}


.sl9-line{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
}


.sl9-line.short{
  max-width: 240px;
}



/* sheet244: SL0 card border thickness + layout fixes */
.sl9-card{
  border: 1px solid #777;   /* match other cards */
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  position: static;
}


/* Remove the prior floating title styling if still present */
.sl9-title{ display: none; }


/* Force top row to stay on one line */
.sl9-toprow{
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}


/* Reduce the three small boxes by ~65% (58px -> ~20px) */
.sl9-box{
  width: 20px;
  height: 26px;
}


/* Resizable Spells Known box */
.sl9-knownarea{
  width: 100%;
  min-height: 28px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Resizable Spell Description box */
.sl9-descarea{
  width: 100%;
  min-height: 32px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff;
  padding: 4px 6px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}


/* Keep Spell Name line as underline but align nicely with textarea below */
.sl9-spellrow{
  align-items: start;
}



/* sheet245: refine SL0 borders + field default heights + label sizing */

/* match normal thin borders for separator and spell entry box */
.sl9-sep{
  border-top: 1px solid #777;
}


.sl9-spellbox{
  border: 1px solid #777;
}


/* default (collapsed) heights before user expands */
.sl9-knownarea{
  min-height: 25px;
  height: 25px;
}


.sl9-descarea{
  min-height: 20px;
  height: 20px;
}


/* Spell Name / Spell Description label font size -2px */
.sl9-spelllabel{
  font-size: 16px;
}


/* Adjust associated inputs to visually match the smaller labels */
.sl9-line{
  height: 20px;
}


.sl9-line.short{
  max-width: 210px;
}



/* sheet246: enforce max collapsed height for SL0 textareas */
.sl9-knownarea{
  height: 20px;
  min-height: 20px;
}


.sl9-descarea{
  height: 20px;
  min-height: 20px;
}



/* sheet248: allow user resize to change height (do NOT lock height with !important) */
.page-magic .sl9-card textarea.sl9-knownarea,
.page-magic .sl9-card textarea.sl9-descarea{
  height: 20px;              /* initial visible height */
  min-padding: 0 4px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}



/* sheet249: SL0 textareas start at 20px but remain user-resizable */
.page-magic .sl9-card textarea.sl9-knownarea,
.page-magic .sl9-card textarea.sl9-descarea{
  height: 20px;
  min-height: 20px;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet251: SL0 card - Spells Known min-height +5px */
.page-magic .sl9-card textarea.sl9-knownarea{
  min-height: 25px;
}


/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
.page-magic .sl9-card{
  min-width: 335px;
}


/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
.page-magic .sl9-box{
  min-width: 25px;
}



/* sheet252: SL0 Spell Description height matches Spells Known */
.page-magic .sl9-card textarea.sl9-descarea{
  min-height: 25px;
}


/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
.page-magic .spellinfo-card textarea.sl9-descarea{
  height: 20px;
  min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
}


/* sheet260: SL0 Spell Info repeating section (+Add) */
.page-magic .sl9-spellinfo-repeat-note{
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.9;
}


.page-magic .sl9-addhint{
  font-weight: 700;
}


/* Slight separation between repeating Spell Info entries */
.page-magic .sl9-spellbox-repeat{
  margin-top: 6px;
}



/* Spell Info – minimum width for Spell Name and Casting Time */
.sl9-spellrow-name .sl9-line.short {
  min-width: 60px;
}




/* =========================
   Responsive containment fixes
   Spell Level 0 + Spell Info
   ========================= */

/* Ensure all SL0 elements size within their containers */
.sl9-card, .sl9-card * {
  box-sizing: border-box;
}


/* Prevent any child content from visually spilling out of the card */
.sl9-card {
  overflow: hidden;
}


/* Allow top-row items to wrap inside the card instead of overflowing */
.sl9-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}


/* Make each top item flexible and allow it to shrink within the card */
.sl9-topitem {
  flex: 1 1 240px;
  min-width: 0;
}


/* Keep the little number boxes from forcing overflow */
.sl9-topitem .sl9-box {
  max-width: 100%;
}


/* Spells Known row: allow textarea to shrink/wrap within card */
.sl9-knownrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
}


.sl9-knownlabel {
  flex: 0 0 auto;
  min-width: 0;
}


.sl9-knownarea {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}


/* Spell Info rows: wrap on narrow screens, keep fields inside */
.sl9-spellrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}


.sl9-spelllabel {
  flex: 0 0 auto;
  min-width: 0;
}


/* Inputs should be allowed to shrink instead of overflowing */
.sl9-spellrow input.sl9-line,
.sl9-spellrow textarea {
  min-width: 0;
  max-width: 100%;
}


/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
.sl9-spellrow-name input.sl9-line.short {
  flex: 1 1 240px;   /* grows, shrinks, wraps */
  min-width: 60px;   /* your requested minimum */
  max-width: 100%;
}


/* Description textarea should always stay within the card */
.sl9-descarea {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}


/* Repeat spell boxes should also clip/wrap properly */
.sl9-spellbox,
.sl9-spellbox-repeat {
  max-width: 100%;
  overflow: hidden;
}



/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
.sl9-spellrow-name {
  display: flex;
  flex-wrap: nowrap; /* stay on one row */
  align-items: center;
}


.sl9-spellrow-name .sl9-line.name {
  flex: 3 1 0;       /* 50% wider */
  min-width: 60px;
}


.sl9-spellrow-name .sl9-line.time,
.sl9-spellrow-name .sl9-line.range {
  flex: 2 1 0;
  min-width: 60px;
}




/* =========================
   Spell Info containment (responsive)
   Keeps content inside Spell Info card on narrow widths
   ========================= */
.sl9-card, .sl9-card * { box-sizing: border-box; }


.sl9-card,
.sl9-spellbox,
.sl9-spellbox-repeat {
  max-width: 100%;
  overflow: hidden; /* prevent spill outside card */
}


.sl9-spellrow,
.sl9-knownrow,
.sl9-toprow {
  min-width: 0;
  max-width: 100%;
}


.sl9-spellrow input,
.sl9-spellrow textarea,
.sl9-knownrow textarea,
.sl9-toprow input {
  min-width: 0;
  max-width: 100%;
}


/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
.sl9-spellrow-name { flex-wrap: nowrap; }

  .sl9-spellrow-name .sl9-spelllabel { white-space: nowrap; }




/* Spell Info – keep each label+field together as a unit */
.sl9-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* prevents label and its input from splitting lines */
  min-width: 0;
}


/* Ensure inputs inside pairs can still shrink within the card */
.sl9-spellpair .sl9-line{
  min-width: 60px; /* your minimum */
  max-width: 100%;
}



/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
.sl9-spellrow-name{
  display:flex;
  gap: 6px 10px;
  align-items:center;
  max-width:100%;
  min-width:0;
}


/* Each label+input pair stays together */
.sl9-spellpair{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}


/* Proportional widths (Spell Name 50% wider than Time/Range) */
.sl9-spellpair.pair-name{ flex:3 1 0; }

.sl9-spellpair.pair-time{ flex:2 1 0; }

.sl9-spellpair.pair-range{ flex:2 1 0; }


/* Inputs shrink inside their pair; keep your minimum */
.sl9-spellpair .sl9-line{
  flex:1 1 0;
  min-width:60px;
  max-width:100%;
}




/* Spell Info – final overrides for pair classes used in HTML */
.sl9-spellrow-name{ flex-wrap: wrap; }

.sl9-spellpair.namepair{ flex: 3 1 0; }

.sl9-spellpair.timepair{ flex: 2 1 0; }

.sl9-spellpair.rangepair{ flex: 2 1 0; }




/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
.sl9-spellrow-name{
  display:flex;
  flex-wrap: wrap;   /* allow pairs to wrap to lower rows */
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}


.sl9-spellpair{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap; /* label and its field stay on same line */
  min-width: 0;
  max-width: 100%;
}


/* Proportional widths by PAIR so the whole unit wraps together */
.sl9-spellpair-name{  flex: 3 1 0; }

.sl9-spellpair-time{  flex: 2 1 0; }

.sl9-spellpair-range{ flex: 2 1 0; }


/* Inputs inside pairs can shrink but respect your minimum */
.sl9-spellpair .sl9-line{
  min-width: 60px;
  max-width: 100%;
}




/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
.sl9-spellrow-name{
  flex-wrap: wrap !important;
}


/* Prevent pairs from shrinking to avoid suppressing wrapping */
.sl9-spellpair{
  flex-shrink: 0;
}




/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
   This makes Casting Time / Range drop to a new row when the window is narrow,
   while keeping each label attached to its field. */
.sl9-spellrow-name{
  width: 100%;
  max-width: 100%;
}


/* Minimum widths are set to the pair (label+field), not just the input,
   so pairs stop compressing and instead wrap. */
.sl9-spellpair-name{  min-width: 320px; }

.sl9-spellpair-time{  min-width: 220px; }

.sl9-spellpair-range{ min-width: 200px; }


/* Keep 50% wider intent while still permitting wrap by pair */
.sl9-spellpair-name{ flex: 3 0 auto; }

.sl9-spellpair-time,
.sl9-spellpair-range{ flex: 2 0 auto; }




/* ===== Spell Info wrap fix (authoritative) =====
   Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
   and older grid/flex rules conflict. These rules are appended LAST and use
   high specificity/!important so the Spell Info row actually wraps by pair. */

/* Ensure the Spell Name row is flex (not grid) and can wrap */
.sl9-spellbox .sl9-spellrow.sl9-spellrow-name{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* Keep each label+field together */
.sl9-spellbox .sl9-spellrow.sl9-spellrow-name .sl9-spellpair{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0; /* don't compress forever; wrap instead */
  min-width: 0;
  max-width: 100%;
}


/* Inputs still respect your minimum and stay within the card */
.sl9-spellbox .sl9-spellrow.sl9-spellrow-name .sl9-spellpair .sl9-line{
  min-width: 60px;
  max-width: 100%;
}


/* === Sheet280: Calculated vs User-Entered Field Coloring === */
/* Calculated / auto-filled fields (readonly) */
.sheet-roll20 input[readonly],
.sheet-roll20 textarea[readonly] {
    color: #4a4a4a; /* dark grey */
}

/* User-entered fields */
.sheet-roll20 input:not([readonly]),
.sheet-roll20 textarea:not([readonly]) {
    color: #0b1f3a; /* dark navy blue */
}

/* === Sheet281: Correct selector for this sheet (.lfg-sheet) === */
/* Calculated / auto-filled fields (readonly) */
.lfg-sheet input[readonly],
.lfg-sheet textarea[readonly] {
  color: #4a4a4a !important; /* dark grey */
}

/* User-entered fields */
.lfg-sheet input:not([readonly]),
.lfg-sheet textarea:not([readonly]) {
  color: #0b1f3a !important; /* dark navy blue */
}


/* === Sheet292: Weapons & Attacks - Attack Roll button === */
.weapons-card-full .wt-head.wt-attackbonus {
  position: relative;
}

/* Place the button inside the same square under the Attack Bonus field without resizing the cell */
.weapons-card-full .wt-attackroll-btn {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 16px;
  line-height: 14px;
  font-size: 10px;
  padding: 0;
  border-radius: 3px;
}

/* remove d20 icon / normalize save roll button */
/* Clean save button styling that RETAINS the Roll20 dice icon */
.save-roll-btn{
  border: 1px solid rgba(0,0,0,0.55);
  border-radius: 3px;
  padding: 0 4px 0 18px;
  margin-left: -10px;
  display: inline-block;
  height: 16px;
  line-height: 14px;
  font-size: 10px;
  font-weight: 700;
  position: relative;
  left: -10px;
  white-space: nowrap;
  box-sizing: border-box;
  min-width: 54px;

  /* keep Roll20 dice icon */
  background-size: 14px 14px;
  background-position: 3px center;
  background-repeat: no-repeat;
}

.save-roll-btn:hover{
  opacity: 0.92;
}

/* Slightly tighten separator spacing in Saves */
.save-plus,
.save-eq{
  margin-left: 2px;
  margin-right: 2px;
}

/* === Sheet307: Save buttons positioned to card edge and widened === */
/* Shift the entire Saves header + rows left so labels sit ~3px from the card edge
   (armor-saves-card has 12px left padding, so -9px => 3px effective inset) */
.saving-header,
.save-row{
  margin-left: -9px;
}

/* Keep dice icon, make the button fit its widened first column */
.save-roll-btn{
  height: 24px;
  line-height: 22px;
  font-size: 11px;
  font-weight: 700;

  /* keep Roll20 dice icon */
  background-size: 14px 14px;
  background-position: 3px center;

  padding-left: 20px;
  padding-right: 6px;

  border: 1px solid rgba(0,0,0,0.7);
  border-radius: 3px;

  box-sizing: border-box;
  width: 100%;
  white-space: nowrap;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}


/* === Sheet308: Saving Throws grid shifted & save buttons widened === */

/* Shift the entire Saving Throws header and rows left so first column is 3px from card edge */
.saving-header,
.save-row {
  margin-left: -9px; /* 12px card padding minus 3px desired inset */
}

/* Expand Save buttons by 15px */
.save-roll-btn {
  width: calc(100% + 15px);
}


/* === Sheet309: Save button + column refinements === */

/* 1) Increase Save button width by additional 5px (total +20px from base) */
.save-roll-btn {
  width: calc(100% + 20px);
}

/* 2) Move Total Save column 15px to the right WITHOUT expanding card width
   Achieved by shifting the Total Save column itself */
.save-row .save-total,
.saving-header .save-total {
  margin-left: 15px;
}

/* 3) Reduce width of each save fillable field by 3px
   and shift right by the same amount to preserve spacing */
.save-row input[type="text"],
.save-row input[type="number"] {
  width: calc(100% - 3px);
  margin-left: 3px;
}


/* === Sheet310: Compress AC & Saves field spacing by 20% === */

/* Compress spacing between save-related columns evenly */
.saving-header,
.save-row {
  column-gap: 8px; /* was effectively ~10px, now ~20% tighter */
}

/* Slightly reduce internal padding of save input fields */
.save-row input[type="text"],
.save-row input[type="number"] {
  padding-left: 3px;
  padding-right: 3px;
}

/* Ensure columns distribute evenly after compression */
.saving-header,
.save-row {
  justify-content: space-between;
}


/* === Sheet311: Compressed save field spacing (separators and gaps) === */


/* === Sheet312: Total Save column shifted right 15px, width redistributed === */


/* === Sheet313: Saving Throws columns compressed 50%, Total Save shifted right === */


/* The sheet had multiple .save-row blocks; this scoped rule ensures the intended layout wins in Roll20. */
.armor-saves-card .saving-header {
  grid-template-columns: 96px 37px 15px 37px 2px 37px 2px 40px !important;
  column-gap: 3px !important; /* ~50% tighter than prior 6px */
}

.armor-saves-card .save-row {
  grid-template-columns: 111px 37px 15px 37px 2px 37px 2px 40px !important; /* Total Save shifted right by widening button col */
  column-gap: 3px !important; /* ~50% tighter */
}


/* === Sheet315: Fix Save button size + even symbol spacing (no card width increase) === */
/* Scoped overrides so they win over earlier duplicate .save-row rules */
.armor-saves-card .saving-header {
  /* Button col widened (+15) to push Total Save right; other value cols reduced (-5 each) to keep total width stable */
  grid-template-columns: 96px 37px 12px 32px 12px 32px 12px 32px !important;
  column-gap: 3px !important;
  align-items: center !important;
}

.armor-saves-card .save-row {
  grid-template-columns: 111px 37px 12px 32px 12px 32px 12px 32px !important;
  column-gap: 3px !important;
  align-items: center !important;
}

/* Keep FORT/REF/WILL buttons compact (don’t stretch to fill widened column) */
.armor-saves-card .save-roll-btn {
  width: 58px !important;        /* fits FORT/REF/WILL + icon */
  max-width: 58px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  justify-self: start !important;
}

/* Center the + and = symbols evenly in their spacer columns */
.armor-saves-card .save-plus,
.armor-saves-card .save-eq {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* === Sheet316: Wider Save buttons (+25px) and header/row realignment === */

/* Header and rows MUST share identical grid math */
.armor-saves-card .saving-header,
.armor-saves-card .save-row {
  grid-template-columns: 121px 36px 12px 36px 12px 36px 12px 36px !important;
  column-gap: 3px !important;
  align-items: center !important;
}

/* Save buttons widened by +25px, but do not stretch */
.armor-saves-card .save-roll-btn {
  width: 83px !important;
  max-width: 83px !important;
  box-sizing: border-box !important;
  justify-self: start !important;
}

/* Center + and = symbols perfectly */
.armor-saves-card .save-plus,
.armor-saves-card .save-eq {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}\n\n
/* === Sheet317: Fine positional tweaks for Saving Throws === */

/* Shift all save input fields 3px to the left */
.armor-saves-card .save-row input[type="text"],
.armor-saves-card .save-row input[type="number"] {
  margin-left: -3px !important;
}

/* Move the three save buttons 10px to the right */
.armor-saves-card .save-roll-btn {
  margin-left: 10px !important;
}


/* === Sheet318: Core Stats field width adjustments === */

/* Hit Rating field: reduce width by ~55% and keep centered */
.core-stats-card .hit-rating input[type="text"],
.core-stats-card .hit-rating input[type="number"] {
  width: 45% !important;           /* 100% - 55% */
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

/* Ability Mod fields: reduce width by ~40% and keep centered under header */
.core-stats-card .ability-mod input[type="text"],
.core-stats-card .ability-mod input[type="number"] {
  width: 60% !important;           /* 100% - 40% */
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}


/* === Sheet319: Core Stats width tweaks (Hit Rating + Ability Mod) === */
.core-stats-card .corestat-row.hr-row {
  grid-template-columns: 1fr 39px;
}
.core-stats-card .corestat-row.hr-row .corestat-box {
  width: 39px !important;
}


/* === Sheet320: Core Stats Ability Mod fields width -40% and centered === */
/* Force header+rows to keep the Ability Mod column aligned */
.core-stats-card .ability-header,
.core-stats-card .ability-row{
  grid-template-columns: 70px 1fr 1fr !important; /* keep column structure stable */
}

/* Reduce ONLY the Ability Mod input boxes by 40% (i.e., to 60% width) and center them */
.core-stats-card .ability-row input.ability-box[readonly]{
  width: 60% !important;
  justify-self: center !important;
}


/* === Sheet321: Core Stats Ability Mod boxes truly -40% width and centered === */
/* Target ONLY the Ability Mod (readonly) boxes in the ability grid and override fixed width rules */
.core-stats-card .ability-row input.ability-box[readonly]{
  width: 43px !important;
  min-width: 43px !important;
  max-width: 43px !important;
  justify-self: center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* === Sheet322: AC & Saves – Total Save fields +5px width, centered === */
/* Increase only the Total Save calculated fields without changing grid or card width */
.armor-saves-card .save-row input.total-save,
.armor-saves-card .save-row input[name^="attr_TotalSave"]{
  width: calc(100% + 5px) !important;
  max-width: calc(100% + 5px) !important;
  justify-self: center !important;
}


/* === Sheet323: AC & Saves – Total Save column +5px, redistributed (no card width change) === */
/* Strong, scoped overrides to avoid collisions with earlier .save-row blocks */
.armor-saves-card .saving-header {
  grid-template-columns: 81px 42px 29px 35px 4px 35px 4px 36px !important;
  align-items: center !important;
}
.armor-saves-card .save-row {
  grid-template-columns: 96px 42px 29px 35px 4px 35px 4px 36px !important;
  align-items: center !important;
}

/* Ensure Total Save input stays centered under its header */
.armor-saves-card .save-cell { 
  display: flex !important; 
  justify-content: center !important; 
  align-items: center !important; 
}
.armor-saves-card input.save-box.save-total {
  width: 100% !important;
}


/* === Sheet324: Re-align Saving Throws headers above their columns (no field movement) === */
/* Match header grid math to the save-row grid so labels sit directly above inputs. */
.armor-saves-card .saving-header {
  grid-template-columns: 96px 37px 29px 37px 4px 37px 4px 37px !important;
  column-gap: 6px !important;
  align-items: center !important;
}


/* === Sheet325: Nudge Saving Throws input fields 3px left (no card width change) === */
/* Apply only to inputs, not headers or grid */
.armor-saves-card .save-row input[type="text"],
.armor-saves-card .save-row input[type="number"] {
  position: relative !important;
  left: -3px !important;
}


/* === Sheet328: Equip Slots – TOTAL EQUIPPED WEIGHT width -20% and right-aligned (no layout changes) === */
.equip-slots input.equip-total-weight{
  width: 64px !important;       /* 80px * 0.8 */
  min-width: 64px !important;
  max-width: 64px !important;
  display: block !important;
  margin-left: auto !important; /* right align inside its grid cell */
  margin-right: 0 !important;
}


/* === Sheet330: Keep TOTAL EQUIPPED WEIGHT on one horizontal line === */
.equip-slots .equip-row.equip-total-row .equip-label{
  white-space: nowrap !important;
}


/* === Sheet331: TOTAL EQUIPPED WEIGHT label spans row to prevent stacking === */
.equip-slots .equip-row.equip-total-row .equip-label{
  white-space: nowrap !important;
  grid-column: 1 / span 2 !important;
}

.equip-slots .equip-row.equip-total-row .equip-total-weight{
  grid-column: 3 !important;
}


/* === Sheet333: TOTAL EQUIPPED WEIGHT label and field on same row === */
/* Let the label span columns 1-2, and force the weight field into column 3 */
.equip-slots .equip-row.equip-total-row .equip-label{
  white-space: nowrap !important;
  grid-column: 1 / 3 !important;  /* span label across label+item columns */
}

.equip-slots .equip-row.equip-total-row input.equip-total-weight{
  grid-column: 3 !important;      /* keep aligned with Weight column */
  margin-left: auto !important;   /* right-align within the weight cell */
}


/* === Sheet335: Center-align specified fields (Back tab Weights, Skills card, Gold GP) === */

/* Back tab: center-align ALL Weight-related fields (Wt column + totals) */
.page-back input[placeholder="Wt"],
.page-back input[placeholder*="WEIGHT"],
.page-back input.equip-total-weight,
.page-back input.backpack-total-weight{
  text-align: center !important;
}

/* Skills card: center-align all fillable fields */
.skills-card input[type="text"],
.skills-card input[type="number"]{
  text-align: center !important;
}

/* Gold (GP) field */
input[name="attr_Gold"]{
  text-align: center !important;
}


/* === Sheet337: Center-align Sheaths & Bandoliers weight fields === */
.subcard.sheaths-bandoliers input[placeholder^="Wt"]{
  text-align: center !important;
}
.repeating_sheathsbandoliers input[placeholder^="Wt"]{
  text-align: center !important;
}


/* === Sheet338: Center-align Belt Pouches weight fields === */
.subcard.belt-pouches input[placeholder^="Wt"]{
  text-align: center !important;
}
.repeating_beltpouches input[placeholder^="Wt"]{
  text-align: center !important;
}


/* === Sheet339: Standardize total weight field widths + center totals (no card size changes) === */
/* Baseline is Total Equipped Weight width: 64px */

/* Match total weight fields to baseline width and keep right-aligned in their weight column */
.page-back input.backpack-total-weight,
.page-back input.sheath-total-weight,
.page-back input.pouch-total-weight{
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Center-align the numeric value inside total fields (Sheaths & Belt Pouches) */
.page-back input.sheath-total-weight,
.page-back input.pouch-total-weight{
  text-align: center !important;
}


/* === Sheet343: Backpack TOTAL BACKPACK WEIGHT visible label on same row (no card size changes) === */
.backpack-total-row{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  column-gap: 6px !important;
}

.backpack-total-row .backpack-total-label{
  white-space: nowrap !important;
}

/* keep the total field aligned with the weight column/right edge */
.backpack-total-row input.backpack-total-weight{
  justify-self: end !important;
}

.sheath-total-label{
  font-weight: bold;
  font-size: 0.8em;
  padding-right: 6px;
}

/* sheet345: Sheaths & Bandoliers total row label + field on same line without impacting other cards */
.sheath-total-row{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}
.sheath-total-row input{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* sheet345: Belt Pouches total row label (keeps total field aligned under weight column) */
.pouch-total-label{
  font-weight: bold;
  font-size: 0.8em;
  text-align: right;
  padding-right: 6px;
  white-space: nowrap;
}

/* sheet346: Belt Pouches total row label (aligns with Pouch Item fields) */
.belt-pouches .pouch-total-label{
  font-weight: bold;
  font-size: 0.8em;
  text-align: left;
  white-space: nowrap;
  justify-self: start;
  padding-right: 0;
}

/* sheet346 override: ensure left alignment wins */
.belt-pouches .pouch-total-label{ text-align: left; padding-right: 0; justify-self: start; }

/* sheet347: ensure label aligns with Pouch Item fields */
.belt-pouches .pouch-total-label{
  text-align: left;
  justify-self: start;
  white-space: nowrap;
}

/* sheet348: tighten visual alignment of TOTAL POUCH WEIGHT with Pouch Item fields */
.belt-pouches .pouch-total-label{
  padding-left: 0;
}

/* sheet349: Belt Pouches - right-align Total Pouch Weight field with Wt inputs */
.belt-pouches .pouch-total-row input.pouch-total-weight{
  width: 45px;
  min-width: 45px;
  box-sizing: border-box;
  justify-self: end;
}

/* sheet350: Belt Pouches - make Total Pouch Weight field match Wt input width & alignment */
.page-back .belt-pouches input.pouch-total-weight{
  width: 45px !important;
  min-width: 45px !important;
  max-width: 45px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch;
}

/* sheet357: Modified Light Load label styling */
.cap-grid-label.mod-light{
  font-size: 0.85em;
  font-style: italic;
}


/* sheet359: header line title + logo (inline, no layout disruption) */
.lfg-sheet-titlebar{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px 0;
  padding: 0;
}
.lfg-sheet-title{
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.lfg-sheet-logo{
  height: 18px;
  width: auto;
  opacity: 0.9;
  pointer-events: none;
  display: block;
}



/* sheet362: header logo size adjustment */
.lfg-sheet-logo{
  width: 300px;
  height: auto;
}

/* sheet363: align logo under main title and remove duplicate title */
.lfg-sheet-titlebar{
  justify-content: flex-start;
}

/* sheet364: Option B - logo only (remove header text) */
.lfg-sheet-title{ display: none !important; }
.lfg-sheet-titlebar{ justify-content: flex-start; }


/* sheet370: Initiative card (Front tab) */
.initiative-card{
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Anchor for absolute-positioned toggle button without shifting existing elements */
.initiative-card .initiative-row{
  position: relative;
}

.initiative-card .init-ready-toggle{
  position: absolute;
  left: -9999px;
}

.initiative-card .init-ready-btn{
  position: absolute;
  right: 5px;
  top: 0;

  width: 95px;
  height: 22px;
  border: 1px solid #999;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
}

.initiative-card .init-ready-btn::after{
  content: "I'M READY";
  color: #1a8f2a;
}

.initiative-card .init-ready-toggle:checked + .init-ready-btn::after{
  content: "I'M DONE";
  color: #b11a1a;
}

/* sheet371: Initiative button without moving label/input styles */
.initiative-card .initiative-row{
  display: flex;
  align-items: flex-start; /* align to top of initiative field */
  flex-wrap: nowrap;
  gap: 8px;
}

/* hide checkbox but keep it functional */
.initiative-card .init-ready-toggle{
  position: absolute;
  left: -9999px;
}

/* button sits immediately to the right of the initiative field (no overlap) */
.initiative-card .init-ready-btn{
  width: 110px;
  height: 22px;
  border: 1px solid #999;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  box-sizing: border-box;
  white-space: nowrap; /* always one line */
  line-height: 22px;
}

/* Default state */
.initiative-card .init-ready-btn::after{
  content: "I'M READY";
  color: #1a8f2a;
}

/* Toggled state */
.initiative-card .init-ready-toggle:checked + .init-ready-btn::after{
  content: "I'M DONE";
  color: #b11a1a;
}

/* sheet372: nudge initiative formula down to avoid overlap */
.initiative-card .initiative-formula{
  margin-top: 7px;
}

/* sheet379: Initiative reactions line (absolute, no layout impact) */
.initiative-card{
  position: relative;
}

.initiative-card .initiative-reactions{
  position: absolute;
  right: 0;
  top: 32px;
  display: flex;
  align-items: center;
  font-size: 11px;
}

.initiative-card .initiative-reactions-label{
  margin-right: 4px;
}

.initiative-card .initiative-reactions-box{
  width: 14px;
  border: none;
  border-bottom: 1px solid #000;
  text-align: center;
  font-size: 11px;
  background: transparent;
}

/* sheet381 regen: Reactions styling + alignment tweaks */
.initiative-card .initiative-reactions{
  font-size: 13px;
}
.initiative-card .initiative-reactions-label{
  color: #000;
  font-size: 13px;
}
.initiative-card .initiative-reactions-box{
  width: 22px;
  font-size: 13px;
}

/* sheet391: Balance Core Stats bottom spacing (HP -> Hit Rating -> Move Speed -> card bottom) */
.core-stats-card .hp-panel{
  margin-bottom: 5px;
}

.core-stats-card .corestat-row.hr-row{
  margin-top: 0px;
  margin-bottom: 5px;
}

.core-stats-card .corestat-row{
  margin-top: 0px;
}

.core-stats-card{
  padding-bottom: 5px;
}


.core-stats-card .corestat-row.hr-row {
  margin-top: 5px;
}

.core-stats-card .corestat-row.movespeed-row {
  margin-top: 5px;
}

/* sheet393: move ONLY Move Speed down 5px */
.core-stats-card .corestat-row.movespeed-row {
  margin-top: 5px;
}

/* sheet395: Core Stats spacing adjustments (from sheet393 baseline)
   - Increase gap between Hit Rating and Move Speed by 5px (without moving Hit Rating closer to Hit Points)
   - Reduce overall Core Stats card height by 5px
*/
.core-stats-card .corestat-row.hr-row{
  margin-bottom: 23px; /* 18px default + 5px */
}

.core-stats-card .corestat-row.movespeed-row{
  margin-top: 18px;    /* keep default top spacing */
  margin-bottom: 8px;  /* 18px default - 10px => net card height -5px after HR +5 */
}

/* sheet396: Hit Rating color + spacing */


/* sheet397: exact Initiative-blue for Hit Rating */
.core-stats-card .corestat-row.hr-row .corestat-label{
  color: #1e4db7;
}

/* sheet410: test roll button styling for Acrobatics skill label */
.skill-roll-btn{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: left !important;
  font: inherit !important;
  color: inherit !important;
  cursor: pointer;
}
.skill-roll-btn:hover{
  text-decoration: underline;
}

/* sheet411: remove Roll20 d20 icon from skill roll buttons to save horizontal space */
button[type="roll"].skill-roll-btn::before{
  display: none;
}