/* Workshop hardware gives the next action a clear silhouette without image labels. */
:root {
  --control-brass: #ba8b46;
  --control-amber: #eab65e;
  --control-paper: #f4e3bb;
  --control-steel: #284653;
  --control-clock: url('/workshop/assets/controls/clock-in-v1.webp');
  --control-market: url('/workshop/assets/controls/night-market-v1.webp');
  --control-upgrade: url('/workshop/assets/controls/upgrade-tool-v1.webp');
}

.start-button,
.entrance-dialog .entrance-primary,
.entrance-actions:not(:has(.entrance-primary)) > [data-entrance='new'] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 7px 18px 7px 10px;
  background: var(--control-amber);
  color: var(--ink);
  border: 1px solid #ffe0a0;
  border-left: 5px solid var(--control-brass);
  border-radius: 4px 15px 4px 4px;
  box-shadow: inset 0 2px #fff1c2, inset 0 -2px #b47c35, 0 4px 0 #79542d, 0 5px 0 #080f20;
  clip-path: none;
  line-height: 1.08;
  letter-spacing: .2px;
}

.start-button::before,
.entrance-dialog .entrance-primary::before,
.entrance-actions:not(:has(.entrance-primary)) > [data-entrance='new']::before {
  content: '';
  flex: none;
  width: 48px;
  height: 48px;
  background: var(--control-clock) center / contain no-repeat;
  pointer-events: none;
}

.start-button > svg,
.entrance-primary > svg { display: none; }
.start-button > span { min-width: 0; }
.start-button { min-height: 60px; }

/* Market and upgrade stay enamel-dark so the play plate retains priority. */
.command-dock .shop-button {
  min-height: 56px;
  padding: 5px 15px 5px 8px;
  gap: 11px;
  border: 1px solid #8e9a9a;
  border-left: 3px solid var(--control-brass);
  border-radius: 11px 3px 3px 3px;
  background: #172a40;
  color: var(--control-paper);
  box-shadow: inset 0 2px #354957, 0 3px 0 #090f20;
}
.command-dock .shop-button::before {
  content: '';
  flex: none;
  width: 48px;
  height: 48px;
  background: var(--control-market) center / contain no-repeat;
  pointer-events: none;
}
.command-dock .shop-button > svg { display: none; }
.command-dock .shop-button > span { min-width: 0; }

.crew-actions #inspect-upgrade,
.upgrade-offer .buy-button {
  position: relative;
  min-height: 48px;
  padding: 10px 12px 10px 46px;
  background: var(--control-steel);
  border: 1px solid var(--control-brass);
  border-radius: 3px 10px 3px 3px;
  color: var(--control-paper);
  box-shadow: inset 0 2px #617071, 0 3px 0 #111f2c;
  line-height: 1.3;
}
.crew-actions #inspect-upgrade::before,
.upgrade-offer .buy-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 7px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  background: var(--control-upgrade) center / contain no-repeat;
  pointer-events: none;
}
.crew-actions #inspect-upgrade { padding: 6px 6px 6px 35px; }
.crew-actions #inspect-upgrade::before { left: 3px; width: 28px; height: 28px; }
.market-tabs #market-upgrade { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.market-tabs #market-upgrade::before {
  content: '';
  flex: none;
  width: 26px;
  height: 26px;
  background: var(--control-upgrade) center / contain no-repeat;
}

