
#Main_Screen_Game_Screen {
    height: calc(100% - 54px);
    position: absolute;
    width: calc(100% - 2px);
}

.game_panel_click {
    box-sizing: border-box;
    color: hsl(0, 0%, 90%);
    float: left;
    font-family: sans-serif;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    width: 70%;
}

.game_panel_shop {
    box-sizing: border-box;
    border-left: 1px solid hsl(0, 0%, 25%);
    color: hsl(0, 0%, 90%);
    float: left;
    font-family: sans-serif;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    width: 30%;
}

#Game_TopStats {
    display: flex;
    font-size: 130%;
    justify-content: space-between;
    margin-bottom: 16px;
}

#Game_BagContainer {
    margin-bottom: 16px;
}

#Game_BagLabel {
    margin-bottom: 4px;
}

#Game_BagBarTrack, #Game_TravelBarTrack {
    background-color: hsl(0, 0%, 15%);
    border: 1px solid hsl(0, 0%, 30%);
    height: 16px;
    width: 100%;
}

#Game_BagBarFill {
    background-color: hsl(210, 80%, 55%);
    height: 100%;
    transition: width 0.15s linear;
    width: 0%;
}

#Game_TravelBarFill {
    background-color: hsl(45, 90%, 55%);
    height: 100%;
    transition: width 0.15s linear;
    width: 0%;
}

#Game_TravelStatus {
    margin-bottom: 16px;
    visibility: hidden;
}

#Game_LocationLabel {
    font-style: italic;
    opacity: 0.85;
}

#Game_ShopTitle {
    font-size: 130%;
    margin-bottom: 12px;
}

.shop_item {
    margin-bottom: 16px;
}

.shop_item_info {
    font-size: 90%;
    margin-top: 4px;
    opacity: 0.85;
}

#Workforce_StockpileContainer {
    margin-top: 24px;
}

#Workforce_StockpileLabel {
    margin-bottom: 4px;
}

#Workforce_LoadBagButton {
    margin-top: 8px;
    max-width: 240px;
}

#Workforce_StockpileBarFill {
    background-color: hsl(30, 80%, 55%);
    height: 100%;
    transition: width 0.15s linear;
    width: 0%;
}

#Workforce_Summary {
    font-size: 90%;
    margin-top: 8px;
    opacity: 0.85;
}

#Lab_TopStats {
    display: flex;
    font-size: 130%;
    justify-content: space-between;
    margin-bottom: 16px;
}

#Lab_TechTitle {
    font-size: 130%;
    margin-bottom: 12px;
}

.tech_name {
    font-size: 110%;
    margin-bottom: 2px;
}

#Lab_BuildInfo {
    margin-bottom: 16px;
    max-width: 420px;
    opacity: 0.85;
}

#Lab_ResearchButton {
    margin-bottom: 16px;
}

#Facility_LockedMessage {
    font-style: italic;
    opacity: 0.85;
}

#Facility_BuildInfo {
    margin-bottom: 16px;
    max-width: 420px;
    opacity: 0.85;
}

#Facility_TopStats {
    font-size: 130%;
    margin-bottom: 16px;
}

#Facility_OreBufferContainer, #Facility_IngotBufferContainer {
    margin-bottom: 16px;
}

#Facility_OreBufferLabel, #Facility_IngotBufferLabel {
    margin-bottom: 4px;
}

#Facility_OreBufferBarTrack, #Facility_IngotBufferBarTrack {
    background-color: hsl(0, 0%, 15%);
    border: 1px solid hsl(0, 0%, 30%);
    height: 16px;
    width: 100%;
}

#Facility_OreBufferBarFill {
    background-color: hsl(30, 80%, 55%);
    height: 100%;
    transition: width 0.15s linear;
    width: 0%;
}

#Facility_IngotBufferBarFill {
    background-color: hsl(280, 60%, 65%);
    height: 100%;
    transition: width 0.15s linear;
    width: 0%;
}

#Facility_Summary {
    font-size: 90%;
    opacity: 0.85;
}

#Facility_ShopTitle {
    font-size: 130%;
    margin-bottom: 12px;
}

#Game_OfflineSummary {
    background-color: hsl(0, 0%, 12%);
    border: 1px solid hsl(120, 90%, 45%);
    box-shadow: 0px 0px 12px hsla(0, 0%, 0%, 0.6);
    left: 50%;
    max-width: 360px;
    padding: 16px;
    position: absolute;
    top: 80px;
    transform: translateX(-50%);
    z-index: 10;
}

