/* web/build-mode.css — Phase 7 AMENDMENT 6 ("make it WOW"), the Build/Buy
   panel that sits ALONGSIDE the real, live LOT view (no full-screen takeover
   — see build-mode.js's own header for why). Uses the shared design tokens
   from style.css's :root (loaded first, per index.html's <link> order) so
   this panel reads as part of the same system, not a bolted-on templated
   dialog. */

.bpPanel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 392px;
  max-width: 100vw;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(10, 14, 28, 0.94), rgba(10, 14, 28, 0.97));
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45);
  font-family: var(--font-body);
  color: var(--ink);
  backdrop-filter: blur(6px);
}
.bpPanel[hidden] { display: none; }

.bpHeader { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.bpTitle { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bpTitle h2 { font-size: 17px; margin: 0; }
.bpVersion { font-size: 11px; color: var(--muted); white-space: nowrap; }
.bpHeaderActions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.bpHeaderActions button { font-size: 12px; padding: 6px 10px; border-radius: 8px; }

/* Build tools row (2026-09-11, docs/NEXT-BUILD-BACKLOG.md item 6): the
   always-visible toggles — grid snap (G), top-down camera (T), eyedropper
   (I), room labels. Distinct from .bpHeaderActions (undo/redo/save/done,
   which are ACTIONS) because these four are STATES: an active one stays lit
   so "is snap on right now" is answerable at a glance, the way a Sims build
   toolbar reads. */
.bpToolRow { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.bpTool {
  font-size: 11.5px; padding: 5px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
  white-space: nowrap;
}
.bpTool:hover { color: var(--ink); border-color: var(--accent); }
.bpTool.on { border-color: var(--accent); color: var(--accent); background: rgba(255, 207, 107, 0.14); }

.bpTabs { padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.bpModeSwitch { display: flex; gap: 2px; background: var(--panel-2); border-radius: 999px; padding: 3px; }
.bpModeTab { flex: 1; border: none; background: transparent; color: var(--muted); padding: 7px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bpModeTab.active { background: var(--accent); color: var(--accent-ink); }
.bpSearch { width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.bpCostLine { font-size: 12px; color: var(--accent); min-height: 14px; }

.bpHouseBar, .bpYardBar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; flex-wrap: wrap; }
.bpHouseBar[hidden], .bpYardBar[hidden] { display: none; }
.bpBarLabel { font-weight: 600; color: var(--ink); }
.bpNote { color: var(--muted); font-size: 11px; }
.bpChangeHouseBtn { font-size: 12px; padding: 5px 10px; }
.bpChipRow { display: flex; gap: 6px; flex-wrap: wrap; }
.bpChip { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); padding: 5px 10px; border-radius: 999px; font-size: 11.5px; cursor: pointer; }
.bpChip.active { border-color: var(--accent); color: var(--accent); background: rgba(255, 207, 107, 0.12); }
.bpChip.locked { opacity: 0.55; }
.bpYardZoneTabs { display: flex; gap: 4px; margin-bottom: 8px; width: 100%; }

.bpPaintBody { padding: 10px 16px; border-bottom: 1px solid var(--line); overflow-y: auto; max-height: 42vh; }
.bpPaintBody[hidden] { display: none; }
.bpPaintSection { margin-bottom: 14px; }
.bpPaintSection h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bpRoomPaint { margin: 8px 0 12px; padding-top: 8px; border-top: 1px dashed var(--line); }
.bpRoomPaint strong { display: block; margin-bottom: 6px; font-size: 13px; }
.bpPaletteSwatch, .bpSwatch { width: 24px; height: 24px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.bpPaletteSwatch.active, .bpSwatch.active { border-color: var(--accent); }
.bpSwatch.locked { opacity: 0.5; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
#bpTrimColor { width: 34px; height: 24px; border: none; border-radius: 6px; background: none; cursor: pointer; vertical-align: middle; }

.bpAccess { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
.bpAccess[hidden] { display: none; }
.bpSelect { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 12px; }
.bpInviteRow { display: flex; align-items: center; gap: 6px; }
.bpInviteCode { font-family: monospace; background: var(--panel-2); border-radius: 6px; padding: 2px 8px; }

/* S2-5: version history / restore (added 2026-09-05 verify pass — this
 * section did not exist before; GET .../versions + POST .../restore were
 * live server-side with no UI to reach them). Mirrors .bpAccess's own
 * compact row styling so it reads as one family of "account-ish" panels. */
.bpVersions { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 12px; max-height: 140px; overflow-y: auto; }
.bpVersions[hidden] { display: none; }
.bpVersionRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
.bpVersionCurrent { color: var(--accent); font-weight: 600; }

.bpTray { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.bpTray[hidden] { display: none; }
.bpTrayLabel { font-size: 11px; color: var(--muted); width: 100%; }
.bpTrayItem { font-size: 11px; border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 4px 9px; cursor: pointer; }
.bpTrayItem:hover { color: var(--accent); border-color: var(--accent); }

.bpCatalog { flex: 1; overflow-y: auto; padding: 12px 16px; min-height: 0; }
.bpCatTabsRow { display: flex; flex-wrap: wrap; }
.bpCatTab { border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); padding: 5px 10px; border-radius: 999px; font-size: 11.5px; cursor: pointer; margin: 0 4px 4px 0; }
.bpCatTab.active { border-color: var(--accent); color: var(--accent); }
.bpItemGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.bpItem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px 6px; cursor: pointer; color: var(--ink); }
.bpItem:hover { border-color: var(--accent); }
.bpItem.armed { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 207, 107, 0.3) inset; }
.bpItem.locked { opacity: 0.82; }
.bpThumb { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.bpThumb img, .bpThumb canvas { width: 100%; height: 100%; object-fit: contain; }
.bpItemName { font-size: 10.5px; text-align: center; line-height: 1.2; }
.bpPriceBadge { position: absolute; top: 4px; right: 4px; background: var(--accent); color: var(--accent-ink); font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }
.bpGetMoreBtn { width: 100%; margin-top: 12px; font-size: 12.5px; }
.bpGrowthNote { color: var(--muted); font-size: 11px; margin-top: 8px; }

.bpToolbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.bpToolbar[hidden] { display: none; }
.bpReason { font-size: 12px; flex: 1 1 100%; }
.bpReason.ok { color: #7fd68a; }
.bpReason.bad { color: var(--danger); }
/* Third state (2026-09-11 QA gate, S3): an armed ghost that has not been
   positioned yet is neither good nor bad — a neutral prompt, not a red
   error the player has done nothing to earn. */
.bpReason.hint { color: var(--muted); }

/* Rotation hint + landing read-out (2026-09-11): the panel half of the
   "visible rotation hint" — the other half is the arrow the 3D overlay
   draws on the ghost itself. `.bpLanding` is what keeps a FREE-placed ghost
   honest: it names the 0.5 m cell the server will actually store. */
.bpMetaRow { display: flex; flex: 1 1 100%; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.bpRotHint { font-variant-numeric: tabular-nums; color: var(--ink); opacity: 0.85; }
.bpLanding { font-variant-numeric: tabular-nums; }

.bpHints { padding: 8px 16px 10px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10.5px; color: var(--muted); }
.bpHints span::before { content: "· "; }
.bpHints span:first-child::before { content: ""; }

#bpLabelsLayer { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.bpRoomLabel {
  position: absolute; transform: translate(-50%, -100%);
  font-family: var(--font-display); font-size: 12px; font-weight: 650;
  color: var(--ink); background: rgba(10, 14, 28, 0.55); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; white-space: nowrap; letter-spacing: 0.02em;
}

#bpInfoCard {
  position: fixed; z-index: 70; max-width: 240px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 12px; color: var(--ink); box-shadow: 0 8px 24px var(--shadow);
}
#bpInfoCard[hidden] { display: none; }
#bpInfoCard strong { display: block; font-family: var(--font-display); font-size: 13.5px; margin-bottom: 4px; }
#bpInfoCard p { margin: 6px 0 0; color: var(--muted); }
.bpInfoRow { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }

@media (max-width: 640px) {
  .bpPanel {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 56vh;
    border-left: none; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    /* S2-2 fix (2026-09-05 QA verify pass): `.bpPanel`'s own fixed-size rows
       (header, mode tabs, house/yard bar, the owner-only Access and Versions
       sections, the item tray) have no flex-shrink of their own — only
       `.bpCatalog` (flex:1, min-height:0 above) does. On a short viewport
       their combined natural height can already exceed this panel's own
       56vh cap before `.bpCatalog` even gets a turn, which pushed the whole
       catalogue (and the toolbar/reason text below it) below this sheet's
       own bottom edge with nothing to scroll (confirmed live: `.bpCatalog`
       rendered at top >= 466px in a 419px-tall viewport, docs/reviews/
       2026-09-05-QA-final-predeploy.md S2-2). Scrolling the whole sheet is
       the honest fallback once compaction alone can't fit everything. */
    overflow-y: auto;
  }
  .bpItemGrid { grid-template-columns: repeat(4, 1fr); }
  .bpThumb { width: 48px; height: 48px; }
  .bpHints { display: none; }
}

/* ---- S2-2 fix, continued: on a genuinely short viewport (531x419 was this
   review's own repro size) even a scrollable sheet is a poor experience if
   simply opening it means scrolling past four rows before seeing an item —
   compact the fixed-size rows so more of the catalogue is visible without
   scrolling first. */
@media (max-width: 640px) and (max-height: 520px) {
  .bpPanel { max-height: 78vh; }
  .bpHeader { padding: 8px 12px 6px; }
  .bpTabs { padding: 6px 12px; gap: 5px; }
  .bpHouseBar, .bpYardBar { padding: 6px 12px; }
  .bpAccess, .bpVersions, .bpTray { padding: 5px 12px; }
  .bpVersions { max-height: 80px; }
}

/* A quieter, warm workbench with clear placement controls and room to view the lot. */
.bpPanel { background: linear-gradient(165deg,rgba(29,39,37,.97),rgba(16,24,24,.98)); }
.bpTitle { position: relative; }
.bpVersion { color: #b9d5bc; font-variant-numeric: tabular-nums; }
.bpOwnedFilter, .bpRepeat { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink); }
.bpOwnedFilter input, .bpRepeat input { accent-color:#efc47b; width:17px; height:17px; }
.bpRepeat { flex-basis:100%; padding:4px 0; }
.bpCompact { font-size:11px; margin-top:5px; }
.bpItem { transition:background .15s,border-color .15s; border-radius:14px; }
.bpItem:hover { background:rgba(238,197,128,.1); }
.bpItemName { font-size:12px; line-height:1.35; }
.bpPanel button:focus-visible, .bpPanel input:focus-visible, .bpPanel select:focus-visible { outline:2px solid #f7d39b; outline-offset:3px; }
.bpToolbar { background:rgba(43,58,48,.6); }
.bpCompactMode { bottom:auto; max-height:85vh; overflow-y:auto; }
.bpCompactMode .bpTabs,.bpCompactMode .bpHouseBar,.bpCompactMode .bpYardBar,.bpCompactMode .bpPaintBody,.bpCompactMode .bpCatalog,.bpCompactMode .bpAccess,.bpCompactMode .bpVersions,.bpCompactMode .bpTray,.bpCompactMode .bpHints { display:none!important; }
@media(max-width:640px) {
 .bpPanel .bpHeaderActions button,.bpPanel .bpTool,.bpPanel .bpToolbar button { min-height:44px; }
 .bpCompactMode { top:auto; bottom:0; }
 .bpItemGrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .bpToolbar { position:sticky; bottom:0; background:#1d302b; z-index:1; }
}