/* Receipt actions use the same plate on paper; the label remains authoritative. */
.report-receipt .start-button {
  min-height: 52px;
  background: var(--control-amber);
  color: var(--ink);
  border-color: #ad7730;
  border-left-color: #8e642f;
  padding: 7px 12px;
  gap: 10px;
  box-shadow: inset 0 2px #fff1c2, inset 0 -2px #b47c35, 0 4px 0 #9c7949;
}
.report-receipt .start-button::before { width: 38px; height: 38px; }
/* Existing visibility hooks identify receipt destinations without extra runtime state. */
.report-dialog:has(#report-skip:not([hidden])):has(#report-overtime[hidden]):has(#relic-choice[hidden]) #report-close::before {
  background-image: var(--control-market);
}
.report-dialog:has(#relic-choice:not([hidden])) #report-close::before { display: none; }
.report-dialog:has(#relic-choice:not([hidden])) #report-close > svg { display: block; }


:is(.start-button, .entrance-primary, .shop-button, #inspect-upgrade, .upgrade-offer .buy-button, .entrance-actions > [data-entrance='new']):focus-visible {
  outline: 3px solid var(--control-paper);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 2px var(--ink), 0 4px 0 #79542d;
}
:is(.start-button, .entrance-primary, .shop-button, #inspect-upgrade, .upgrade-offer .buy-button, .entrance-actions > [data-entrance='new']):disabled {
  opacity: 1;
  background: #364657;
  color: #c3c8cc;
  border-color: #71808c;
  box-shadow: inset 0 1px #576573, 0 2px 0 #101a32;
  cursor: default;
}
:is(.start-button, .entrance-primary, .shop-button, #inspect-upgrade, .upgrade-offer .buy-button, .entrance-actions > [data-entrance='new']):disabled::before {
  filter: grayscale(1);
  opacity: .5;
}
@media (hover: hover) {
  :is(.start-button, .entrance-primary, .entrance-actions:not(:has(.entrance-primary)) > [data-entrance='new']):not(:disabled):hover { background: #f7cb80; color: var(--ink); }
  :is(.command-dock .shop-button, .crew-actions #inspect-upgrade, .upgrade-offer .buy-button):not(:disabled):hover { background: #354f5e; color: #fff1ce; }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.start-button, .entrance-primary, .shop-button, #inspect-upgrade, .upgrade-offer .buy-button, .entrance-actions > [data-entrance='new']) { transition: transform 100ms ease, background 100ms ease; }
  :is(.start-button, .entrance-primary, .shop-button, #inspect-upgrade, .upgrade-offer .buy-button, .entrance-actions > [data-entrance='new']):not(:disabled):active { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.start-button, .entrance-primary, .shop-button, #inspect-upgrade, .upgrade-offer .buy-button, .entrance-actions > [data-entrance='new']):active { transform: none; }
}

@media (max-width: 900px) {
  .command-dock .shop-button { min-height: 48px; padding: 4px 8px; gap: 7px; }
  .command-dock .shop-button::before { width: 34px; height: 34px; }
  .command-dock .start-button { min-height: 48px; gap: 7px; padding: 5px 10px 5px 6px; }
  .command-dock .start-button::before { width: 34px; height: 34px; }
}
@media (max-width: 600px) {
  .command-dock .shop-button { padding: 4px; gap: 5px; }
  .command-dock .shop-button::before { width: 28px; height: 28px; }
  .command-dock .shop-button > span { font-size: 12px; line-height: 1.2; }
  .command-dock .start-button { min-width: 128px; font-size: 20px; }
  .command-dock .start-button::before { width: 30px; height: 30px; }
  .shop-footer .start-button { min-height: 48px; padding: 5px 8px; gap: 7px; }
  .shop-footer .start-button::before { width: 32px; height: 32px; }
  .entrance-dialog .entrance-primary { padding: 7px 10px; gap: 8px; }
  .entrance-dialog .entrance-primary::before,
  .entrance-actions:not(:has(.entrance-primary)) > [data-entrance='new']::before { width: 32px; height: 32px; }
  .starter-footer .start-button::before { width: 32px; height: 32px; }
  .market-tabs #market-upgrade { padding-left: 7px; padding-right: 7px; gap: 5px; }
}
@media (max-width: 360px) {
  .command-dock { gap: 8px; }
  .command-dock .shop-button { flex: 1; }
  .command-dock .start-group { flex: none; }
  .command-dock .start-button { width: 128px; padding: 5px 5px; gap: 5px; }
  .command-dock .start-button::before { width: 28px; height: 28px; }
  .report-receipt .start-button { font-size: 19px; }
  .report-receipt .start-button::before { width: 32px; height: 32px; }
}
@media (max-height: 500px) {
  .entrance-dialog .entrance-primary::before,
  .entrance-actions:not(:has(.entrance-primary)) > [data-entrance='new']::before,
  .starter-footer .start-button::before { width: 28px; height: 28px; }
  .entrance-dialog .entrance-primary,
  .entrance-actions:not(:has(.entrance-primary)) > [data-entrance='new'] { min-height: 44px; }
  .report-receipt .start-button { min-height: 44px; padding: 5px 7px; font-size: 18px; }
  .report-receipt .start-button::before { width: 28px; height: 28px; }
}