/* Enamel faces, brass edges and painted icons share the factory's material palette. */
:root {
  --button-height: 44px;
  --button-font-size: 12px;
  --button-icon-size: 32px;
  --button-face: linear-gradient(#fffdf3 0%, #f3eedb 54%, #e8dfc4 100%);
  --button-hover: linear-gradient(#fffef7, #f6efd9 55%, #eee0b9);
  --button-pressed: linear-gradient(#e4dac0, #f5efdc);
  --button-edge: #b9a77b;
  --button-edge-hover: #917747;
  --button-ink: #42543c;
  --button-shine: #fffdf5;
  --button-shadow: #78644333;
  --button-focus: #8a632a;
}

.button,
.icon-button,
#sidebar .header-actions .icon-button,
.cc-middle-tabs > button,
.cc-buy-modes > button,
.segmented > button,
.cc-store .production-section .segmented > button,
.cc-upgrade-tile,
.cc-store .production-section .business-purchase{
  border: 1px solid var(--button-edge);
  border-radius: 5px;
  background: var(--button-face);
  color: var(--button-ink);
  box-shadow:
    inset 0 1px 0 var(--button-shine),
    inset 0 0 0 1px #ffffff36,
    inset 0 -2px 0 #78644314,
    0 2px 0 var(--button-shadow),
    0 3px 5px #293b2810;
  font-weight: 600;
  text-shadow: 0 1px 0 #ffffff70;
  transition: background .16s ease-out, border-color .16s ease-out, box-shadow .16s ease-out, color .16s ease-out;
  touch-action: manipulation;
}

.button-primary,
.cc-middle-tabs > button:is(.active, [aria-current='page']),
.cc-buy-modes > button.selected,
.segmented > button.selected,
.cc-store .production-section .segmented > button.selected{
  --button-face: linear-gradient(#57765b, #3d6048 55%, #2c4f3b);
  --button-hover: linear-gradient(#527353, #41694b 55%, #34583f);
  --button-pressed: linear-gradient(#274735, #3e6249);
  --button-edge: #3d5940;
  --button-edge-hover: #a58b53;
  --button-ink: #fff4d5;
  --button-shine: #a4b58a80;
  --button-shadow: #1c382847;
  border-color: var(--button-edge);
  background: var(--button-face);
  color: var(--button-ink);
  text-shadow: 0 1px 1px #142e2859;
}

.button-danger {
  --button-face: linear-gradient(#fff4e9, #ecd4c1);
  --button-hover: linear-gradient(#fff1e2, #e8c4ab);
  --button-pressed: linear-gradient(#ddb79e, #f3ddca);
  --button-edge: #bd9379;
  --button-edge-hover: #966a50;
  --button-ink: #864d36;
}

.button:hover:not(:disabled),
.icon-button:hover:not(:disabled),
#sidebar .header-actions .icon-button:hover,
.cc-middle-tabs > button:hover:not(:disabled),
.cc-buy-modes > button:hover:not(:disabled),
.segmented > button:hover:not(:disabled),
.cc-store .production-section .segmented > button:hover:not(:disabled),
.cc-upgrade-tile:hover:not(:disabled),
.cc-store .production-section .business-purchase:hover:not(:disabled){
  border-color: var(--button-edge-hover);
  background: var(--button-hover);
  color: var(--button-ink);
  box-shadow: inset 0 1px 0 var(--button-shine), inset 0 0 0 1px #fff8df55, 0 2px 0 var(--button-shadow), 0 3px 7px #293b2824;
  transform: none;
}

.button:active:not(:disabled),
.icon-button:active:not(:disabled),
#sidebar .header-actions .icon-button:active,
.cc-middle-tabs > button:active:not(:disabled),
.cc-buy-modes > button:active:not(:disabled),
.segmented > button:active:not(:disabled),
.cc-store .production-section .segmented > button:active:not(:disabled),
.cc-upgrade-tile:active:not(:disabled),
.cc-store .production-section .business-purchase:active:not(:disabled){
  background: var(--button-pressed);
  box-shadow: inset 0 2px 4px #25362735, inset 0 0 0 1px #fff8df28;
  transform: none;
  transition-duration: .06s;
}

.cc-middle-tabs > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.cc-middle-tabs > button > .icon { width: 17px; height: 17px; }
.cc-middle-tabs > button:is(.active, [aria-current='page']) {
  border-color: #a48b54;
  box-shadow: inset 0 1px 0 #ccd5aa70, inset 0 -2px 0 #c7a766, 0 2px 0 #1c382847;
}

.cc-buy-modes,
.segmented,
.cc-store .production-section .segmented{
  border-color: #c5c8ac;
  border-radius: 6px;
  background: linear-gradient(#d8dfc8, #e5e9d7);
  box-shadow: inset 0 1px 3px #4053311f, 0 1px 0 #fffaf2;
}
.cc-buy-modes > button,
.segmented > button,
.cc-store .production-section .segmented > button{
  border-color: transparent;
  background: transparent;
  color: #536148;
  box-shadow: none;
}
.cc-buy-modes > button.selected,
.segmented > button.selected,
.cc-store .production-section .segmented > button.selected{
  border-color: #71805b;
  background: var(--button-face);
  color: var(--button-ink);
  box-shadow: inset 0 1px 0 #c3cf9b65, inset 0 -2px 0 #c4a568, 0 1px 2px #29452b24;
}

/* Navigation plates keep their existing dimensions and click targets. */
.cc-management-nav .nav-item {
  border-radius: 5px;
  color: #55644b;
  box-shadow: inset 0 0 0 1px #9cab8d30;
  text-shadow: 0 1px 0 #ffffff80;
  transition: background .16s ease-out, color .16s ease-out, box-shadow .16s ease-out;
}
.cc-management-nav .nav-item:hover {
  background: linear-gradient(#fffdf3, #ece8d3);
  color: #334c3b;
  box-shadow: inset 0 0 0 1px #b7a778, inset 0 2px 0 #ffffff80, 0 2px 0 #78644326;
}
.cc-management-nav .nav-item.active {
  color: #fff4d5;
  background: linear-gradient(#547359, #32553f);
  box-shadow: inset 0 0 0 1px #63704a, inset 0 2px 0 #b9c59960, inset 0 -2px 0 #c3a363, 0 2px 0 #293c2826;
  text-shadow: 0 1px 1px #142e2859;
}
.cc-management-nav .nav-item.active:hover { background: linear-gradient(#527353, #41694b 55%, #34583f); }
.cc-management-nav .nav-item:active { box-shadow: inset 0 2px 4px #25362740, inset 0 0 0 1px #9a895e; }

.cc-upgrade-tile > .icon { filter: drop-shadow(0 1px 1px #47371626); }
.cc-upgrade-tile:is(.selected, .owned, .purchased) { border-color: #8e9d6c; background: linear-gradient(#f9faea, #d7e3bf); }

/* Row links and the replenishment switch stay light within their content cards. */
.text-button{
  color: #596643;
  text-decoration: underline;
  text-decoration-color: #8e98627a;
  text-underline-offset: 4px;
  transition: color .16s ease-out, background .16s ease-out;
}
.text-button:hover { color: #2f5139; text-decoration-color: #8a632a; }

.cc-work-item:hover { background: linear-gradient(90deg, #ecebd6, #faf5e5); box-shadow: inset 3px 0 0 #a98a4e; }
.cc-work-item:active { background: #e3e5cd; }

.cc-landmark .cc-company-name { border-radius: 4px; transition: color .16s ease-out; }
.cc-landmark .cc-company-name:hover { color: #284f35; }

.button:disabled,
.button-muted,
.icon-button:disabled,
.cc-middle-tabs > button:disabled,
.cc-buy-modes > button:disabled,
.segmented > button:disabled,
.cc-store .production-section .segmented > button:disabled,
.cc-upgrade-tile:disabled,
.cc-store .production-section .business-purchase:disabled{
  border-color: #cdd1bd;
  background: #e8eadd;
  color: #858c74;
  box-shadow: inset 0 1px 0 #f7f8ee;
  text-shadow: none;
  transform: none;
  cursor: default;
}

button:focus-visible,
.cc-work-item:focus-visible,
.cc-landmark .cc-factory-action:focus-visible,
.import-button:focus-within {
  outline: 3px solid var(--button-focus);
  outline-offset: 3px;
}
.cc-landmark { --button-focus: #f0ca78; }

/* Image-only targets share the briefcase's bare surface and press feedback. */
.cc-artwork-action,
.cc-landmark .cc-factory-action {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .16s ease;
}
.cc-artwork-action:hover:not(:disabled),
.cc-landmark .cc-factory-action:hover:not(:disabled) { background: transparent; transform: translateY(-3px); }
.cc-artwork-action:active:not(:disabled),
.cc-landmark .cc-factory-action:active:not(:disabled) { transform: scale(.98); }
.cc-artwork-action:disabled,
.cc-landmark .cc-factory-action:disabled { background: transparent; opacity: .72; cursor: default; }

@container game-shell (max-width: 700px) {
  .cc-middle-tabs > button { gap: 5px; }
}
@container game-shell (max-width: 370px) {
  .cc-middle-tabs > button { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-artwork-action,
  .cc-landmark .cc-factory-action { transition: none; }
}

/* Shared control dimensions and type; artwork and purchase cards retain their visual area. */
:is(#app, #dialog) :is(button, .button, .nav-item):not(.cc-artwork-action, .cc-factory-action, .business-purchase, [data-achievement], [data-achievement-goal]) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding-block: 0;
  flex-shrink: 0;
  font-size: var(--button-font-size);
  line-height: 1.25;
  white-space: nowrap;
}
:is(#app, #dialog) :is(button, .button, .nav-item):not(.cc-artwork-action, .cc-factory-action, .business-purchase, [data-achievement], [data-achievement-goal]) :is(span:not(.icon), strong, small, b, em) {
  font-size: inherit;
}
:is(#app, #dialog) :is(button, .button, .nav-item):not(.cc-artwork-action, .cc-factory-action, .business-purchase, [data-achievement], [data-achievement-goal]) .icon {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  flex: 0 0 var(--button-icon-size);
}
:is(#app, #dialog) :is(.icon-button, .cc-upgrade-tile) {
  width: var(--button-height);
  min-width: var(--button-height);
  padding-inline: 5px;
}
.cc-landmark .cc-company-name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bright enamel is available; all blocked upgrades share a recessed metal face. */
.cc-store .cc-upgrade-tile.ready {
  border-color: #65854c;
  background: linear-gradient(#f8ffdf, #d8e9b9 58%, #bfd49a);
  box-shadow: inset 0 1px 0 #ffffeb, inset 0 0 0 1px #ffffff65, 0 2px 0 #506d3a35, 0 0 7px #b8d67d55;
}
.cc-store .cc-upgrade-tile.ready:hover {
  border-color: #426b32;
  background: linear-gradient(#fffde4, #e1f0c5 58%, #cce1a4);
  box-shadow: inset 0 1px 0 #fffef0, inset 0 0 0 1px #9fbd72, 0 2px 0 #506d3a35, 0 0 9px #b8d67d80;
}
.cc-store .cc-upgrade-tile.unavailable {
  border-color: #a8b09d;
  border-style: dashed;
  background: linear-gradient(#e1e5d9, #cbd2c2);
  box-shadow: inset 0 1px 3px #59624b1c;
}
.cc-store .cc-upgrade-tile.unavailable > .icon { opacity: .5; filter: grayscale(1) brightness(.85); }