/* Content must fit the available track, not enlarge it. Keep full text in
   details; compact card titles already expose their full name on selection. */
.workshop-ui[data-mode] :is(.shop-panel,.pc-panel,.market-body,.market-shelf,.market-detail,.market-detail-scroll,.inv-detail,.inv-detail-scroll,.inv-selected-actions,.build-inspector-heading>div) {min-width:0}
.workshop-ui[data-mode] :is(.shop-panel,.pc-panel,.game-message,.hover-name),
.resource-dialog,.build-wallpaper-dialog,.pc-picker {overflow-wrap:anywhere}
.workshop-ui[data-mode] :is(input,select,button),
.resource-dialog :is(input,select,button) {min-width:0}
.workshop-ui[data-mode] :is(.market-detail,.inv-detail,.build-inspector) :is(p,strong,small,dd,dt,span) {min-width:0}
.workshop-ui[data-mode] :is(.market-detail,.inv-detail,.build-inspector) :is(input,select) {max-width:100%}

/* Resource text sizes follow the readout width, including Build's HUD variant.
   The unit is subordinate to the amount and stays on the same line. */
.workshop-ui[data-mode] .economy-hud {max-width:calc(100% - 20px)}
.workshop-ui[data-mode] .resource-pill {min-width:0;flex-shrink:1}
.workshop-ui[data-mode] .resource-pill .resource-readout {min-width:0;flex:1;container-type:inline-size;align-items:stretch}
.workshop-ui[data-mode] .resource-pill .resource-label {font-size:min(calc(12 * var(--u)),14cqi)}
.workshop-ui[data-mode] .resource-pill .resource-value {display:block;font:700 min(calc(21 * var(--u)),17cqi)/1.2 Pixeloid,monospace;white-space:nowrap;font-variant-numeric:tabular-nums}
.workshop-ui[data-mode] .resource-pill .resource-unit {font:inherit;font-size:.52em;letter-spacing:0}
.workshop-ui[data-mode=build] .resource-pill .resource-value {font-size:min(calc(26 * var(--bs)),17cqi)}
.workshop-ui[data-mode=build] .resource-pill .resource-label {font-size:min(calc(16 * var(--bs)),14cqi)}

