/* How the industrial look (industrial-ui.css, era-ui.css, card-variants.css — kept as they came) sits in
   this game's layout. Loaded after them. */

/* ---- the market: a machine case; the action keys in a recessed bed ---- */
#markets.machine-case { padding: 14px 18px 16px; }
.panel.machine-case > .phead { border-bottom-color: color-mix(in srgb, var(--machine-edge) 45%, transparent); }
#actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; margin-bottom: 4px; }
.act-keys { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px; }
.act-turn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.actions .machine-key { min-height: 40px; padding: .45em .7em; font-size: 13.5px; }
.actions .machine-key[data-key-indicator] { padding-right: 18px; }
.actions .machine-key > .machine-icon { width: 1.3em; height: 1.3em; }
/* "End turn": the golden key at the right end, a little bigger */
.act-turn .machine-key.machine-gold { margin-left: auto; min-height: 44px; padding-inline: 1.3em; font-size: 14.5px; }
.act-turn .machine-key.suggest { border-style: dashed; color: var(--river); }

@media (max-width: 600px) {
  .actions .machine-key { min-height: 38px; }
}

/* ---- the cards: long town names get a smaller size instead of breaking in the middle of the word ---- */
:root[data-card-look="atlas"] .hcard.town:not(.wild) .hc-name.long { font-size: clamp(11.5px, 1.6vw, 13.5px); }
:root[data-card-look="atlas"] .hcard.town:not(.wild) .hc-name.xlong { font-size: clamp(11px, 1.4vw, 12.5px); letter-spacing: 0; }

/* ---- the era's ornaments (era-ornaments.css, ornaments.js): the stamp beside the era's name in the top bar,
   the divider in the hand's header, the corners of the map ---- */
#topinfo .tb-emblem { display: inline-grid; flex: none; margin: -3px 5px -3px -3px; color: var(--accent); vertical-align: middle; }
#topinfo .tb-emblem .orn-cart { width: 21px; height: 21px; }
#topinfo .tb-emblem .orn-rail { width: 30px; height: 18px; }
.dock-head .orn-divider { align-self: stretch; margin-block: 2px 0; }
.dock-head .orn-divider svg { width: 70px; height: 11px; }
.handdock.collapsed .dock-head .orn-divider { display: none; }
@media (max-width: 760px) { .dock-head .orn-divider { display: none; } }