roll20-character-sheets/HopePunk/HopePunk.css

.charsheet .hopepunk-sheet {
  font-family: Arial, Helvetica, sans-serif;
  max-width: 1150px;
  color: #111;
}

.charsheet .sheet-header {
  border: 2px solid #111;
  padding: 12px;
  margin-bottom: 12px;
  background: #f7f7f7;
}

.charsheet h1 {
  margin: 0 0 8px 0;
  font-size: 32px;
  letter-spacing: 2px;
}

.charsheet h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  border-bottom: 2px solid #222;
}

.charsheet h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.charsheet .box {
  border: 1px solid #999;
  background: #fbfbfb;
  padding: 10px;
  margin-bottom: 12px;
}

.charsheet label {
  display: block;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 6px;
}

.charsheet input,
.charsheet textarea,
.charsheet select {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}

.charsheet textarea {
  min-height: 60px;
}

.charsheet .header-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.charsheet .header-grid .wide {
  grid-column: span 2;
}

.charsheet .skill-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.45fr) 44px 44px 52px 42px 52px 64px 64px 64px 62px minmax(115px, 1fr);
  gap: 5px;
  align-items: center;
  margin-bottom: 4px;
}

.charsheet .skill-header,
.charsheet .bonus-header {
  font-weight: bold;
  border-bottom: 1px solid #666;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.charsheet .skill-category {
  font-weight: bold;
  margin: 10px 0 4px 0;
  padding-top: 4px;
  border-top: 1px solid #aaa;
}

.charsheet .skill-name {
  font-weight: bold;
}

.charsheet .prof-check {
  width: auto;
  justify-self: center;
}


.charsheet .npc-override-check {
  width: auto;
  justify-self: start;
}


.charsheet .npc-override-label {
  align-self: end;
}

.charsheet .npc-override-fields {
  display: none;
  grid-column: span 2;
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.charsheet input[name="attr_npc_override"][value="1"]:checked ~ .npc-override-fields {
  display: grid;
}



.charsheet button[type="roll"]::before {
  content: "Roll";
}

.charsheet button.advantage-roll::before {
  content: "Advantage";
}

.charsheet button.disadvantage-roll::before {
  content: "Disadv.";
}

.charsheet button[type="action"] {
  width: 100%;
  font-size: 12px;
}

.charsheet .bonus-row {
  display: grid;
  grid-template-columns: 0.35fr 1.5fr 1.5fr 0.6fr;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}

.charsheet .hint {
  font-size: 12px;
  font-style: italic;
  margin-top: 0;
}


.charsheet .gear-grid {
  display: grid;
  gap: 8px;
}

.charsheet .gear-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.charsheet .gear-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.charsheet .gear-card {
  border: 1px solid #aaa;
  background: #fff;
  padding: 8px;
}

.charsheet .slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}


.charsheet .weapon-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}

.charsheet button.weapon-attack::before {
  content: "Attack";
}

.charsheet button.weapon-advantage::before {
  content: "Advantage";
}

.charsheet button.weapon-disadvantage::before {
  content: "Disadv.";
}


@media (max-width: 900px) {
  .charsheet .header-grid,
  .charsheet .gear-grid.two,
  .charsheet .gear-grid.three {
    grid-template-columns: 1fr;
  }

  .charsheet .header-grid .wide {
    grid-column: span 1;
  }

  .charsheet .npc-override-fields {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }

  .charsheet .skill-row {
    grid-template-columns: 1fr;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
  }

  .charsheet .bonus-row {
    grid-template-columns: 1fr;
  }
}


/* V12 roll button styling */
.charsheet button.skill-roll,
.charsheet .skill-row button[type="roll"]:not(.advantage-roll):not(.disadvantage-roll) {
  background: #f2f2f2;
  border-color: #888;
  color: #111;
}

.charsheet button.skill-roll::before,
.charsheet .skill-row button[type="roll"]:not(.advantage-roll):not(.disadvantage-roll)::before {
  content: "Roll";
}

.charsheet button.advantage-roll,
.charsheet button.weapon-advantage {
  background: #dff4e5;
  border-color: #2f8f4e;
  color: #145c2d;
  font-weight: bold;
}

.charsheet button.advantage-roll::before,
.charsheet button.weapon-advantage::before {
  content: "Adv.";
}

.charsheet button.disadvantage-roll,
.charsheet button.weapon-disadvantage {
  background: #f8dddd;
  border-color: #a33;
  color: #7a1111;
  font-weight: bold;
}

.charsheet button.disadvantage-roll::before,
.charsheet button.weapon-disadvantage::before {
  content: "Dis.";
}

.charsheet button.weapon-attack {
  background: #f2f2f2;
  border-color: #888;
  color: #111;
}

.charsheet button.weapon-attack::before {
  content: "Attack";
}


/* V13 custom Hope//Punk roll template */
.sheet-rolltemplate-hopepunk .sheet-roll-card {
  border: 1px solid #222;
  background: #f7f7f7;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  min-width: 220px;
}

.sheet-rolltemplate-hopepunk .sheet-roll-title {
  background: #222;
  color: #fff;
  font-weight: bold;
  padding: 5px 7px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sheet-rolltemplate-hopepunk .sheet-roll-row {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr;
  gap: 6px;
  padding: 4px 7px;
  border-top: 1px solid #ddd;
}

.sheet-rolltemplate-hopepunk .sheet-roll-row span:first-child {
  font-weight: bold;
}

.sheet-rolltemplate-hopepunk .sheet-roll-main {
  font-size: 1.05em;
}

.sheet-rolltemplate-hopepunk .sheet-roll-good {
  background: #e6f6e9;
}

.sheet-rolltemplate-hopepunk .sheet-roll-bad {
  background: #f8e1e1;
}


/* V14 advance/readiness display */
.charsheet input.advance-status[readonly] {
  background: transparent;
  border: none;
  color: #555;
  font-size: 11px;
  padding-left: 2px;
  box-shadow: none;
}

.charsheet input.advance-status[readonly]:focus {
  outline: none;
  box-shadow: none;
}


/* V15 skill row alignment fix */
.charsheet .skill-row {
  column-gap: 8px;
  align-items: center;
}

.charsheet .skill-header {
  align-items: end;
}

.charsheet .skill-row button[type="action"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
}

.charsheet input.advance-status[readonly] {
  width: 100%;
  min-width: 105px;
  height: 24px;
  line-height: 24px;
  box-sizing: border-box;
  display: block;
  margin: 0;
  padding: 0 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* V17: keep Move and Fly together on one line */
.charsheet .move-fly-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}

.charsheet .move-fly-pair label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.charsheet .move-fly-pair input[type="number"] {
  width: 52px;
}


/* V18 item trait dropdowns */
.charsheet .trait-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-items: center;
  margin: 4px 0;
}

.charsheet .trait-selects .trait-label {
  grid-column: 1 / -1;
  font-weight: bold;
  font-size: 11px;
}

.charsheet .trait-selects select {
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

.sheet-rolltemplate-hopepunk .sheet-roll-row span:last-child {
  word-break: break-word;
}


/* V19 Adv/Dis selector */
.charsheet .header-grid select[name="attr_advdis_level"] {
  width: 78px;
  min-width: 78px;
}


/* V21 Strain Status display */
.charsheet input.strain-status[readonly] {
  background: transparent;
  border: none;
  color: #555;
  padding-left: 2px;
  box-shadow: none;
}

.charsheet input.strain-status[readonly]:focus {
  outline: none;
  box-shadow: none;
}