.hud .craft-cost-toggle{display:flex;flex:none;align-items:center;justify-content:center;gap:7px;width:92px;min-width:92px;height:48px;padding:6px 10px;font:600 15px/1.25 var(--ng-body);letter-spacing:0;white-space:nowrap}
.hud .craft-cost-toggle .craft-cost-icon{width:22px;height:22px;flex:none}
#panel[data-view=costs]{--pc-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
#panel[data-view=costs] .panel-title h2{font:600 20px/1.25 var(--pc-font);letter-spacing:0;text-transform:none;text-shadow:none}
.craft-cost-toggle[hidden],.is-joining:not(.is-home) .craft-cost-toggle{display:none}
body:not(.mobile-ui) #panel[data-view=costs]{position:absolute;inset:0;transform:none;width:100%;max-width:none;height:100%;max-height:none;margin:0;z-index:25}
body:not(.mobile-ui) #panel.home-tools[data-view=costs]{position:fixed;inset:calc(var(--hud-height) + 20px) auto auto 50%;transform:translateX(-50%);width:min(1100px,calc(100vw - 40px));height:calc(100dvh - var(--hud-height) - 40px);z-index:30}
#panel[data-view=costs] .panel-body{display:flex;flex-direction:column;flex:1;min-height:0;padding:14px 16px;overflow:hidden}
#panel[data-view=costs] .panel-head{height:48px;min-height:48px}
.production-costs{display:flex;flex-direction:column;min-height:0;flex:1;color:#e6d7b7;font:13px/1.5 var(--pc-font)}
.pc-intro{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:11px}.pc-eyebrow{font-size:11px;letter-spacing:.7px;color:#d4b675;text-transform:uppercase}.pc-intro p{margin:0;color:#c4c7b1;font-size:12px}.pc-intro>span:last-child{margin-left:auto;color:#b9ab87;font-size:12px}
.pc-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid #80734766}
.pc-search{display:flex;align-items:center;gap:8px;flex:1;min-width:165px;margin:0}.pc-search>.ng-art{width:20px;flex:none}.pc-search input{min-width:0;width:100%;height:34px;padding:7px 10px;background:#0f1b17;border:1px solid #626c4b;color:#f0dfb7;border-radius:0;font:13px var(--pc-font)}
.pc-filters{display:flex;gap:3px;flex-wrap:wrap}#panel .pc-filters button{padding:7px 10px;min-height:32px;background:#26342a;border:1px solid #5c6547;color:#c4cbb2;font:12px var(--pc-font);box-shadow:none;text-shadow:none;border-radius:0}#panel .pc-filters button[aria-pressed=true]{background:#bc9957;color:#251d11;border-color:#e1c98a}
.pc-columns{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1.45fr);gap:18px;flex:1;min-height:0;padding-top:12px}.pc-catalog{display:flex;flex-direction:column;min-height:0;border:1px solid #526048;background:#15231d}.pc-list-head,#panel .pc-row{display:grid;grid-template-columns:minmax(0,1fr) 62px 65px;align-items:center;gap:4px}.pc-list-head{padding:8px;background:#26362b;border-bottom:1px solid #596446;color:#b3b898;font:10px var(--pc-font);letter-spacing:.5px}.pc-list-head>span{text-align:right}#panel .pc-list-head button{padding:0;background:none;border:0;min-height:18px;color:inherit;font:inherit;box-shadow:none;text-shadow:none;text-align:left;border-radius:0}#panel .pc-list-head button:nth-child(2){text-align:right}
.pc-list{overflow-y:auto;min-height:0;flex:1;scrollbar-gutter:stable}#panel .pc-row{width:100%;min-height:56px;padding:8px;text-align:left;background:none;border:0;border-bottom:1px solid #46523b6b;color:#e7d5b3;box-shadow:none;border-radius:0;font:500 13px/1.4 var(--pc-font);text-shadow:none}#panel .pc-row:hover{background:#bb99461a}#panel .pc-row[aria-pressed=true]{background:#b598492d;box-shadow:inset 3px 0 #d2b775}#panel .pc-row>span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}#panel .pc-row>span:last-child{color:#b8c69f}.pc-row-name{display:flex;align-items:center;gap:8px;min-width:0}.pc-row-name>.ng-art{width:27px;max-height:31px;flex:none}.pc-row-name b{font:500 13px/1.35 var(--pc-font);display:block}.pc-row-name small{display:block;color:#9eab93;font:11px/1.4 var(--pc-font);margin-top:3px}.pc-empty{padding:12px;color:#b9bda4}
.pc-detail{overflow-y:auto;min-width:0;min-height:0;padding-right:6px;scrollbar-gutter:stable}.pc-detail-heading{display:flex;gap:13px;align-items:center;margin:0 0 12px}.pc-item-seal{position:relative;isolation:isolate;width:55px;height:55px;padding:8px;display:grid;place-items:center;flex:none}.pc-item-seal>.ng-art{width:37px;max-height:39px}.pc-detail h3{font:600 24px/1.2 var(--pc-font);margin:3px 0;color:#f0d9a5}.pc-detail-heading p{margin:5px 0 0;font-size:12px;color:#b7bda6}
.pc-totals{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:8px;margin-bottom:13px}.pc-totals>div{background:#25342b;border:1px solid #5f6948;padding:10px}.pc-totals small{display:block;font-size:10px;letter-spacing:.8px;color:#b5b69b;margin-bottom:5px}.pc-amount{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums}.pc-amount>.ng-art{width:17px;max-height:20px}.pc-totals .pc-amount b{font:600 24px/1.2 var(--pc-font);color:#f0d6a0}.pc-maker>b{display:block;font:600 14px/1.35 var(--pc-font)}.pc-maker>span{font-size:11px;color:#a8b89c}
.pc-batch{padding:13px 15px;color:#503a21;background:#dfc08a;margin-bottom:12px}.pc-section-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}.pc-detail h4{font:600 15px/1.35 var(--pc-font);margin:0;color:inherit}.pc-section-title>span{font-size:11px;opacity:.8}.pc-recipe{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.pc-ingredient{display:inline-flex;align-items:center;gap:5px;font-size:12px}.pc-ingredient>.ng-art{width:24px;max-height:29px}.pc-plus{opacity:.55}.pc-arrow{font-size:22px;color:#84602d}.pc-chance{font:600 14px var(--pc-font)}.pc-batch .pc-batch-note{font-size:12px;line-height:1.4;color:#795c36;margin:9px 0 0}.pc-attempt{font-size:12px}
.pc-breakdown{display:grid;grid-template-columns:1fr auto;gap:5px 10px;font-size:12px;padding:0 2px 13px;color:#aebda2}.pc-breakdown b{font-weight:400;color:#dfcea7}.pc-chain{margin-top:16px}.pc-branch{border:1px solid #506045;margin-top:6px;background:#18271f}.pc-branch>summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:9px;list-style:none}.pc-branch>summary::-webkit-details-marker{display:none}.pc-branch>summary>.ng-art{width:24px;max-height:28px}.pc-branch>summary>span:nth-child(2){min-width:0;flex:1}.pc-branch summary b{font-size:12px;font-weight:400}.pc-branch summary small{display:block;font-size:11px;color:#a9b69a}.pc-branch summary .pc-amount{font-size:13px;flex:none}.pc-branch summary .pc-amount>.ng-art{width:12px}.pc-expand{color:#c8ad73}.pc-branch[open]>summary .pc-expand{transform:rotate(45deg)}.pc-branch-body{padding:0 9px 9px;border-top:1px solid #41503a}.pc-branch-body>p{font-size:12px;line-height:1.4;color:#a7b59a;margin:8px 0}.pc-branch .pc-branch{margin-left:3px}.pc-leaf{font-style:italic}
.pc-routes{margin:10px 0;padding-top:12px;border-top:1px solid #5c6145}.pc-routes>p{font-size:12px;color:#a9b59d;margin:5px 0 8px}#panel .pc-routes button{display:flex;align-items:center;gap:9px;width:100%;padding:9px;text-align:left;background:#223127;border:1px solid #566044;border-radius:0;margin-top:5px;color:#ddcea9;box-shadow:none;text-shadow:none;font:12px var(--pc-font)}#panel .pc-routes button[aria-pressed=true]{border-color:#c3a86a;background:#b2994f22}.pc-routes button>span:first-child{flex:1;min-width:0}.pc-routes button small{display:block;font-size:11px;color:#a9b599;margin-top:3px}.pc-routes .pc-amount>.ng-art{width:12px}.pc-routes .pc-amount b{font:500 13px/1.4 var(--pc-font)}
.pc-method{border-top:1px solid #65704c;margin-top:18px;padding-top:12px;color:#b9bda4;font-size:12px}.pc-method>summary{cursor:pointer;color:#d5bc86}.pc-method p{line-height:1.5;font-size:12px;margin:8px 0}.pc-footer{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-top:9px;color:#9fae94;font-size:11px}.pc-footer>.ng-art{width:12px;max-height:14px}
@media(max-width:1350px){.pc-columns{gap:12px;grid-template-columns:minmax(210px,.9fr) minmax(0,1.4fr)}.pc-list-head,#panel .pc-row{grid-template-columns:minmax(0,1fr) 51px 54px}.pc-row-name{gap:5px}.pc-row-name>.ng-art{width:23px}}
@media(max-width:1120px){.hud .craft-cost-toggle{width:88px;min-width:88px;padding-inline:8px;font-size:14px}.pc-intro p{display:none}.pc-totals>div{padding:8px}.pc-totals .pc-amount b{font-size:21px}.pc-maker>b{font-size:13px}}
.mobile-ui #panel[data-view=costs]{inset:calc(var(--mobile-top) + 5px) 7px calc(var(--mobile-bottom) + 5px);width:auto;height:auto;max-height:none;transform:none}
.mobile-ui #panel[data-view=costs] .panel-body{padding:10px}.mobile-ui .pc-columns{display:flex;flex-direction:column;overflow:auto;gap:12px}.mobile-ui .pc-catalog{min-height:210px;height:35%;flex:none}.mobile-ui .pc-detail{overflow:visible;flex:none;padding-right:0}.mobile-ui .pc-intro{gap:4px;margin-bottom:8px}.mobile-ui .pc-intro>span:last-child{font-size:11px}.mobile-ui .pc-toolbar{gap:8px;padding-bottom:8px}.mobile-ui .pc-search{flex-basis:100%}.mobile-ui #panel .pc-filters button{padding:5px 10px;min-height:29px}.mobile-ui .pc-footer{font-size:10px}.mobile-landscape .pc-columns{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(0,1.3fr);overflow:hidden}.mobile-landscape .pc-catalog{height:auto;min-height:0}.mobile-landscape .pc-detail{overflow-y:auto;min-height:0}.mobile-landscape .pc-search{flex-basis:0}.mobile-landscape .pc-intro{display:none}.mobile-landscape .pc-footer{display:none}
/* Fill the mobile village area too; its coordinates already exclude the HUD. */
.mobile-ui #panel[data-view=costs]{position:absolute;inset:5px;width:auto;height:auto}
.mobile-ui #panel[data-view=costs] .panel-title h2{font-size:22px;line-height:24px}
.mobile-ui .pc-catalog{height:auto;min-height:0}
.mobile-ui .pc-detail{overflow-y:auto;min-height:0}
.mobile-ui:not(.mobile-landscape) .pc-columns{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(125px,.8fr) minmax(170px,1.2fr);overflow:hidden}
body.mobile-ui #panel.home-tools[data-view=costs]{position:fixed;inset:calc(var(--mobile-top) + 8px) 8px 8px;height:auto;max-height:none;z-index:350}