/* PC storage (pc-storage-ui.mjs, owner decision 9 Oct 2026): the PC storage window that MY PCS, Build and the inventory
   open (move, swap, store, place, take apart) in the HUD's cream pixel style, and the whole-PC card of the inventory's
   Complete PCs and MY PCS' Stored PCs. Text never below 12 px; buttons touch-sized on phones. */

/* ---------------------------------------------------------------- the window */
.pcs-dialog{--q:clamp(.9px,min(calc((100vw - 24px) / 560),calc((100dvh - 24px) / 620)),1.2px);--ink:#3e211d;--soft:#6b4a33;--muted:#94683f;
  box-sizing:border-box;width:min(calc(560 * var(--q)),calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
  margin:auto;padding:0;border:calc(12 * var(--q)) solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;overflow:hidden;
  color:var(--ink);font:400 max(13px,calc(14 * var(--q)))/1.45 Pixeloid,monospace;font-synthesis:none;box-shadow:0 12px 40px #090f2433}
.pcs-dialog[open]{display:flex;flex-direction:column}
.pcs-dialog::backdrop{background:#111d3980;backdrop-filter:blur(3px)}
.pcs-dialog [hidden]{display:none!important}
.pcs-dialog *{box-sizing:border-box}
/* Content-sized sheet and body (flex-basis auto, never 0%): WebKit resolves a percentage inside a modal <dialog> as 0
   (the iPhone thin-frame fix of 9 Oct 2026, island-hall.css). */
.pcs-dialog-sheet{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.pcs-dialog :is(h2,h3,p,dl,dd){margin:0}
.pcs-dialog :is(button):focus-visible{outline:3px solid #3a97cf;outline-offset:2px}
.pcs-dialog button{font-family:Pixeloid,monospace}
.pcs-dialog button:not(:disabled):hover{filter:brightness(1.04)}
.pcs-dialog-head{flex:none;display:flex;align-items:center;gap:calc(12 * var(--q));padding:calc(9 * var(--q)) calc(14 * var(--q));
  background:linear-gradient(105deg,#ffd08b,#ffe6ae);border-bottom:calc(3 * var(--q)) solid #d9a15f}
.pcs-dialog-title{flex:1;min-width:0;font:700 max(16px,calc(20 * var(--q)))/1.2 Pixeloid,monospace;overflow-wrap:anywhere}
.pcs-dialog-close{flex:none;display:grid;place-items:center;width:calc(42 * var(--q));height:calc(42 * var(--q));min-width:36px;min-height:36px;padding:calc(9 * var(--q));
  border:0;background:url('../ui/frames/picker-close.svg') center/100% 100% no-repeat;color:var(--ink);cursor:pointer}
.pcs-dialog-close svg{width:100%;height:100%;shape-rendering:crispEdges}
.pcs-dialog-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;gap:calc(10 * var(--q));
  padding:calc(12 * var(--q)) calc(14 * var(--q)) calc(14 * var(--q));scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}
.pcs-intro,.pcs-empty{font-size:max(13px,calc(13.5 * var(--q)));line-height:1.45;color:var(--soft)}
/* The desks (or the PCs) to choose from: one big button per row. */
.pcs-choices{display:grid;gap:calc(7 * var(--q))}
.pcs-choice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(10 * var(--q));width:100%;min-height:max(52px,calc(56 * var(--q)));
  padding:calc(6 * var(--q)) calc(10 * var(--q));border:calc(5 * var(--q)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch;
  background:none;color:var(--ink);text-align:left;cursor:pointer}
.pcs-choice[data-kind=swap]{border-image-source:url('../ui/frames/tile-blue.svg')}
.pcs-choice:disabled{cursor:not-allowed;opacity:.62}
.pcs-tag{flex:none;padding:calc(4 * var(--q)) calc(7 * var(--q)) calc(3 * var(--q));background:var(--pc,#f0913a);border:calc(2 * var(--q)) solid #3e211d;
  box-shadow:inset 0 calc(3 * var(--q)) #ffffff47,inset 0 calc(-3 * var(--q)) #00000024;color:#20120b;font:700 max(12px,calc(13 * var(--q)))/1 Pixeloid,monospace;white-space:nowrap}
.pcs-choice-copy{display:grid;gap:calc(2 * var(--q));min-width:0}
.pcs-choice-title{font:700 max(13px,calc(14.5 * var(--q)))/1.25 Pixeloid,monospace;overflow-wrap:anywhere}
.pcs-choice-detail,.pcs-choice-power{font-size:max(12px,calc(12.5 * var(--q)));line-height:1.3;color:var(--soft);overflow-wrap:anywhere}
.pcs-choice-power[data-tone=powered],.pcs-choice-power[data-tone=home]{color:#2f6a2b}
.pcs-choice-power:is([data-tone=short],[data-tone=build],[data-tone=gated],[data-tone=building],[data-tone=queued],[data-tone=too-much]){color:#8a3c12}
.pcs-choice-go{flex:none;padding:calc(5 * var(--q)) calc(10 * var(--q));border:calc(5 * var(--q)) solid transparent;border-image:url('../ui/frames/power-gold.svg') 12 fill stretch;
  font:700 max(12px,calc(13 * var(--q)))/1.1 Pixeloid,monospace;color:#3a1c08;white-space:nowrap}
.pcs-choice[data-kind=swap] .pcs-choice-go{border-image-source:url('../ui/frames/cream.svg')}
.pcs-choice:disabled .pcs-choice-go{border-image-source:url('../ui/frames/tile.svg');border-image-slice:8 fill;color:#8b7964}
.pcs-thumb{flex:none;display:grid;place-items:center;width:calc(64 * var(--q));aspect-ratio:4/3;background:linear-gradient(180deg,#bfe1fb,#fbf3dc);border:calc(2 * var(--q)) solid #b9d6ec}
.pcs-thumb-img{display:block;width:100%;height:100%;object-fit:contain;padding:calc(2 * var(--q))}
.pcs-thumb[data-empty=true] .pcs-thumb-img{visibility:hidden}
/* The question: one sentence per line, the first one bold. */
.pcs-confirm{display:grid;gap:calc(6 * var(--q));padding:calc(10 * var(--q)) calc(12 * var(--q));background:#fffaf0;border:calc(2 * var(--q)) solid #ecd9ae}
.pcs-confirm[data-tone=swap]{background:#eef6fd;border-color:#acd0e9}
.pcs-confirm[data-tone=unpack]{background:#fff1e6;border-color:#f0b98d}
.pcs-question{font:700 max(14px,calc(15.5 * var(--q)))/1.35 Pixeloid,monospace;overflow-wrap:anywhere}
.pcs-line{font-size:max(13px,calc(13.5 * var(--q)));line-height:1.45;color:var(--soft);overflow-wrap:anywhere}
.pcs-error{padding:calc(6 * var(--q)) calc(9 * var(--q));background:#ffe5d5;color:#873e2d;font-size:max(13px,calc(13 * var(--q)));line-height:1.4}
.pcs-buttons{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:calc(8 * var(--q))}
.pcs-button{min-height:max(44px,calc(46 * var(--q)));padding:calc(3 * var(--q)) calc(14 * var(--q));border:calc(7 * var(--q)) solid transparent;
  border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;color:var(--ink);font:700 max(13px,calc(14 * var(--q)))/1.1 Pixeloid,monospace;cursor:pointer}
.pcs-button:is(.pcs-go,.pcs-primary){border-image-source:url('../ui/frames/power-gold.svg');color:#3a1c08;text-shadow:0 1px #fff3b066}
.pcs-button:disabled{border-image-source:url('../ui/frames/tile.svg');border-image-slice:8 fill;color:#8b7964;cursor:not-allowed;text-shadow:none}

/* ---------------------------------------------------------------- the whole-PC card */
.pcs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.pcs-card{--q:1px;--ink:#3e211d;--soft:#6b4a33;--muted:#94683f;display:grid;grid-template-columns:minmax(96px,38%) minmax(0,1fr);align-items:stretch;gap:10px;min-width:0;
  padding:8px 10px;border:5px solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch;color:var(--ink);font-family:Pixeloid,monospace}
.pcs-card :is(h3,p,dl,dd){margin:0}
.pcs-art{position:relative;isolation:isolate;display:grid;place-items:center;align-self:center;width:100%;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(180deg,#bfe1fb 0%,#dff0fc 52%,#fbf3dc 100%);border:2px solid #b9d6ec}
.pcs-art::after{content:'';position:absolute;z-index:-1;left:8%;right:8%;bottom:6%;height:26%;border-radius:50%;
  background:radial-gradient(closest-side,#c3e48c 0 70%,#a6d16b 74% 88%,#86b450 90% 96%,transparent 98%)}
.pcs-art-img{position:relative;display:block;width:100%;height:100%;object-fit:contain;padding:3px 4px 8px;filter:drop-shadow(0 2px 0 #3e211d22)}
.pcs-art[data-empty=true] .pcs-art-img{visibility:hidden}
.pcs-card[data-kind=stored] .pcs-art-img{filter:grayscale(.25) drop-shadow(0 2px 0 #3e211d22)}
.pcs-card-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.pcs-card-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.pcs-card-name{flex:1 1 auto;min-width:0;font:700 15px/1.2 Pixeloid,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcs-badge{flex:none;padding:3px 6px;border:2px solid #a8cf8b;background:#eef7e2;color:#33692f;font:700 12px/1 Pixeloid,monospace;white-space:nowrap}
.pcs-badge[data-kind=system]{border-color:#acd0e9;background:#e6f2fb;color:#244c70}
/* One row per number, its label left and its value right: nothing is cut in a narrow card. */
.pcs-stats{display:grid;gap:2px;padding:4px 7px;background:#fffaf0;border:2px solid #ecd9ae}
.pcs-stat{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0;line-height:1.25}
.pcs-stat+.pcs-stat{border-top:1px dashed #ecd9ae;padding-top:2px}
.pcs-stat dt{font-size:12px;color:var(--muted);white-space:nowrap}
.pcs-stat dd{min-width:0;font:700 13px/1.25 Pixeloid,monospace;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pcs-stat[data-tone=warn] dd{color:#a8641a}
.pcs-stat[data-tone=bad] dd{color:#b23a1f}
.pcs-stat[data-tone=good] dd{color:#2f6a2b}
.pcs-card-note{font-size:12px;line-height:1.3;color:var(--soft)}
.pcs-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.pcs-actions>.pcs-button{flex:1 1 auto;min-height:40px;padding:2px 10px;font-size:13px}
.pcs-card .pcs-button{min-height:40px}

/* ---------------------------------------------------------------- Build: the PC overview's buttons, an empty desk's list */
.workshop-ui[data-mode=build] .build-pc-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px;margin:0 0 calc(8 * var(--bs))}
.workshop-ui[data-mode=build] .build-pc-actions .build-pc-action{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:max(40px,calc(46 * var(--bs)));
  padding:4px 10px;font-size:max(14px,calc(18 * var(--bs)))!important;line-height:1.1;white-space:normal;text-align:center}
.workshop-ui[data-mode=build] .build-pc-action-icon{flex:none;display:inline-grid;width:max(16px,calc(20 * var(--bs)));height:max(14px,calc(17 * var(--bs)))}
.workshop-ui[data-mode=build] .build-pc-action-icon svg{width:100%;height:100%}
.workshop-ui[data-mode=build] .build-place{display:grid;gap:8px;margin:calc(4 * var(--bs)) 0 calc(10 * var(--bs));padding:10px;border:2px solid #b9d6ec;background:#eef6fd}
.workshop-ui[data-mode=build] .build-place-title{margin:0;font:700 max(15px,calc(20 * var(--bs)))/1.2 Rajdhani,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#244c70}
.workshop-ui[data-mode=build] .build-place-list{display:grid;gap:8px}
.workshop-ui[data-mode=build] .build-place-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px;background:#fffaf0;border:2px solid #ecd9ae}
.workshop-ui[data-mode=build] .build-place-art{display:grid;place-items:center;width:max(64px,calc(80 * var(--bs)));aspect-ratio:4/3;background:linear-gradient(180deg,#bfe1fb,#fbf3dc);border:2px solid #b9d6ec}
.workshop-ui[data-mode=build] .build-place-art-img{display:block;width:100%;height:100%;object-fit:contain;padding:2px}
.workshop-ui[data-mode=build] .build-place-art[data-empty=true] .build-place-art-img{visibility:hidden}
.workshop-ui[data-mode=build] .build-place-copy{display:grid;gap:2px;min-width:0}
.workshop-ui[data-mode=build] .build-place-name{font:700 max(15px,calc(19 * var(--bs)))/1.15 Rajdhani,sans-serif;overflow-wrap:anywhere}
.workshop-ui[data-mode=build] .build-place-stats,.workshop-ui[data-mode=build] .build-place-power{font:600 max(13px,calc(16 * var(--bs)))/1.2 Rajdhani,sans-serif;color:#6a5d55}
.workshop-ui[data-mode=build] .build-place-power[data-tone=short]{color:#8a3c12}
.workshop-ui[data-mode=build] .build-place-card .build-button{width:auto!important;min-height:max(38px,calc(42 * var(--bs)))!important;padding:2px 12px!important;white-space:nowrap}

/* ---------------------------------------------------------------- the inventory's Complete PCs */
/* A whole PC is two item cards wide (the full row on a phone); a card opened for a choice is the window's job. */
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card{grid-column:span 2;height:100%;min-height:0;overflow:hidden;
  border-width:calc(7 * var(--iv));border-image-slice:9 fill;padding:calc(8 * var(--iv)) calc(10 * var(--iv));font-family:Rajdhani,sans-serif}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-card-name{font:700 max(15px,calc(22 * var(--iv)))/1.1 Rajdhani,sans-serif}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-badge{font:700 max(12px,calc(15 * var(--iv)))/1 Rajdhani,sans-serif}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-stat dt{font:500 max(12px,calc(15 * var(--iv)))/1.1 Rajdhani,sans-serif}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-stat dd{font:700 max(13px,calc(18 * var(--iv)))/1.15 Rajdhani,sans-serif}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-card-note{font:500 max(12px,calc(16 * var(--iv)))/1.2 Rajdhani,sans-serif}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-button{min-height:max(36px,calc(44 * var(--iv)));font:700 max(13px,calc(18 * var(--iv)))/1.1 Rajdhani,sans-serif}
/* Its two buttons side by side: the card is one grid row tall. */
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-actions{flex-wrap:nowrap}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-actions>.pcs-button{flex:1 1 0;min-width:0;padding-inline:6px;white-space:normal}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-card-body{gap:calc(5 * var(--iv))}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-stats{padding:calc(3 * var(--iv)) calc(7 * var(--iv))}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid[data-view=pcs]{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Complete PCs holds whole-PC cards only: each row is as tall as its cards (the item rows' fixed heights would clip a
   card on a short screen or leave half of it empty on a phone). */
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid[data-view=pcs]{grid-auto-rows:max-content}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-grid[data-view=pcs]>.pcs-card{grid-row:auto;height:auto}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-pcs-empty{grid-column:1/-1}
.workshop-ui[data-mode=inventory] .garden-inventory .inv-selected-bar[hidden]{display:none}
@media(max-width:700px){
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-grid[data-view=pcs]{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* A phone: the whole row and two grid rows tall, its buttons one under the other. */
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card{grid-row:span 2;grid-template-columns:minmax(84px,34%) minmax(0,1fr);gap:8px;padding:6px;border-width:6px}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-card-name{font-size:19px}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-stat dt{font-size:14px}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-stat dd{font-size:16px}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-card-note{font-size:14px}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-actions{flex-direction:column}
  .workshop-ui[data-mode=inventory] .garden-inventory .inv-grid>.pcs-card .pcs-actions>.pcs-button{flex:none;width:100%;min-height:42px;font-size:16px}
}

/* ---------------------------------------------------------------- phones */
@media(max-width:620px){
  .workshop-ui[data-mode=build] .build-place-card{grid-template-columns:auto minmax(0,1fr)}
  .workshop-ui[data-mode=build] .build-place-card .build-button{grid-column:1/-1;width:100%!important}
  .pcs-dialog{--q:1px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-width:9px}
  .pcs-choice{grid-template-columns:auto minmax(0,1fr);gap:8px}
  .pcs-choice-go{grid-column:1/-1;justify-self:end}
  .pcs-buttons>.pcs-button{flex:1 1 0}
  .pcs-card{grid-template-columns:minmax(84px,34%) minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.pcs-dialog *{transition:none!important;animation:none!important}}