#Game_OfflineSummaryTitle {
    font-size: 120%;
    margin-bottom: 8px;
}

#Game_OfflineSummary ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

#Main_Screen_Lab {
    bottom: 0px;
    box-sizing: border-box;
    color: hsl(0, 0%, 90%);
    font-family: sans-serif;
    height: calc(100% - 36px);
    padding: 16px;
    position: absolute;
    top: 34px;
    width: calc(100% - 2px);
}

#Main_Screen_Workforce {
    bottom: 0px;
    box-sizing: border-box;
    color: hsl(0, 0%, 90%);
    font-family: sans-serif;
    height: calc(100% - 36px);
    overflow-y: auto;
    padding: 16px;
    position: absolute;
    top: 34px;
    width: calc(100% - 2px);
}

#Workforce_Screen_ApplicantsHeader {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

#Workforce_RefreshApplicantsButton {
    width: 120px;
}

#Workforce_Screen_ApplicantsTitle, #Workforce_Screen_RosterTitle {
    font-size: 130%;
}

#Workforce_Screen_Roster {
    margin-top: 32px;
}

#Workforce_Screen_RosterTitle {
    margin-bottom: 12px;
}

#Workforce_ApplicantList, #Workforce_RosterList {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.worker_list_empty {
    opacity: 0.7;
}

.worker_card {
    background-color: hsl(0, 0%, 15%);
    border: 1px solid hsl(0, 0%, 30%);
    box-sizing: border-box;
    padding: 12px;
    width: 220px;
}

.worker_name {
    font-size: 110%;
    margin-bottom: 4px;
}

.worker_traits, .worker_wage {
    font-size: 90%;
    margin-bottom: 4px;
    opacity: 0.85;
}

.worker_status {
    font-size: 90%;
    font-style: italic;
    margin: 8px 0;
    min-height: 2.4em;
    opacity: 0.85;
}

.worker_job_select {
    background-color: hsl(0, 0%, 20%);
    border: 1px solid hsl(0, 0%, 35%);
    color: hsl(0, 0%, 90%);
    margin-top: 8px;
    padding: 4px;
    width: 100%;
}

.worker_card .shop_button {
    margin-top: 8px;
}

#Main_Screen_Settings {
    bottom: 0px;
    height: calc(100% - 36px);
    position: absolute;
    top: 34px;
    width: calc(100% - 2px);
}

#Main_Screen_Stats {
    bottom: 0px;
    height: calc(100% - 36px);
    position: absolute;
    top: 34px;
    width: calc(100% - 2px);
}

#Main_Screen_Credits {
    bottom: 0px;
    height: calc(100% - 36px);
    position: absolute;
    top: 34px;
    width: calc(100% - 2px);
}

