/* Shop & Build advice on the personal island: grid warning, care card,
   recommended upgrade, inventory fits and Island panel reveals. */

/* Not enough grid power: a modal above the market or the PC picker. */
.grid-warning{box-sizing:border-box;width:min(500px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:18px 20px 20px;background:#fff7e4;border:2px solid #b46841;box-shadow:0 3px #54392a;color:#35211d;font:400 14px/1.5 Pixeloid,monospace}
.grid-warning::backdrop{background:#2a1a1466}
.grid-warning h2{margin:0 0 8px;font:700 19px/1.3 Pixeloid,monospace;color:#29212a}
.grid-warning p{margin:0 0 6px}
.grid-warning-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:14px}
.grid-warning-actions button{padding:8px 14px;border:2px solid #8a5736;color:#35211d;background:#fff4d2;font:700 14px/1.25 Pixeloid,monospace;cursor:pointer}
.grid-warning-actions .grid-warning-upgrade{background:#ffb56b}
.grid-warning-actions button:focus-visible{outline:3px solid #ad5b35;outline-offset:2px}

/* Market: the PC (or the part installed) would wait for power on its desk (never refused; 4 Oct 2026). */
.workshop-ui[data-mode] .market-fit.market-grid-note{background:#f7d5bb;color:#74391d;border:0;border-left:3px solid #c76a3a;border-radius:2px}
.workshop-ui[data-mode] .market-fit.market-grid-note .market-secondary{display:block;margin-top:6px}

/* Build: the PC panel ("PC <n>"). A fixed head (title, status pill, one row of stat
   tiles), then one scrolling column: the care card, an upgrade tip and the parts. */
.workshop-ui[data-mode=build] .pc-panel.build-inspector[data-picker=true][data-overview=true]{height:auto;max-height:calc(100dvh - 285 * var(--bs))}
.workshop-ui[data-mode=build] .pc-panel.build-inspector[data-picker=true][data-overview=true]>.build-inspector-body{flex:0 1 auto;min-height:0}
/* Scrolled content fades out under the head and at the bottom instead of being cut hard;
   the fades sit on the padding, so nothing fades while everything fits. */
.workshop-ui[data-mode=build] .build-inspector[data-overview=true] .build-scroll-body{--fade:calc(10 * var(--bs));flex:0 1 auto;min-height:0;padding-block:var(--fade);-webkit-mask-image:linear-gradient(transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
/* Short screens scroll the whole panel as one region (build-ui layoutInspector): same soft edges. */
.workshop-ui[data-mode=build] .build-inspector[data-overview=true]>.build-inspector-scroll{--fade:8px;padding-block:var(--fade);-webkit-mask-image:linear-gradient(transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.workshop-ui[data-mode=build] .build-overview-head{flex:none;display:flex;flex-direction:column;gap:calc(9 * var(--bs));margin:0;padding:calc(2 * var(--bs)) calc(3 * var(--bs)) calc(11 * var(--bs));border-bottom:1px solid #d8cbb3}
.build-overview-titlebar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.workshop-ui[data-mode=build] .build-inspector .build-overview-head .build-overview-title{margin:0;font-size:max(22px,calc(32 * var(--bs)));line-height:1.05;font-weight:700}
.workshop-ui[data-mode=build] :is(.build-overview-status,.care-state){flex:none;padding:calc(2 * var(--bs)) calc(9 * var(--bs));border-radius:999px;background:#e2edd2;color:#2f5a2a;font:700 max(11px,calc(14 * var(--bs)))/1.25 Rajdhani,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.workshop-ui[data-mode=build] :is(.build-overview-status,.care-state)[data-tone=warn]{background:#f6e2b4;color:#7a5213}
.workshop-ui[data-mode=build] :is(.build-overview-status,.care-state)[data-tone=bad]{background:#f4cfc0;color:#8a2c17}
.workshop-ui[data-mode=build] .build-overview-status[data-tone=off]{background:#ebe3d3;color:#6d6457}
/* Turn this PC off or on (build-ui.mjs powerToggle), at the right of its status. */
.build-overview-titlebar>.build-overview-title{margin-right:auto!important}
.workshop-ui[data-mode=build] .build-overview-titlebar .build-overview-power{flex:none;width:auto;min-height:max(28px,calc(36 * var(--bs)));margin:0;padding:0 calc(6 * var(--bs));border-width:calc(6 * var(--bs));font-size:max(12px,calc(16 * var(--bs)));white-space:nowrap}
.workshop-ui[data-mode=build] .build-overview-titlebar .build-overview-power:disabled{opacity:.55;cursor:default}
.workshop-ui[data-mode=build] .build-overview-head .build-overview-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(104 * var(--bs))),1fr));gap:calc(7 * var(--bs));padding:0}
.workshop-ui[data-mode=build] .build-overview-head .build-overview-stats>div{display:flex;flex-direction:column;gap:calc(2 * var(--bs));min-width:0;padding:calc(7 * var(--bs)) calc(10 * var(--bs));background:#f7eedb;border:1px solid #e1d0ad;border-radius:4px}
.workshop-ui[data-mode=build] .build-overview-head .build-overview-stats small{font:700 max(11px,calc(14 * var(--bs)))/1.1 Rajdhani,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#85725c}
.workshop-ui[data-mode=build] .build-overview-head .build-overview-stats strong{font:700 max(17px,calc(25 * var(--bs)))/1.1 Rajdhani,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.workshop-ui[data-mode=build] .build-overview-head .build-overview-stats>div[data-tone=warn] strong{color:#a5521a}

/* Care: temperatures, speed loss, one line of advice, then health bars with aligned actions. */
.workshop-ui[data-mode=build] :is(.care-card,.advice-card){margin:0 0 calc(10 * var(--bs));padding:calc(10 * var(--bs)) calc(12 * var(--bs)) calc(7 * var(--bs));background:#fbf3df;border:1px solid #dcc59f;border-left:4px solid #8aa86a;border-radius:3px;font:600 max(14px,calc(19 * var(--bs)))/1.3 Rajdhani,sans-serif;color:var(--build-ink)}
.workshop-ui[data-mode=build] .care-card[data-state=warm]{border-left-color:#d79a3a}
.workshop-ui[data-mode=build] .care-card[data-state=throttling]{border-left-color:#c8553d;background:#fcefe5}
.workshop-ui[data-mode=build] :is(.care-card,.advice-card) h3{margin:0;font-size:max(15px,calc(20 * var(--bs)));line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#7a5a37}
.care-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:calc(8 * var(--bs))}
.care-temps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(7 * var(--bs));margin-bottom:calc(7 * var(--bs))}
.care-temp{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0;padding:calc(5 * var(--bs)) calc(10 * var(--bs));border-radius:4px;background:#e6efd7;color:#2f4f2a}
.workshop-ui[data-mode=build] .care-temp small{font-size:max(12px,calc(16 * var(--bs)));font-weight:700;letter-spacing:.05em;opacity:.85}
.workshop-ui[data-mode=build] .care-temp strong{font-size:max(17px,calc(24 * var(--bs)));font-variant-numeric:tabular-nums;white-space:nowrap}
.care-temp[data-state=warm]{background:#f6e2b4;color:#6f4c12}
.care-temp[data-state=throttling]{background:#f4c9b8;color:#7c2414}
.workshop-ui[data-mode=build] :is(.care-loss,.care-advice){margin:0 0 calc(3 * var(--bs));font-size:max(13px,calc(17 * var(--bs)));line-height:1.3}
/* Maintenance v2 (9 Oct 2026): how this PC's care is priced, quiet under the card's title. */
.workshop-ui[data-mode=build] .care-rate{margin:0 0 calc(4 * var(--bs));font-size:max(12px,calc(15 * var(--bs)));line-height:1.3;color:#7a6a5c}
.workshop-ui[data-mode=build] .care-loss{font-weight:600;color:#6a5d55}
.workshop-ui[data-mode=build] .care-advice{font-weight:700;color:#9b3a22}
/* Before the island's maintenance reset: when care opens (its fixes wait). */
.workshop-ui[data-mode=build] .care-wait{margin:0 0 calc(4 * var(--bs));font-size:max(13px,calc(17 * var(--bs)));line-height:1.3;font-weight:700;color:#6a4a1a}
.care-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:calc(4 * var(--bs)) 0 calc(6 * var(--bs))}
.care-hint>.advice-line{flex:1 1 100%;margin:0}
.care-rows{display:grid;grid-template-columns:minmax(0,1fr) max-content;column-gap:calc(12 * var(--bs));margin-top:calc(5 * var(--bs))}
.care-row{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-columns:subgrid;grid-template-rows:auto auto;align-items:center;row-gap:calc(4 * var(--bs));min-height:max(36px,calc(44 * var(--bs)));padding:calc(5 * var(--bs)) 0;border-top:1px dashed #dccaa6;box-sizing:border-box}
.care-row-head{grid-column:1;grid-row:1;display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;align-self:end}
.care-row-head span{color:#5f5249}
.care-row-head strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.care-row meter{grid-column:1;grid-row:2;align-self:start;display:block;box-sizing:border-box;width:100%;height:max(8px,calc(10 * var(--bs)));-webkit-appearance:none;appearance:none;border:1px solid #cdbb98;border-radius:3px;background:#efe5d0;overflow:hidden}
.care-row meter::-webkit-meter-bar{height:100%;border:0;border-radius:0;background:#efe5d0}
.care-row meter::-webkit-meter-optimum-value{background:linear-gradient(#7fe08b,#34b64e)}
.care-row meter::-webkit-meter-suboptimum-value{background:linear-gradient(#ffd66d,#eda623)}
.care-row meter::-webkit-meter-even-less-good-value{background:linear-gradient(#f59a84,#dd573b)}
.care-row meter:-moz-meter-optimum::-moz-meter-bar{background:#34b64e}
.care-row meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#eda623}
.care-row meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#dd573b}
.care-row>.build-button,.care-hint>.build-button,.advice-card>.build-button{width:auto!important;min-height:max(32px,calc(40 * var(--bs)))!important;padding:2px 10px!important;font-size:max(13px,calc(18 * var(--bs)))!important;white-space:nowrap}
.care-row>.build-button{grid-column:2;grid-row:1 / span 2;justify-self:stretch;width:100%!important}
/* A wide care card puts each row on one line: label | bar | value | action, columns shared. */
.workshop-ui[data-mode=build] .care-card{container-type:inline-size}
@container (min-width:390px){
  .care-rows{grid-template-columns:max-content minmax(40px,1fr) max-content max-content}
  .care-row{grid-template-rows:auto;min-height:max(34px,calc(46 * var(--bs)));padding:calc(3 * var(--bs)) 0}
  .care-row-head{display:contents}
  .care-row-head>span{grid-column:1;grid-row:1}
  .care-row meter{grid-column:2;grid-row:1;align-self:center}
  .care-row-head>strong{grid-column:3;grid-row:1;text-align:right;min-width:3.2em}
  .care-row>.build-button{grid-column:4;grid-row:1}
}
.workshop-ui[data-mode=build] .advice-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:calc(10 * var(--bs));border-left-color:#5a8fc0}
.advice-card>:not(.build-button){grid-column:1}
.advice-card>.build-button{grid-column:2;grid-row:1 / span 3}
.advice-line{margin:calc(3 * var(--bs)) 0 0;font-weight:700;overflow-wrap:anywhere}
.advice-price{display:inline-flex;vertical-align:middle}
.advice-price .token-coin{width:1.1em;height:1.1em}
.workshop-ui[data-mode=build] .advice-card>.build-note{margin:calc(2 * var(--bs)) 0 0;font-size:max(12px,calc(16 * var(--bs)))}
.workshop-ui[data-mode=build] .build-spare-note{border-left-color:#5a8fc0;background:#e4eef6;color:#244866}

/* Parts: one collapsible list, label | name, long names wrap under themselves. */
.build-overview-parts{margin:0;padding:calc(2 * var(--bs)) 0 0}
.build-overview-parts>summary{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:calc(4 * var(--bs)) calc(3 * var(--bs));list-style:none;cursor:pointer;border-radius:3px}
.build-overview-parts>summary::-webkit-details-marker{display:none}
.build-overview-parts>summary:focus-visible{outline:2px solid #289ec9;outline-offset:1px}
.workshop-ui[data-mode=build] .build-overview-parts>summary>span{display:inline-flex;align-items:center;gap:calc(8 * var(--bs));font:700 max(15px,calc(20 * var(--bs)))/1.2 Rajdhani,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#7a5a37}
.build-overview-parts>summary>span::before{content:'';width:0;height:0;border:max(4px,calc(6 * var(--bs))) solid transparent;border-right:0;border-left-color:currentColor;transition:transform .15s}
.build-overview-parts[open]>summary>span::before{transform:rotate(90deg)}
.workshop-ui[data-mode=build] .build-overview-parts>summary>small{font:600 max(12px,calc(16 * var(--bs)))/1.2 Rajdhani,sans-serif;color:#8a7a66}
.workshop-ui[data-mode=build] .build-inspector .build-overview-parts .build-overview-list{grid-template-columns:minmax(calc(86 * var(--bs)),.6fr) minmax(0,1.4fr);align-items:baseline;gap:calc(6 * var(--bs)) calc(12 * var(--bs));margin:0;padding:calc(5 * var(--bs)) calc(3 * var(--bs)) calc(4 * var(--bs));border:0;font-size:max(14px,calc(19 * var(--bs)));line-height:1.22}
.build-overview-parts .build-overview-list dt{color:#857664;font-weight:500}
.build-overview-parts .build-overview-list dd{min-width:0;font-weight:600;overflow-wrap:break-word;text-wrap:pretty}
.build-overview-parts .build-overview-list dd[data-empty]{color:#a0927e;font-weight:500}
.workshop-ui[data-mode=build] .build-overview-swap{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:calc(6 * var(--bs)) calc(3 * var(--bs)) calc(2 * var(--bs));padding:calc(6 * var(--bs)) calc(10 * var(--bs));border:1px dashed #d4c09b;border-radius:4px;background:#fbf5e6;font:500 max(13px,calc(17 * var(--bs)))/1.25 Rajdhani,sans-serif;color:#6a5d55}
.workshop-ui[data-mode=build] .build-overview-swap>span{min-width:0;overflow-wrap:break-word}
.workshop-ui[data-mode=build] .build-overview-swap>.build-text-action{flex:none;padding:2px 0;text-decoration:underline;text-underline-offset:2px}
.workshop-ui[data-mode=build] .build-overview-swap>.build-text-action:disabled{opacity:.55;cursor:default}
/* Move this PC to another desk: a quiet text action under Parts; it opens into a question or a short desk list. */
.workshop-ui[data-mode=build] .build-overview-move{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6 * var(--bs)) 10px;margin:calc(4 * var(--bs)) calc(3 * var(--bs)) calc(2 * var(--bs));font:500 max(13px,calc(17 * var(--bs)))/1.25 Rajdhani,sans-serif;color:#6a5d55}
.workshop-ui[data-mode=build] .build-overview-move[data-open=true]{padding:calc(6 * var(--bs)) calc(10 * var(--bs));border:1px dashed #d4c09b;border-radius:4px;background:#fbf5e6}
.workshop-ui[data-mode=build] .build-overview-move>.build-text-action{flex:none;padding:2px 0;text-decoration:underline;text-underline-offset:2px}
.workshop-ui[data-mode=build] .build-overview-move>.build-text-action:disabled{opacity:.55;cursor:default}
.workshop-ui[data-mode=build] .build-overview-move-question{flex:1 1 auto;min-width:0;font-weight:600;color:#5f5249;overflow-wrap:break-word}
.workshop-ui[data-mode=build] .build-overview-move .build-button{width:auto!important;flex:none;min-height:max(30px,calc(38 * var(--bs)))!important;padding:2px 12px!important;font-size:max(13px,calc(17 * var(--bs)))!important;white-space:nowrap}
.workshop-ui[data-mode=build] .build-overview-move-list{display:flex;flex-wrap:wrap;gap:calc(6 * var(--bs));flex:1 0 100%}

/* Build stats: rules temperatures and one status chip. */
.build-stats span[data-temperature=warm]{color:#a86a10}
.build-stats span[data-temperature=throttling]{color:#b33a20}
.workshop-ui[data-mode=build] .build-stats-alert{flex:none;padding:2px 9px;border:2px solid currentColor;border-radius:4px;background:#fff6dc;font:700 max(12px,calc(17 * var(--bs)))/1.2 Rajdhani,sans-serif;cursor:pointer;color:#3e6d2d}
.build-stats-alert[data-tone=info]{color:#2b5d86}
.build-stats-alert[data-tone=warn]{color:#9a6510}
.build-stats-alert[data-tone=bad]{color:#b33a20;background:#fde6dc}
.build-stats-alert:focus-visible{outline:2px solid #ad5b35;outline-offset:2px}
@media (max-width:620px){
  .workshop-ui[data-mode=build] .build-stats-alert{max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 5px;font-size:11px}
}

/* Inventory: where a spare part fits. */
.inv-item-fit{display:inline-block;margin-top:2px;padding:1px 6px;border-radius:4px;background:#dcebc8;color:#2e5a27;font-weight:700;font-size:11px;white-space:nowrap}
.inv-selected-fit{display:block;color:#2e5a27;font-weight:700}
.inv-fit-note{color:#2e5a27;font-weight:700}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-install{min-height:calc(46 * var(--iv));padding:calc(2 * var(--iv)) calc(12 * var(--iv));font-size:calc(21 * var(--iv))!important}

/* Island panel: a section opened by island:open-panel. */
.island-section.island-section-focus{animation:island-section-reveal 2.6s ease-out}
@keyframes island-section-reveal{0%,35%{background:#ffeec2;box-shadow:0 0 0 3px #ffeec2}100%{background:transparent;box-shadow:0 0 0 3px transparent}}
@media (prefers-reduced-motion:reduce){.island-section.island-section-focus{animation:none;background:#fff4d9}}