/* Orders, costs and results share the same visual language throughout the game. */
.building-inspector { width: 320px; max-height: min(70vh,680px); overflow: auto; overscroll-behavior: contain; padding: 20px; background: #f7efdf; border: 1px solid #cdb98e; box-shadow: 0 12px 50px #42331840; }
.inspector-heading { align-items: start; gap: 12px; }.inspector-heading .eyebrow { font-size: 8px; color: #8a734e; }.building-inspector h2 { margin: 5px 0 14px; font-size: 29px; }.building-inspector p { font-size: 12px; line-height: 1.55; }.building-inspector .details { font-size: 10px; color: #7f6c50; padding: 8px 0; }
.effect-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: #e4e9d8; border: 1px solid #bac8a1; border-radius: 7px; color: #415a38; }.effect-card>.icon { width: 23px; height: 23px; flex-shrink: 0; }.effect-card small { display: block; font-size: 8px; letter-spacing: .1em; margin-bottom: 3px; }.effect-card strong { font-size: 12px; line-height: 1.4; display: block; }
.upgrade-card { background: #fffaf0; border: 1px solid #d7c6a6; border-radius: 8px; padding: 13px; margin: 10px 0 14px; }.upgrade-card>div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }.upgrade-card>div:first-child>span { color: #8a734e; font-size: 10px; white-space: nowrap; }.upgrade-card p { margin: 8px 0; }.upgrade-card>small { font-size: 8px; color: #8a734e; letter-spacing: .08em; }.upgrade-card>.button { margin-top: 10px; }
.cost-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }.cost-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #d9c8a7; background: #f5eddf; border-radius: 5px; padding: 5px 6px; font-size: 11px; font-weight: 600; color: #6d5836; }.cost-chip .icon { width: 13px; height: 13px; }.cost-chip small { font-size: 9px; font-weight: 400; }.cost-chip.missing { background: #fae8df; color: #9f472f; border-color: #dca58b; }.cost-chip.free { color: #4f6741; background: #e4eadb; border-color: #c3cfb3; }.building-option .cost-chips { margin: 8px 0; }.building-option .cost-chip { padding: 4px; font-size: 10px; }.building-option .building-effect { min-height: 30px; color: #527044; }.building-option.unaffordable { opacity: 1; }.building-option.unaffordable .building-size { color: #a04e38; }
.action-reason { color: #9d4833; font-size: 11px!important; margin: 6px 0 0!important; }.action-reason:empty { display: none; }.action-cost { background: #efe5d2; border-radius: 5px; padding: 10px; margin: 10px 0 7px; }.action-cost>small { display: block; font-size: 8px; letter-spacing: .09em; color: #8a734e; margin-bottom: 4px; }.action-cost>strong { font-size: 12px; }.action-effect { color: #507046; font-size: 12px; font-weight: 600; margin: 5px 0 10px; }
.worker-role { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }.worker-role>.icon { width: 20px; color: #846337; }.worker-role>strong { font-size: 13px; }.worker-role>.pill { margin-left: auto; background: #e6ecda; color: #4f6741; }
.worker-activity { position: relative; background: #e5eadd; border: 1px solid #bdc9ad; padding: 12px 12px 10px 29px; border-radius: 7px; margin: 13px 0 17px; }.worker-activity>strong { display: block; font-size: 12px; color: #465d3b; }.worker-activity>small { display: block; color: #738267; font-size: 10px; margin-top: 4px; }.activity-dot { position: absolute; left: 12px; top: 15px; width: 7px; height: 7px; background: #638652; border-radius: 50%; }.activity-track { height: 3px; background: #ccd6bc; border-radius: 3px; overflow: hidden; margin-top: 10px; }.activity-track>span { display: block; height: 100%; background: #638652; width: 0; transition: width .2s linear; }.worker-activity[data-phase=blocked],.worker-activity[data-phase=waiting],.worker-activity[data-phase=paused] { background: #efe4d0; border-color: #d3bc93; }.worker-activity[data-phase=blocked] strong,.worker-activity[data-phase=waiting] strong,.worker-activity[data-phase=paused] strong { color: #8d693e; }
.order-heading { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }.order-heading>strong { font-size: 12px; }.order-heading>span { font-size: 9px; color: #8a7758; }.worker-orders { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.worker-order { display: flex; align-items: center; gap: 7px; padding: 11px 9px; text-align: left; background: #fffaf0; border: 1px solid #d4c3a3; border-radius: 6px; color: #655235; min-height: 58px; }.worker-order>.icon { width: 18px; flex-shrink: 0; color: #967541; }.worker-order>span:last-child { margin-left: auto; font-size: 12px; }.worker-order strong { display: block; font-size: 12px; }.worker-order small { display: block; margin-top: 3px; font-size: 9px; }.worker-order:hover:not(:disabled) { border-color: #9b7338; background: #f5e8cf; }.worker-order.active { background: #e5ebdb; border-color: #aebf96; color: #486039; opacity: 1; }.worker-order.active>.icon { color: #5e7a4a; }.worker-order:disabled:not(.active) { opacity: .5; }.order-explanation { color: #7c6d54; font-size: 10px!important; margin: 12px 0; }
.crew-panel { position: absolute; z-index: 32; right: 25px; top: 165px; bottom: 130px; width: min(420px,calc(100% - 32px)); border: 1px solid #ccb98f; border-radius: 10px; background: #f7efdf; box-shadow: 0 12px 50px #42331840; padding: 20px; overflow: auto; overscroll-behavior: contain; }.crew-panel h2 { margin: 5px 0; font-family: var(--serif); font-size: 29px; }.crew-panel .eyebrow { font-size: 8px; }.crew-panel>p { color: #7f6c50; font-size: 12px; line-height: 1.5; }.crew-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 15px 0; }.crew-summary>span { display: flex; align-items: center; gap: 5px; padding: 8px; background: #ece2ce; border-radius: 5px; font-size: 11px; }.crew-summary .icon { width: 15px; height: 15px; color: #92713b; }.crew-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0 9px; }.crew-pagination>span { font-size: 10px; color: #8a7758; }#crew-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.crew-person { display: flex; align-items: center; gap: 8px; text-align: left; background: #fffaf1; padding: 10px; border: 1px solid #dfd0b4; border-radius: 6px; }.crew-person:hover { background: #ece4d3; border-color: #a88a54; }.crew-avatar { display: grid; place-items: center; width: 30px; height: 34px; flex-shrink: 0; border-radius: 6px; background: #e5dfd3; color: #877c69; }.crew-avatar.role-quarry { background: #d4e4e7; color: #387d91; }.crew-avatar.role-builders { background: #efdfce; color: #a97243; }.crew-avatar.role-farmers { background: #dce8d6; color: #55825d; }.crew-avatar>.icon { width: 19px; }.crew-person strong { display: block; font-size: 12px; }.crew-person small { display: block; font-size: 9px; color: #8a7758; margin-top: 3px; }.crew-person-action { display: none; }
.action-feedback { position: absolute; z-index: 40; left: 50%; bottom: 112px; transform: translateX(-50%); background: #f9f3e7; border: 1px solid #afbf97; border-left: 4px solid #6e894f; border-radius: 8px; padding: 12px 15px; width: min(420px,calc(100% - 28px)); box-shadow: 0 8px 30px #392c242b; pointer-events: none; }.receipt-heading { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #49613a; }.receipt-heading>.icon { width: 16px; height: 16px; }.action-feedback p,.action-receipt p { margin: 5px 0 0; font-size: 11px; line-height: 1.45; color: #7b6b51; }.receipt-deltas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }.receipt-delta { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 4px; font-size: 10px; background: #ece3d0; }.receipt-delta>.icon { width: 12px; height: 12px; }.receipt-delta.gain { color: #4e723c; background: #e5eddc; }.receipt-delta.spent { color: #9a6740; }.action-feedback.failed { border-color: #dca48c; border-left-color: #b9684a; }.failed .receipt-heading { color: #a15438; }.action-receipt { border-top: 1px solid #d5c4a2; padding: 12px 0 0; margin-top: 14px; }.resource-changed { background: #e6edda; border-radius: 4px; transition: background .3s; }
.placement-steps { color: #8c7654; font-size: 10px; letter-spacing: .03em; padding-bottom: 10px; border-bottom: 1px solid #d9c9ac; margin-bottom: 10px; }.placement-title { align-items: start; flex-wrap: wrap; gap: 5px; }.placement-title>span { display: block; width: 100%; }.assignment-title { flex-wrap: wrap; gap: 7px; }.crew-entry { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: #e6ecdc; border: 1px solid #c0cdaa; border-radius: 7px; padding: 12px; margin: 12px 0 16px; }.crew-entry strong { display: block; font-size: 13px; }.crew-entry p { font-size: 11px; margin: 4px 0 0; color: #6e805e; }
@media(max-width:650px) { .building-inspector { right: 10px; bottom: 94px; width: min(310px,calc(100% - 20px)); max-height: calc(100dvh - 225px); padding: 15px; }.building-inspector h2 { font-size: 27px; }.crew-panel { top: 122px; bottom: 92px; right: 10px; padding: 16px; width: calc(100% - 20px); }.crew-panel h2 { font-size: 26px; }.action-feedback { bottom: 94px; padding: 10px 12px; }.world-main:has(.building-inspector:not([hidden]))>.action-feedback { display: none; }.worker-orders { gap: 6px; }.worker-order { padding: 10px 8px; }.crew-entry { align-items: start; flex-direction: column; }.cost-chip { font-size: 10px; }.world-main:has(.crew-panel:not([hidden]))>.world-camera { visibility: hidden; } }
@media(max-width:360px) { .crew-person { padding: 8px; gap: 6px; }.crew-avatar { width: 25px; }.crew-summary>span { font-size: 10px; }.building-inspector { max-height: calc(100dvh - 218px); } }