:root {
  --accent: #24526a;
}

.repair-desk {
  max-width: 37rem;
}

.limit {
  margin: .45rem 0;
  font-weight: 700;
}

#punch-card {
  width: min(100%, 26rem);
  margin: .85rem 0 .5rem;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

#punch-card th {
  padding: .25rem 0;
  color: #334b56;
  font-size: .85rem;
}

#punch-card td {
  padding: 1px 0;
}

.clue {
  display: block;
  white-space: nowrap;
}

.clue[data-mismatch="true"] {
  color: #8b411c;
  text-decoration: underline;
  text-underline-offset: .12em;
}

.hole {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  background: #f1e5c9;
  border-color: #766647;
}

.hole::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid #25434e;
  border-radius: 50%;
}

.hole[aria-pressed="true"]::before {
  background: #25434e;
}

.hole[data-changed="true"] {
  box-shadow: inset 0 0 0 2px #8b411c;
  background: #fae0b2;
}

.hole:focus-visible {
  outline-offset: -5px;
}

.card-legend {
  color: #334b56;
}

#hint {
  margin-top: .75rem;
}

#hint summary {
  padding: .55rem 0;
  min-height: 44px;
  color: var(--accent);
  cursor: pointer;
}