/* Base layout */
body {
  font-family: sans-serif;
  margin: 1em;
}
h1 {
  text-align: center;
  margin-bottom: 1em;
}

/* Pools & controls */
#pools, #controls {
  text-align: center;
  margin-bottom: 1em;
}
#pools label,
#controls button,
#controls input[type="file"] {
  margin: 0.2em;
}

/* Grid for sheets */
.sheet-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem;
}
@media (max-width: 800px) {
  .sheet-container {
    grid-template-columns: 1fr;
  }
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  table-layout: auto;       /* allow dynamic column sizing */
}
th, td {
  border: 1px solid #888;
  padding: 0.4em;
  text-align: left;
  white-space: nowrap;      /* prevent wrapping */
}
th {
  background: #f0f0f0;
}

/* Inputs */
input[type="text"],
input[type="number"] {
  box-sizing: border-box;
  border: none;
  background: transparent;
  padding: 0;               /* remove default padding */
  margin: 0;                /* remove default margin */
  font: inherit;            /* match surrounding font */
}

/* Stat Value & Skill Level fields */
input[data-field="value"],
input[data-field="level"] {
  width: 3ch;
  min-width: 3ch;
}

/* Point‐cost fields */
.cost-input,
input[data-field="spent"] {
  width: 3ch;
  min-width: 3ch;
  display: inline-block;
}

/* Align currency symbols */
label span,
td span {
  vertical-align: middle;
}

/* Bold totals */
strong {
  font-weight: bold;
}