.bench-work-area {
  border-block: 1px solid #8195a65c;
  padding: 8px 0 10px;
}
.bench-content h3 {
  font-family: Georgia, serif;
  font-size: 20px;
  margin: 12px 0 8px;
}
.bench-repair-list {
  display: grid;
  gap: 10px;
}
.bench-repair-card {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: 1px solid #8195a6;
  border-radius: 6px 6px 12px 12px;
  color: #eeeae3;
  background: linear-gradient(125deg, #29343e, #111b24);
}
.bench-repair-card span {
  color: #b9cbd7;
  font-size: 14px;
}
.bench-repair-card:disabled {
  opacity: 0.65;
}
.bench-repair-card[aria-pressed="true"] {
  border-color: #b6e5ff;
  background: #234355;
}
.bench-supplies .gothic-materials {
  margin-top: 0;
}
.bench-supplies .gothic-materials > div > .material-icon {
  height: 42px;
}
.component-icon {
  display: inline-flex;
  width: 60px;
  height: 44px;
  flex: 0 0 auto;
  color: #acc5d7;
  pointer-events: none;
}
.component-wood {
  color: #c4a888;
}
.component-fiber {
  color: #d2c9ac;
}
.slot:not(.fitted) .component-icon {
  color: #8c9da8;
  opacity: 0.7;
}
.component-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px #0008);
}
.slot:not(.fitted) .component-icon img {
  filter: grayscale(1) brightness(0.65);
}
.repair-surface .part {
  width: 82px;
  height: 78px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 3px;
}
.part small {
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
}
.repair-surface #parts-tray {
  gap: 12px;
}
.repair-surface .repair-tip {
  font-size: 14px !important;
}
.bench-content [role="status"] {
  padding: 12px;
  color: #d2f0ff;
  border-left: 2px solid #a8d6ec;
  background: #233c49;
}
.repair-surface #repair-board {
  height: 124px;
  margin: 10px 0 12px;
  border-radius: 28px 28px 8px 8px;
}
.repair-surface .repair-object {
  height: 88px;
  border-radius: 22px 22px 6px 6px;
}
.repair-surface .slot {
  top: 14px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.repair-surface #repair-progress {
  padding: 6px;
  margin: 10px 0 0;
  border: 0;
  background: transparent;
}
.repair-surface .repair-tip {
  margin: 6px 0;
}
dialog.bench-panel {
  padding-top: 12px;
  padding-bottom: 18px;
}
.bench-panel > .gothic-crest {
  height: 30px;
  margin: 0 32px 4px;
}
.bench-panel .bench-content p {
  margin-block: 8px;
  line-height: 1.5;
}
.bench-panel #repair-title {
  font-size: clamp(22px, 5.5vw, 26px);
  line-height: 1.15;
  margin: 6px 0 8px;
}
.bench-panel .bench-content .primary {
  margin-top: 10px;
}
.bench-panel .bench-supplies .gothic-materials > div {
  padding: 6px;
  gap: 2px 5px;
}

/* Keep requirements secondary to the repair workspace. */
.bench-unlock-panel {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #8ba2af;
  border-radius: 6px 6px 12px 12px;
  background: linear-gradient(135deg, #24323b, #10191f);
}
.bench-required-level {
  display: grid;
  place-items: center;
  padding: 5px 2px;
  border: 1px solid #6d7780;
  border-radius: 7px;
  background: #24292e;
  color: #b8bfc5;
}
.bench-required-level strong {
  font:
    bold 32px/1.1 Georgia,
    serif;
}
.bench-required-level span {
  font-size: 9px;
  letter-spacing: 1px;
}
.bench-required-level.met {
  color: #ffe1a0;
  border-color: #d3b46e;
  background: linear-gradient(145deg, #476575, #18313c);
}
.bench-unlock-summary {
  min-width: 0;
}
.bench-unlock-summary h3 {
  margin: 0;
  font-size: 16px;
}
.bench-panel .bench-unlock-summary .bench-unlock-state {
  margin: 3px 0 5px;
  font-size: 11px;
  line-height: 1.3;
  color: #c0cbd1;
}
.bench-unlock-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.bench-unlock-cost {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 11px;
  white-space: nowrap;
}
.bench-cost-name {
  text-transform: capitalize;
}
.bench-unlock-cost strong {
  font-size: 12px;
}
.bench-unlock-cost.met {
  color: #c2ead9;
}
.bench-unlock-cost.missing {
  color: #edd1b0;
}
.bench-unlock-cost.missing strong {
  text-decoration: underline dotted;
}
.bench-cost-symbol.coins {
  color: #e6cc82;
}
.bench-cost-symbol.wood {
  color: #e8b974;
}
.bench-cost-symbol.scrap {
  color: #82d9f3;
}
.bench-cost-symbol.fiber {
  color: #b5d985;
}
.bench-panel .bench-content .bench-unlock-panel > .primary {
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  font-size: 12px;
}
@media (max-width: 420px) {
  .bench-unlock-panel {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 7px;
  }
  .bench-panel .bench-content .bench-unlock-panel > .primary {
    grid-column: 2;
    justify-self: start;
  }
}