.resource-dialog .resource-heading h1 {min-width:0}
.resource-dialog .resource-close {flex:none}
.resource-dialog .resource-total {font-size:clamp(20px,5vw,34px);overflow-wrap:anywhere}
.resource-dialog .resource-metrics {grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.resource-dialog .resource-metrics :is(dt,dd) {min-width:0;max-width:100%}
.resource-dialog .energy-packs {grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}
.resource-dialog .energy-pack {min-width:0}

.workshop-ui[data-mode=market] .garden-market .market-stat {grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr)}
.workshop-ui[data-mode=market] .garden-market .market-stat>:not(:first-child) {text-align:right;white-space:normal}
.workshop-ui[data-mode=market] .garden-market .market-owned-tag {min-width:0}
.workshop-ui[data-mode=market] .garden-market .market-owned-count {white-space:normal;overflow-wrap:anywhere}
.workshop-ui[data-mode=market] .garden-market :is(.market-header h1,.market-toolbar>*) {min-width:0}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-selected-actions {flex-wrap:wrap}
.workshop-ui[data-mode=inventory] .garden-inventory :is(.inv-stats,.inv-condition>div,.inv-sale-confirm,.inv-fit) {min-width:0;overflow-wrap:anywhere}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-stats {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.workshop-ui[data-mode=build] :is(.build-field,.build-slot,.build-overview-list,.build-overview-stats) {min-width:0}
.workshop-ui[data-mode=build] .build-field {grid-template-columns:minmax(0,1fr) auto}
.workshop-ui[data-mode=build] .build-inspector:is([data-component=fan],[data-component=cooler]) .build-field {grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,.4fr)}
.workshop-ui[data-mode=build] :is(.build-comparison,.build-condition>div,.build-stats) {flex-wrap:wrap}
.workshop-ui[data-mode=build] .build-comparison>strong {white-space:normal;text-align:right}
.workshop-ui[data-mode=build] .build-overview-list {grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.workshop-ui[data-mode=build] .build-overview-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
.workshop-ui[data-mode=build] .build-stats {max-width:calc(100% - 24px)}
.workshop-ui[data-mode=build] .build-views {max-width:calc(100% - 16px)}
.workshop-ui[data-mode=build] .build-views button {white-space:normal}
.build-part-label,.station-hover {max-width:calc(100vw - 24px);overflow-wrap:anywhere}
.workshop-ui[data-mode] .first-pc-card {max-width:calc(100% - 24px);white-space:normal;text-align:center}
.pc-picker :is(.pc-choice,.pc-choice-specs,.pc-choice-price) {min-width:0}
.pc-picker .pc-choice-case {white-space:normal}

@media(max-width:700px) {
  .pc-picker-heading h1 {font-size:clamp(16px,5.2vw,22px);white-space:normal;text-align:center}
}
/* Between phone and tablet widths, the title and balances need separate rows. */
@media(min-width:621px) and (max-width:760px) {
  .workshop-ui[data-mode=build] .economy-hud {top:65px;right:12px}
  .workshop-ui[data-mode=build] .resource-pill {height:40px}
  .workshop-ui[data-mode=build] .build-views {top:114px;height:50px}
  .workshop-ui[data-mode=build] .build-components {top:176px;max-height:calc(100dvh - 260px)}
  .workshop-ui[data-mode=build] .pc-panel.build-inspector,
  .workshop-ui[data-mode=build] .pc-panel.build-inspector[data-picker=true] {top:176px;bottom:75px;height:auto;max-height:none;min-height:0}
}
@media(max-width:620px) {
  .workshop-ui[data-mode=build][data-sheet=collapsed] .build-sheet-toggle {bottom:100px}
  .workshop-ui[data-mode] .resource-pill {padding-inline:6px}
  .workshop-ui[data-mode=build] .build-views {overflow-x:auto;scrollbar-width:thin;justify-content:flex-start}
  .workshop-ui[data-mode=build] .build-views button {flex:0 0 76px;min-width:76px;white-space:normal}
  .workshop-ui[data-mode=build] .pc-panel.build-inspector,
  .workshop-ui[data-mode=build] .pc-panel.build-inspector[data-picker=true] {bottom:100px}
  .workshop-ui[data-mode=build] .resource-pill {flex:1;width:auto;max-width:180px;min-width:0}
  .workshop-ui[data-mode=build] .resource-pill .resource-value {font-size:min(15px,17cqi)}
  .workshop-ui[data-mode=build] .resource-pill .resource-label {font-size:min(9px,14cqi)}
  .workshop-ui[data-mode=market] .garden-market .market-toolbar {flex-wrap:wrap}
  .workshop-ui[data-mode=market] .garden-market .market-search {flex-basis:100%;min-height:36px}
  .workshop-ui[data-mode=market] .garden-market .market-sort {width:100%}
  .workshop-ui[data-mode] .game-nav {max-width:calc(100% - 16px);gap:4px}
  .workshop-ui[data-mode] .game-nav button {min-width:0;font-size:10px}
  .workshop-ui[data-mode=inventory] .game-nav button {font-size:14px}
  .workshop-ui[data-mode] .game-nav .pixel-icon {width:24px;height:24px;flex:none}
  .resource-dialog {padding:12px}
}
@media(max-width:380px) {
  .workshop-ui[data-mode] .game-nav button {flex-direction:column;gap:2px}
  .workshop-ui[data-mode] .game-nav .pixel-icon {width:20px;height:20px}
}
/* On short phones, let the toolbar leave the viewport as the collection scrolls
   so a full card can be inspected above the selected-item action bar. */
@media(max-width:700px) and (max-height:700px) {
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-collection {overflow-y:auto;scrollbar-width:thin;display:block}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-toolbar {margin-bottom:9px}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-grid {overflow:visible}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-selected-bar {position:sticky;bottom:0;background:#fff3cd;margin-top:9px;z-index:2}
}
@media(max-width:620px) and (max-height:700px), (max-height:560px) {
  .workshop-ui[data-mode=build] .pc-panel.build-inspector[data-picker=true] {overflow:hidden}
  .build-inspector-scroll {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .build-inspector-scroll>.build-inspector-tabs {margin-block:5px;padding-bottom:5px}
  .workshop-ui[data-mode=build] .build-inspector[data-picker=true] .build-inspector-body {flex:none;gap:5px}
  .build-inspector[data-picker=true] .build-owned-list {flex:none;min-height:156px;max-height:220px}
  .build-inspector[data-picker=true] .build-scroll-body {flex:none;max-height:none;overflow:visible}
  .build-inspector[data-picker=true]>.build-picker-footer {flex:none;max-height:48%;overflow-y:auto}
}
@media(max-height:800px) {
  .build-wallpaper-dialog {max-height:calc(100dvh - 24px);overflow:hidden}
  .build-wallpaper-dialog .portrait-editor {display:flex;flex-direction:column;max-height:calc(100dvh - 120px);min-height:0}
  .build-wallpaper-dialog .portrait-editor>:is(h3,.wallpaper-description,.crop-actions) {flex:none}
  .build-wallpaper-dialog .portrait-editor-body {min-height:0;overflow:auto;overscroll-behavior:contain;gap:12px;padding-bottom:10px}
  .build-wallpaper-dialog .portrait-crop-preview {flex:none;width:min(100%,calc(34dvh * 1024 / 604))}
  .build-wallpaper-dialog .crop-slider {min-width:0;margin-block:4px}
  .build-wallpaper-dialog .crop-slider input {box-sizing:border-box;min-width:0;width:100%;margin-inline:0}
  .build-wallpaper-dialog .crop-actions {flex-wrap:wrap;gap:6px;padding-top:8px;border-top:1px solid #d8cbb3}
  .build-wallpaper-dialog .crop-actions button {flex:1;min-width:90px}
}
@media(max-width:620px) and (max-height:800px) {
  .build-wallpaper-dialog .crop-actions {display:grid;grid-template-columns:1fr 1.6fr 1fr}
  .build-wallpaper-dialog .crop-actions button {min-width:0;padding:4px 2px;font-size:16px!important;line-height:1.15;overflow-wrap:normal}
}
@media(min-width:621px) and (max-height:560px) {
  .workshop-ui[data-mode=market] .shop-panel.garden-market {overflow-y:auto}
  .workshop-ui[data-mode=market] .garden-market .market-workspace {flex:none}
  .workshop-ui[data-mode=market] .garden-market .market-grid-frame {flex:none;height:calc(448 * var(--mk))}
  .workshop-ui[data-mode=market] .garden-market .market-detail {height:calc(520 * var(--mk))}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-collection {overflow-y:auto;display:block;scrollbar-width:thin}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-grid {overflow:visible;grid-auto-rows:140px;margin-block:8px}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-item {min-height:0}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-selected-bar {position:sticky;bottom:0;background:#fff3cd;z-index:2}
}

/* iPhones in landscape draw the page under the notch (viewport-fit=cover): a window keeps clear of it on both sides.
   Without a notch the insets are 0 and every window keeps its own width. */
dialog:modal {max-width:calc(100vw - 16px - 2 * max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)))!important}

/* A window that opened without room for its content (modal-guard.mjs, 9 Oct 2026; an iPhone showed only a thin frame
   over the blocked game): plain block flow at its content's height, the whole window scrolls. Still empty (a drawing
   that failed), it shows a short notice with Close instead. */
dialog[data-modal-rescue] {display:block!important;height:auto!important;min-height:min(160px,calc(100vh - 32px))!important;max-height:calc(100vh - 24px)!important;overflow:auto!important}
dialog[data-modal-rescue] * {flex-basis:auto!important}
dialog[data-modal-rescue] :is([class$=-sheet],[class$=-body]) {min-height:auto!important;max-height:none!important;overflow:visible!important}
.modal-rescue {display:grid;gap:12px;justify-items:center;padding:18px 16px;background:#fff5d9;color:#3e211d;font:400 15px/1.5 Pixeloid,monospace;text-align:center}
.modal-rescue p {margin:0}
.modal-rescue-close {min-width:120px;min-height:44px;padding:4px 16px;border:8px solid transparent;border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;
  color:#3e211d;font:700 16px/1.2 Pixeloid,monospace;cursor:pointer}
.modal-rescue-close:focus-visible {outline:3px solid #3a97cf;outline-offset:2px}

/* Build > PC on phones: the components row ends at 259 px (unified-hud.css puts it at 210 px), so on short phones
   (360x640, 375x667) the View part bar and the part picker start under it instead of covering its labels (phone check
   of 9 Oct 2026). Taller phones keep their 36dvh places. */
@media(max-width:620px) {
  html .workshop-ui[data-mode=build] .build-sheet-toggle {top:max(264px,36dvh)}
  html .workshop-ui[data-mode=build] .pc-panel.build-inspector[data-picker=true] {top:max(298px,calc(36dvh + 34px))}
}

/* Phones on their side (wide but at most 500 px tall; phone check of 9 Oct 2026). */
@media (min-width:621px) and (max-height:500px) {
  /* ENERGY scaled itself by the height to about 0.44 and its refill rows overlapped their own text: it keeps a readable
     scale and its body scrolls inside the window instead. */
  html .resource-dialog.resource-window[data-kind=energy] {--r:clamp(.62px,calc((100vw - 20px) / 900),.9px)}
  /* Inventory: about 7 px of its item grid showed between the search bar and the selected item's bar. The decorative
     title steps aside, the window reaches from under the resource cards to the navigation, the grid scrolls on the left
     and the selected item stands beside it. */
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-header h1 {display:none}
  body .workshop-ui[data-mode=inventory] .shop-panel.garden-inventory {top:92px;bottom:60px}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-body {padding-top:0}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-collection {display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,32%);
    grid-template-rows:auto auto minmax(0,1fr);gap:8px 10px;overflow:hidden}
  .workshop-ui[data-mode=inventory] .garden-inventory :is(.inv-toolbar,.inv-saved-banner) {grid-column:1}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-grid {grid-column:1;grid-row:3;overflow-y:auto;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:118px;margin:0}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-selected-bar {grid-column:2;grid-row:1 / -1;position:static;margin:26px 0 0;flex-direction:column;
    align-items:stretch;justify-content:center;gap:6px;min-height:0;overflow-y:auto;background:none}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-selected-art {display:none}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-selected-actions {flex-direction:column;align-items:stretch;gap:6px}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-use {min-width:0;min-height:40px;font-size:20px!important}
  /* Build: the part picker beside the PC kept 34 px to scroll its list in (the parts never showed). The title banner
     steps aside, the resource cards take its row, and the views, components and the picker each move up one row. */
  html .workshop-ui[data-mode=build] .build-title {display:none}
  html .workshop-ui[data-mode=build] .economy-hud {top:9px}
  html .workshop-ui[data-mode=build] :is(.build-views,.build-save-controls) {top:66px}
  html .workshop-ui[data-mode=build] :is(.build-components,.pc-panel.build-inspector,.pc-panel.build-inspector[data-picker=true]) {top:122px}
  html .workshop-ui[data-mode=build] :is(.pc-panel.build-inspector,.pc-panel.build-inspector[data-picker=true]) {bottom:62px}
  html .workshop-ui[data-mode=build] .build-components {max-height:calc(100vh - 184px);max-height:calc(100dvh - 184px)}
  /* Market ("squashed, items hidden" on 8 Oct): the title banner, the category list, the search row and the count stood
     above the shelf, so the first products began 27 px above the window's lower edge, and Buy sat below the fold of a
     shelf that scrolled inside a scrolling window. The title steps aside; category, search, sort, Cart and close share
     the top row; the products and the selected product fill the rest, each scrolling on its own, and Buy stays at the
     foot of the details while they scroll. The count and the footer hint stay for screen readers. */
  html .workshop-ui[data-mode=market] .shop-panel.garden-market {--mcat:clamp(112px,19vw,170px);--mdet:clamp(200px,30vw,262px);
    top:64px;bottom:50px;height:auto;transform:translateX(-50%);padding:8px;overflow:hidden;display:grid;
    grid-template-columns:var(--mcat) minmax(0,1fr) var(--mdet);grid-template-rows:auto minmax(0,1fr);gap:6px 8px}
  html .workshop-ui[data-mode=market] .garden-market :is(.market-workspace,.market-body) {display:contents}
  html .workshop-ui[data-mode=market] .garden-market .market-header {grid-area:1/3;justify-content:flex-end;min-height:0;margin:0;gap:6px}
  html .workshop-ui[data-mode=market] .garden-market .market-header h1 {display:none}
  html .workshop-ui[data-mode=market] .garden-market .market-close {width:36px;min-width:36px;height:36px}
  html .workshop-ui[data-mode=market] .garden-market .market-category-select {grid-area:1/1;z-index:1;width:auto;margin:0}
  html .workshop-ui[data-mode=market] .garden-market .market-shelf {grid-area:1/1/3/3}
  html .workshop-ui[data-mode=market] .garden-market .market-toolbar {margin-left:calc(var(--mcat) + 8px);min-height:0}
  html .workshop-ui[data-mode=market] .garden-market :is(.market-results,.market-footer) {position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html .workshop-ui[data-mode=market] .garden-market .market-grid-frame {flex:1 1 auto;height:auto;min-height:0;margin-top:6px}
  html .workshop-ui[data-mode=market] .garden-market .market-detail {grid-area:2/3;height:auto;min-height:0;padding:8px;overflow-y:auto;overscroll-behavior:contain}
  html .workshop-ui[data-mode=market] .garden-market .market-detail-scroll {flex:none;min-height:auto;overflow:visible}
  html .workshop-ui[data-mode=market] .garden-market .market-detail-actions {display:contents}
  html .workshop-ui[data-mode=market] .garden-market .market-detail-actions :is(.market-buy,.transaction-status) {position:sticky;bottom:-8px;z-index:4}
  /* Buy keeps its dollar price on its own line only when the line is full; the picture is shorter and its "Preview on
     desk" stands in its top corner (the bottom one while a badge holds the top), so neither hides behind Buy at first. */
  html .workshop-ui[data-mode=market] .garden-market .market-detail .market-buy.token-label>.price-usd {display:inline;margin-left:.5em}
  html .workshop-ui[data-mode=market] .garden-market .market-detail-stage {flex:none;height:96px;min-height:0}
  html .workshop-ui[data-mode=market] .garden-market .market-art-action {top:6px;bottom:auto}
  html .workshop-ui[data-mode=market] .garden-market .market-art-badge~.market-art-action {top:auto;bottom:6px}
  /* A warning (the PSU or the level an install needs, one per island) leads the details: read before Buy. */
  html .workshop-ui[data-mode=market] .garden-market .market-detail-actions .market-fit {order:-1}
}
/* Up to 700 px wide the navigation buttons are 49 px tall: the market ends above them. */
@media (min-width:621px) and (max-width:700px) and (max-height:500px) {
  html .workshop-ui[data-mode=market] .shop-panel.garden-market {bottom:62px}
}
/* Wider phones on their side keep the market's category column (up to 900 px wide the categories are a drop-down): it
   takes the left column from top to bottom and its rows get a finger's height. */
@media (min-width:901px) and (max-height:500px) {
  html .workshop-ui[data-mode=market] .garden-market .market-categories {grid-area:1/1/3/2;margin:0}
  html .workshop-ui[data-mode=market] .garden-market .market-category {height:32px;min-height:32px}
  html .workshop-ui[data-mode=market] .garden-market .market-shelf {grid-area:1/2/3/3}
  html .workshop-ui[data-mode=market] .garden-market .market-toolbar {margin-left:0}
}
/* Choose your PC on a phone on its side: the cards and "Start with ..." ran off the bottom of the screen and the window
   could not scroll, so a new player could not start. The window scrolls as a whole and its title joins the flow. */
@media (min-width:701px) and (max-height:500px) {
  html :is(.pc-picker,.pc-picker[data-layout=shelf]) {top:8px;bottom:8px;height:fit-content;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);
    overflow-y:auto;overscroll-behavior:contain}
  html :is(.pc-picker,.pc-picker[data-layout=shelf]) .pc-picker-body {max-height:none;padding-top:8px}
  html :is(.pc-picker,.pc-picker[data-layout=shelf]) .pc-picker-heading {position:relative;left:auto;top:auto;transform:none;margin:0 auto 4px;height:52px}
  /* A finger dragging up over the cards scrolls the window (the card row only keeps its own sideways scroll). */
  html :is(.pc-picker,.pc-picker[data-layout=shelf]) .pc-picker-grid {overscroll-behavior-y:auto}
}

/* Touch screens: small text controls get a finger-sized hit area (about 32 px tall) without moving anything: the padding
   that enlarges it is taken back by a negative margin. A mouse keeps the compact controls. Phone check of 9 Oct 2026:
   "← Wallet" was 15 px tall, the FAQ rows and More details 20 px, the sound switches 22 px, the volume sliders 18 px.
   The market's "Preview on desk" sits on the picture: an invisible frame around it takes the finger instead. */
@media (pointer:coarse) {
  .resource-window .reward-heading-meta .reward-back {padding:9px 6px;margin:-9px -6px}
  .resource-window .resource-faq summary {padding-block:6px;margin-block:-6px}
  .resource-window .resource-faq summary::before {top:6px}
  .workshop-ui[data-mode=market] .garden-market .market-detail .market-more summary {padding-block:6px;margin-block:-6px}
  .workshop-ui[data-mode=market] .garden-market .market-art-action::after {content:'';position:absolute;inset:-6px -4px}
  .mypcs-specs-line {padding-block:8px;margin-block:-8px}
  .settings-toggle {min-height:34px}
  html .settings-volume {box-sizing:content-box;padding-block:7px;margin-block:-7px}
}