/* Location operations, upgrades and crew management. */
#Main_Screen_Game_Screen { display: flex; }
.game_panel_click { float: none; width: 42%; flex: 0 0 42%; }
.game_panel_shop { float: none; width: 25%; flex: 0 0 25%; }
#LocationWorkforce { box-sizing: border-box; width: 33%; padding: 16px; overflow-y: auto; border-left: 1px solid #444; color: #eee; font-family: sans-serif; }
#LocationWorkforce h2 { font-size: 1.2rem; }
#LocationWorkforce label { display: block; margin: 8px 0; }
#LocationWorkforce select { width: 100%; }
.team_card { border: 1px solid #698575; padding: 10px; margin: 12px 0; }
#MineEquipmentShop button, #LocationWorkforce button { cursor: pointer; padding: 6px 10px; }
@media(max-width: 800px) {
 #Main_Screen_Game_Screen { flex-wrap: wrap; overflow-y: auto; }
 .game_panel_click, .game_panel_shop, #LocationWorkforce { flex: 0 0 100%; width: 100%; height: auto; overflow: visible; }
}

/* Keep all scrolling inside the game viewport, including tall team rosters. */
html, body { height: 100%; overflow: hidden; }
#Main_TopBar { box-sizing: border-box; height: 34px; }
#Main_Screen { position: relative; height: calc(100dvh - 34px); overflow: hidden; }
#Main_Screen_Game { position: relative; height: 100%; overflow: hidden; }
#Main_Screen_Game_TopBar { box-sizing: border-box; height: 22px; }
#Main_Screen_Game_Screen { box-sizing: border-box; inset: 22px 0 0; width: 100%; height: auto; overflow: hidden; align-items: stretch; }
.game_panel_click, .game_panel_shop, #LocationWorkforce { min-height: 0; min-width: 0; height: 100%; overscroll-behavior: contain; overflow-x: hidden; }
#Main_Screen > div:not(#Main_Screen_Game) { box-sizing: border-box; inset: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.team_slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.team_slot { min-width: 0; min-height: 110px; border: 1px dashed #66766e; border-radius: 8px; background: #202622; display: flex; flex-direction: column; overflow: hidden; }
.team_slot_lead { grid-column: 1 / -1; min-height: 150px; border: 2px solid #bca56a; background: #2c2a20; }
.team_slot_label { padding: 7px 9px; font-size: 0.8rem; color: #acbcb2; }
.team_slot_lead .team_slot_label { color: #e5cb88; }
#LocationWorkforce .team_add_worker { flex: 1; display: grid; place-items: center; width: 100%; min-height: 80px; border: 0; background: transparent; color: #b8cbbf; font-size: 2.5rem; }
#LocationWorkforce .team_slot_lead .team_add_worker { min-height: 110px; }
.team_add_worker:hover, .team_add_worker:focus-visible { background: #ffffff12 !important; outline: 2px solid #b8cbbf; outline-offset: -3px; }
#LocationWorkforce .worker_card { width: 100%; max-width: 100%; margin: 0; border: 0; background: transparent; overflow-wrap: anywhere; }
#LocationWorkforce [draggable="true"] { cursor: grab; }
#LocationWorkforce [draggable="true"]:active { cursor: grabbing; }
.unteamed_slots { display: grid; gap: 10px; min-height: 90px; padding: 4px; }
.team_drop_hint { padding: 12px; border: 1px dashed #66766e; color: #acbcb2; font-size: 0.85rem; }
.team_feedback { color: #e5cb88; }
.team_worker_picker { color: #eee; background: #222a25; border: 1px solid #87988c; border-radius: 10px; max-width: min(420px, 85vw); max-height: 75dvh; overflow: auto; }
.team_worker_picker::backdrop { background: #0009; }
.team_candidates { display: grid; gap: 8px; margin-bottom: 16px; }
@media(max-width: 800px) {
 #Main_Screen_Game_Screen { overflow-y: auto; align-content: flex-start; overscroll-behavior: contain; }
 .game_panel_click, .game_panel_shop, #LocationWorkforce { height: auto; overflow: visible; }
}

#Main_Screen_Settings { padding: 20px; color: #eee; font-family: sans-serif; }
.settings_danger, .settings_cancel { padding: 10px 18px; border: 1px solid transparent; border-radius: 5px; color: white; font: inherit; cursor: pointer; }
.settings_danger { background: #b92d32; border-color: #e35459; }
.settings_danger:hover:enabled { background: #d2363c; }
.settings_danger:disabled { opacity: 0.45; cursor: not-allowed; }
.settings_cancel { background: #51565d; border-color: #777d85; }
.settings_cancel:hover { background: #646b73; }
.settings_danger:focus-visible, .settings_cancel:focus-visible { outline: 2px solid white; outline-offset: 3px; }
#Settings_DeleteDialog { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border: 1px solid #656565; border-radius: 10px; background: #242424; color: #eee; font-family: sans-serif; }
#Settings_DeleteDialog::backdrop { background: #000a; }
#Settings_DeleteDialog h2 { margin-top: 0; }
#Settings_DeleteDialog p { line-height: 1.5; }
.settings_dialog_actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
#Settings_DeleteError:empty { display: none; }
#Settings_DeleteError { color: #ff9599; }

/* Compact crew and equipment tiles. Details remain anchored below the roster. */
#LocationWorkforce { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.location_roster_scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 2px 4px; overscroll-behavior: contain; }
#LocationWorkforce .team_slots { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding-top: 16px; }
#LocationWorkforce .team_slot { position: relative; flex: 0 0 68px; width: 68px; height: 68px; min-height: 0; aspect-ratio: 1; border-radius: 6px; box-sizing: border-box; align-items: center; justify-content: center; overflow: visible; }
#LocationWorkforce .team_slot_lead { flex-basis: 96px; width: 96px; height: 96px; min-height: 0; }
#LocationWorkforce .team_slot_label { display: none; }
#LocationWorkforce .team_slot_lead .team_slot_label { display: block; position: absolute; top: -23px; left: 0; padding: 0; white-space: nowrap; }
#LocationWorkforce .team_add_worker, #LocationWorkforce .team_slot_lead .team_add_worker { min-height: 0; height: 100%; padding: 0; font-size: 2rem; }
#LocationWorkforce .unteamed_slots { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; min-height: 80px; }
#LocationWorkforce .team_drop_hint { width: 100%; }
.worker_tile { position: relative; display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; min-width: 64px; min-height: 64px; box-sizing: border-box; aspect-ratio: 1; border: 1px solid #85978b; border-radius: 4px; background: #334b40; color: #f1f6f3; cursor: pointer; user-select: none; }
.worker_tile strong { font: 600 1.65rem sans-serif; pointer-events: none; }
.worker_tile.is_selected, .worker_tile:hover { border-color: #d8dfad; background: #45604f; }
.worker_tile:focus-visible { outline: 2px solid #f2dea2; outline-offset: 2px; }
.worker_gear_badge { position: absolute; right: 1px; bottom: 1px; width: 22px; height: 22px; background: #1b2620; border-radius: 3px; pointer-events: none; }
.worker_gear_badge svg { width: 100%; height: 100%; }
.worker_detail_panel { flex: 0 1 auto; max-height: 45%; overflow-y: auto; border-top: 1px solid #69776e; padding: 10px 4px; overscroll-behavior: contain; }
.worker_detail_panel h3 { margin: 0 0 8px; }
.worker_detail_panel dl { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5px 10px; font-size: 0.85rem; margin: 8px 0; }
.worker_detail_panel dt { color: #acbcb2; }
.worker_detail_panel dd { margin: 0; overflow-wrap: anywhere; }
.worker_detail_panel select { width: 100%; box-sizing: border-box; }
.worker_detail_panel label { display: block; margin: 8px 0; }
.worker_hover_tooltip { position: fixed; z-index: 50; pointer-events: none; max-width: min(320px, calc(100vw - 16px)); padding: 10px; border: 1px solid #8b9d90; border-radius: 5px; background: #15251e; color: #fff; box-shadow: 0 4px 16px #0008; font: 0.85rem/1.5 sans-serif; }
.equipment_categories, .equipment_variants, .equipment_inventory { display: flex; flex-wrap: wrap; gap: 10px; }
.equipment_inventory { min-height: 80px; padding: 10px; border: 1px dashed #66796d; border-radius: 5px; align-items: flex-start; }
.equipment_tile, #MineEquipmentShop .equipment_tile, #LocationWorkforce .equipment_tile { position: relative; display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; min-width: 64px; min-height: 64px; aspect-ratio: 1; padding: 7px; box-sizing: border-box; border: 2px solid; border-radius: 4px; cursor: pointer; color: #fff; }
.equipment_extraction { background: #234d32; border-color: #64a878; }
.equipment_logistics { background: #24445e; border-color: #659cc9; }
.equipment_tile svg { width: 44px; height: 44px; pointer-events: none; }
.category_tile { font-size: 2.3rem; }
.equipment_tile:hover:enabled { filter: brightness(1.2); }
.equipment_tile:disabled { opacity: .4; cursor: not-allowed; }
.equipment_buy_overlay { position: absolute; right: 1px; bottom: 0; font: bold 22px sans-serif; padding: 0 3px; border-radius: 3px; background: #122419dd; pointer-events: none; }
.tile_caption { text-align: center; margin-top: 5px; font-size: .8rem; }
.inventory_empty { color: #afbbb3; font-size: .85rem; }
#Workforce_WorkerDetails { max-height: none; margin-top: 16px; max-width: 460px; }
@media(max-width:800px) {
 #LocationWorkforce { height: min(85dvh, 800px); overflow: hidden; }
}

/* Named equipment slots and compact two-pair detail rows. */
.worker_detail_header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.worker_detail_header h3 { margin: 0; }
.worker_detail_panel dl { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.1fr); gap: 5px 8px; font-size: .8rem; }
.worker_equipment_slot { display: grid; place-items: center; box-sizing: border-box; flex: 0 0 64px; width: 64px; height: 64px; border: 1px dashed #91a297; border-radius: 5px; background: #202b24; color: #b4c9bb; font: 1.8rem sans-serif; cursor: pointer; }
.worker_equipment_slot:focus-visible { outline: 2px solid #f2dea2; outline-offset: 2px; }
.worker_equipment_slot .equipment_tile { margin: -1px; }
.equipment_price { position: absolute; top: 1px; right: 2px; padding: 1px 3px; border-radius: 3px; background: #101a15e8; color: white; font: 600 11px/1.2 sans-serif; pointer-events: none; }
.equipment_transport { background: #63502c; border-color: #d2af69; }
#MineEquipmentShop .equipment_extraction, #LocationWorkforce .equipment_extraction { border-color: #64a878; }
#MineEquipmentShop .equipment_logistics, #LocationWorkforce .equipment_logistics { border-color: #659cc9; }
#MineEquipmentShop .equipment_transport, #LocationWorkforce .equipment_transport { border-color: #d2af69; }
.equipment_tile.is_selected { outline: 2px solid #f2dea2; outline-offset: 2px; }
#PlayerEquipment { margin: 16px 0; }
#PlayerEquipment h3 { margin: 0 0 8px; font-size: 1rem; }
.player_equipment_slots { display: flex; gap: 16px; }
.player_equipment_slots .tile_caption { margin: 0 0 6px; }
#EquipmentMessage:empty { display: none; }
#EquipmentMessage { font-size: .85rem; color: #e5cb88; }
.worker_mode_controls { display: flex; gap: 8px; margin: 10px 0; }
.worker_mode_controls button { border: 1px solid #6b7a70; border-radius: 4px; padding: 6px 12px; background: #303a34; color: #eee; cursor: pointer; }
.worker_mode_controls button[aria-pressed="true"] { background: #46684f; border-color: #b8cbbf; }
.worker_stopping { color: #e6c879; font-size: .85rem; }
.worker_mode_badge { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; }
.mode_idle { background: #b9c1bc; }
.mode_working { background: #84e799; }
.mode_stopping { background: #efc467; }

.mode_idle { background: #f05b60; }
.equipment_groups { display: flex; flex-wrap: wrap; gap: 10px; }
.equipment_group { margin: 0; padding: 10px; min-width: 0; border: 1px solid #586a5e; border-radius: 5px; }
.equipment_group legend { padding: 0 5px; color: #c1d2c6; font-size: .85rem; }
.equipment_tile_wrap { position: relative; display: inline-flex; flex: 0 0 64px; width: 64px; height: 64px; }
.equipment_sell, #MineEquipmentShop .equipment_sell { position: absolute; top: -6px; left: -6px; z-index: 2; width: 21px; height: 21px; padding: 0; border: 1px solid #ff9d9d; border-radius: 4px; background: #b7242d; color: #fff; font: bold 11px/1 sans-serif; cursor: pointer; }
.equipment_sell:hover { background: #e03943; }
.equipment_sell:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.equipment_inventory { gap: 14px; }

/* Compact team cards keep their summary and worker slots together. */
#LocationWorkforce .team_card { padding: 8px; margin: 8px 0; }
.team_header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.team_header h4 { margin: 0; font-size: .9rem; }
.team_summary { font-size: .75rem; color: #bdcfc2; }
#LocationWorkforce .team_slots { gap: 8px; padding-top: 16px; }
#LocationWorkforce .team_slot_lead { flex-basis: 80px; width: 80px; height: 80px; }

#Main_Screen_Plots { padding: 20px; color: #eee; font-family: sans-serif; }
.plots_tabs { display: flex; gap: 10px; }
.plots_tabs button, .plot_card button { padding: 8px 14px; cursor: pointer; }
.plots_tabs [aria-pressed="true"] { background: #42654d; color: white; border: 1px solid #9bb4a1; }
.plots_list { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 16px; max-width: 1200px; }
.plot_card { padding: 16px; border: 1px solid #62776a; border-radius: 6px; background: #222b25; }
.plot_card h3 { margin-top: 0; }
#Plots_Alerts { color: #f3c16b; }
#Main_Screen_Game_TopBar { display: flex; gap: 8px; align-items: center; height: 32px; padding: 3px 6px; }
#Main_Screen_Game_Screen { top: 32px; }
#Main_Screen_Game_TopBar_ViewButton { float: none; width: 65px; height: 24px; margin: 0; }
#Game_PlotSelect { min-width: 160px; max-width: 70%; }
.plot_stock { margin: 12px 0; padding: 8px; border: 1px solid #49574d; }
#MineEquipmentShop select { max-width: 100%; }
#MineEquipmentShop label { display: block; margin: 10px 0; }
#Workforce_StockpileBarTrack { height: 16px; background: #333; }
#Main_TopBar { display: flex; gap: 4px; padding: 3px; }
#Main_TopBar .topbar_button { float: none; width: auto; flex: 1 1 0; min-width: 0; margin: 0; height: 26px; }
#Game_ShippingAlerts { color: #f2bf69; font: .8rem sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#Main_Screen_Plots { position: absolute; inset: 0; }
#Main_TopBar .button_text { font-size: clamp(.6rem, 1.8vw, 1rem); }
/* Keep focus changes inside panels from scrolling the whole application shell. */
body { position: fixed; inset: 0; width: 100%; height: 100dvh; }

/* Research unlocks keep the early game focused on the starter mine. */
[hidden] { display: none !important; }
#Main_Screen_Game_Screen { top: 0; }
#Main_Screen_Game_Screen.workforce_locked > .game_panel_click { flex: 1 1 65%; width: 65%; }
#Main_Screen_Game_Screen.workforce_locked > .game_panel_shop { flex: 1 1 35%; width: 35%; }
#Game_ShippingAlerts:empty { display: none; }
@media(max-width:800px) {
 #Main_Screen_Game_Screen.workforce_locked > .game_panel_click,
 #Main_Screen_Game_Screen.workforce_locked > .game_panel_shop { flex: 0 0 100%; width: 100%; }
}

/* Gentle navigation prompts remain until the player opens the screen. */
.attention_flash { animation: navigation-attention 2.4s ease-in-out infinite; }
@keyframes navigation-attention {
 0%, 65%, 100% { filter: brightness(1); }
 18%, 38% { filter: brightness(1.35); box-shadow: 0 0 7px #e9d38999; }
 28%, 48% { filter: brightness(1); }
}
#Workforce_Screen_ApplicantsHeader { justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
#Workforce_RefreshApplicantsButton { width: auto; padding: 0 12px; white-space: nowrap; }
.applicant_card { position: relative; }
.applicant_card .worker_name { padding-right: 90px; }
.applicant_dismiss { position: absolute; top: 8px; right: 8px; background: #a52b31; color: #fff; border: 1px solid #e2646a; border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.applicant_dismiss:hover { background: #c13a41; }
.applicant_timer { color: #c8c8c8; font-size: .85rem; margin: 6px 0; }
@media(prefers-reduced-motion:reduce) {
 .attention_flash { animation: none; outline: 2px solid #e9d389; outline-offset: -2px; }
}

/* Job colours stay distinct from the worker's red/green mode badge. */
.worker_tile.worker_role_extraction { background: #28583a; border-color: #69b87b; }
.worker_tile.worker_role_support { background: #274c74; border-color: #74aee8; }
.worker_tile.worker_role_transport { background: #715c20; border-color: #e2c65a; }
.worker_tile.worker_role_unassigned { background: #3b3d40; border-color: #8b9096; }
.worker_tile.is_selected { outline: 2px solid #f1ebc4; outline-offset: 2px; }
.worker_tile:hover { filter: brightness(1.15); }
#LocationWorkforce .team_header { position: relative; padding-right: 28px; }
#LocationWorkforce .team_dissolve { position: absolute; top: 0; right: 0; padding: 1px 5px; color: #fff; background: #a52b31; border: 1px solid #df777c; border-radius: 3px; line-height: 1.2; }
#LocationWorkforce .team_focus { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: .8rem; }
#LocationWorkforce .team_focus select { width: auto; flex: 1; min-width: 0; }

/* Plain action buttons share the topbar's green finish. */
#Main_Screen button:not([class]), #Main_Screen .focus_button {
 box-sizing: border-box; background: hsl(120, 90%, 60%); border: 1px solid hsl(120, 90%, 45%);
 box-shadow: inset 0 0 8px hsl(120, 90%, 25%); color: #fff; cursor: pointer;
 padding: 6px 10px; font: inherit; text-shadow: 0 1px 3px #000; border-radius: 2px;
}
#Main_Screen button:not([class]):hover:not(:disabled), #Main_Screen .focus_button:hover { filter: brightness(1.12); }
#Main_Screen button:not([class]):focus-visible, #Main_Screen .focus_button:focus-visible { outline: 2px solid #eee; outline-offset: 2px; }
#Main_Screen button:not([class]):disabled { background: #666; border-color: #4d4d4d; box-shadow: none; cursor: default; color: #ddd; }
#Main_Screen .plots_tabs button[aria-pressed="false"] {
 background: #202420; border: 1px solid hsl(120,90%,45%); color: hsl(120,90%,70%); box-shadow: none;
}
#Main_Screen .plots_tabs button[aria-pressed="true"] {
 background: hsl(120,90%,60%); border-color: hsl(120,90%,45%); color: #fff;
 box-shadow: inset 0 0 8px hsl(120,90%,25%);
}
#LocationWorkforce .team_focus { flex-wrap: wrap; }
#Main_Screen .focus_button { --focus-colour: hsl(120,90%,60%); --focus-border: hsl(120,90%,45%); --focus-shadow: hsl(120,90%,25%); }
#Main_Screen .focus_shipping { --focus-colour: hsl(48,90%,55%); --focus-border: hsl(48,90%,45%); --focus-shadow: hsl(48,90%,25%); }
#Main_Screen .focus_button[aria-pressed="true"] { background: var(--focus-colour); border-color: var(--focus-border); box-shadow: inset 0 0 8px var(--focus-shadow); }
#Main_Screen .focus_button[aria-pressed="false"] { background: #222; border-color: var(--focus-border); color: var(--focus-colour); box-shadow: none; }

/* Connected research graph with an inspection panel. */
#Main_Screen_Lab { padding: 20px; }
#Lab_Main { max-width: 1480px; margin: 0 auto; }
.research_header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.research_header h2 { margin: 4px 0 0; font-size: 1.7rem; }
.research_eyebrow, .research_detail_kicker { color: #a4b0a4; font-size: .68rem; letter-spacing: .13em; }
.research_header #Lab_Points { padding: 10px 16px; background: #27332a; border: 1px solid #6a8c6c; color: #cef1b4; font-size: 1.25rem; font-weight: bold; white-space: nowrap; }
.research_layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 16px; align-items: start; }
.research_tree_panel, #Research_Details { border: 1px solid #50594f; background: #282c28; border-radius: 5px; overflow: hidden; }
.research_tree_toolbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; gap: 12px; background: #343a33; font-size: .9rem; font-weight: bold; }
.research_zoom { display: flex; align-items: center; gap: 8px; font-size: .75rem; }
.research_zoom button { min-width: 30px; }
.research_legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 14px; font-size: .7rem; color: #c7cfc4; }
.research_legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: #657067; margin-right: 5px; }
.research_legend [data-status="complete"]::before { background: #76a977; }
.research_legend [data-status="available"]::before { background: #d8c66d; }
.research_legend [data-status="unfunded"]::before { background: #c18b58; }
#Research_Viewport { height: 474px; overflow: auto; touch-action: pan-x pan-y; cursor: grab; background-color: #1c211e; background-image: radial-gradient(#434c4144 1px, transparent 1px); background-size: 18px 18px; overscroll-behavior: contain; }
#Research_Viewport.is_dragging { cursor: grabbing; user-select: none; }
#Research_Stage { position: relative; }
#Research_Graph { position: absolute; top: 0; left: 0; transform-origin: top left; }
.research_edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.research_edges path { fill: none; stroke: #626d5f; stroke-width: 2; stroke-linejoin: round; }
.research_edges path.is_complete { stroke: #79a96f; }
.research_edges path.is_path { stroke: #e2cd82; stroke-width: 3; }
.research_node { all: unset; position: absolute; box-sizing: border-box; width: 160px; height: 110px; padding: 12px; display: flex; flex-direction: column; gap: 7px; border: 1px solid #626b61; border-radius: 5px; background: linear-gradient(#343b35,#282e29); color: #b3bdb0; cursor: pointer; box-shadow: 0 3px 6px #0005, inset 0 1px #ffffff0a; }
.research_node svg { width: 24px; height: 24px; flex: 0 0 24px; }
.research_node svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.research_node strong { font-size: .84rem; line-height: 1.15; }
.research_node_footer { display: flex; justify-content: space-between; gap: 4px; margin-top: auto; font-size: .63rem; }
.research_node[data-status="complete"] { border-color: #82ac76; color: #c6e1b8; background: linear-gradient(#3a523c,#293c2d); }
.research_node[data-status="available"] { border-color: #e0c46b; color: #f3e2a7; background: linear-gradient(#65582d,#463c23); }
.research_node[data-status="unfunded"] { border-color: #ac835a; color: #ddbf9d; background: linear-gradient(#4b4033,#322e29); }
.research_node[aria-pressed="true"] { outline: 2px solid #f6e7af; outline-offset: 3px; }
.research_node:hover { filter: brightness(1.15); }
.research_node:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.research_tree_hint { margin: 0; padding: 10px 14px; color: #a5b09f; font-size: .72rem; }
#Research_Details { padding: 20px; }
#Research_Details h2 { margin: 10px 0; font-size: 1.3rem; }
#Research_Details h3 { font-size: .8rem; color: #c2cdbb; margin: 20px 0 8px; }
#Research_Details p { font-size: .85rem; color: #bac5b6; line-height: 1.5; }
.research_detail_state { color: #c4af88; font-size: .72rem; }
.research_detail_state[data-status="complete"] { color: #a7d292; }
.research_detail_state[data-status="available"] { color: #ecd38b; }
.research_detail_cost { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; align-items: center; border-block: 1px solid #4c5549; padding: 12px 0; }
.research_detail_cost span { font-size: .7rem; color: #9fad99; }
.research_links { display: flex; flex-wrap: wrap; gap: 6px; }
#Main_Screen .research_links button { background: #252d25; border-color: #61705b; box-shadow: none; color: #c1d1b8; font-size: .75rem; text-align: left; }
#Research_Unlock { margin-top: 24px; }
.research_milestones_panel { margin-top: 20px; }
.research_milestones_panel h3 { margin-bottom: 6px; }
.research_milestones_panel > p { font-size: .8rem; color: #a5b09f; }
#Research_Milestones { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.research_milestone { display: flex; flex-direction: column; gap: 8px; border: 1px solid #4d5849; background: #272d27; padding: 14px; font-size: .8rem; }
.research_milestone span { font-size: .72rem; color: #b3bfac; }
.research_milestone.is_complete { border-color: #719665; }
@media(max-width:900px) { .research_layout { grid-template-columns: minmax(0,1fr); } #Research_Viewport { height: 420px; } #Research_Milestones { grid-template-columns: minmax(0,1fr); } #Main_Screen_Lab { padding: 12px; } }

/* Route casings make crossings readable while separate tracks avoid shared segments. */
.research_edges path.research_edge_halo { stroke: #1c211e; stroke-width: 7px; stroke-linecap: round; }
#Research_Milestones { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); }

/* Installed fixtures occupy actual floor squares; workers manage their local buffers. */
.factory_floor_scroll { overflow: auto; max-height: 360px; border: 1px solid #596052; padding: 8px; background: #1b211d; overscroll-behavior: contain; }
#Factory_Floor { display: grid; grid-template-columns: repeat(var(--floor-columns),48px); grid-auto-rows: 48px; gap: 4px; width: max-content; }
.factory_floor_cell { background: #2c332e; border: 1px dashed #4d5b50; border-radius: 3px; }
.fixture_tile { position: relative; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: 1fr 1fr; align-items: center; padding: 4px 7px; box-sizing: border-box; min-width: 0; background: #685137; color: #fff1d9; border: 2px solid #c29760; border-radius: 4px; cursor: grab; z-index: 1; font: inherit; }
.fixture_tile .fixture_icon { grid-row: 1 / 3; font-size: 1.5rem; }
.fixture_tile strong { font-size: .68rem; }
.fixture_tile > span:last-child { font-size: .62rem; }
.fixture_tile.is_selected { outline: 2px solid #f6dc9c; outline-offset: 1px; }
.fixture_tile:active { cursor: grabbing; }
.fixture_tile:focus-visible { outline: 2px solid white; }
.fixture_help { font-size: .75rem; color: #aab9ad; }
#Fixture_Message { font-size: .8rem; color: #eed092; }
#Fixture_Details { margin-top: 14px; border-top: 1px solid #566053; }
#Fixture_Details label { display: block; margin: 8px 0; }
#Fixture_Status { padding: 8px; background: #30372d; border-left: 3px solid #c9aa6c; font-size: .8rem; }
.fixture_flow { display: flex; gap: 6px; flex-wrap: wrap; font-size: .72rem; color: #bccbb9; margin: 12px 0; }
.fixture_flow span { background: #252d25; padding: 4px 6px; }
.fixture_staff { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,150px),1fr)); gap: 8px; }
.fixture_staff_slot { min-width: 0; padding: 8px; border: 1px dashed #8a927d; border-radius: 4px; background: #262e28; font-size: .75rem; }
.fixture_staff_slot > div { display: flex; flex-wrap: wrap; gap: 6px; min-height: 70px; align-items: center; padding: 8px 0; }
.fixture_staff_slot select { max-width: 100%; width: 100%; }
.fixture_buy_group, .fixture_variants { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-bottom: 12px; font-size: .75rem; }
.equipment_tile.fixture_machinery { background: #685137; border-color: #c29760; font-size: 1.5rem; }
#Main_Screen .focus_manufacturing { --focus-colour: hsl(30,85%,60%); --focus-border: hsl(30,85%,45%); --focus-shadow: hsl(30,85%,25%); }
