/* BUILD MODE, EASIER + MORE FUN (2026-10-01 — Andrew: "lets also do a big upgrade on build mode overall, i feel it needs to be easier and
   more fun to use"). Loaded after refit-polish.css; every rule here is scoped to the REFIT overlay and speaks the current glass
   (--refit-glass / --refit-edge, 8px keys, 10px cards, no glow). */

/* ---- the Props tab shows its props. At 1440×900 the browser column scrolled AND the tile grid scrolled inside it, so the grid got a
   ~10px sliver under the make panel, the category menu and the hint box. Now the controls sit still and ONE scroller holds the tiles. */
.refit-overlay .refit-propbrowser { overflow: hidden; min-height: 0; }
.refit-overlay .refit-shelves { min-height: 0; }
.refit-overlay #refit-propgrid-host { height: auto; flex: 1 1 0; min-height: 0; overflow-y: auto; }

/* ---- MAKE A PROP at rest: one row (build.js makePropMount) — the title and, where linking is possible, the credits key */
.refit-overlay .refit-makeprop.is-compact { flex-direction: row; align-items: center; padding: 6px 8px 6px 12px; gap: 8px; margin: 2px 0; }
.refit-overlay .refit-makeprop.is-compact .refit-makeprop-head { flex: 1 1 auto; flex-direction: row; min-height: 30px; }
.refit-overlay .refit-makeprop.is-compact .refit-makeprop-cta span { display: none; }
.refit-overlay .refit-makeprop.is-compact > :not(.refit-makeprop-head):not(.refit-makeprop-cta) { display: none !important; }
.refit-overlay .refit-makeprop.is-compact .refit-makeprop-head small { display: none; }
.refit-overlay .refit-makeprop-head[role="button"] { display: flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 6px; }
.refit-overlay .refit-makeprop-head[role="button"]::after { content: '▸'; margin-left: auto; color: var(--ph-dim); font-size: 14px; }
.refit-overlay .refit-makeprop-head[aria-expanded="true"]::after { content: '▾'; }
.refit-overlay .refit-makeprop-head[role="button"]:hover b { color: var(--ph-bright); }
.refit-overlay .refit-makeprop.is-compact .refit-makeprop-cta:not([hidden]) { display: flex; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.refit-overlay .refit-makeprop.is-compact .refit-makeprop-cta .bb { min-height: 30px; padding: 4px 10px; font-size: 14px; }

/* ---- the status strip: one quiet line, not a block */
.refit-overlay .refit-hint { padding: 7px 12px; gap: 2px; }
.refit-overlay .refit-hint .refit-hint-verb { font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* browsing the catalog, the camera keys step aside (HELP has them): the tiles get the room */
.refit-overlay[data-catalog="true"] .refit-hint .refit-hint-keys { display: none; }
.refit-overlay .refit-hint .refit-hint-keys { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- the library tabs never wear the old pip-boy [ ] hover brackets */
.refit-overlay .refit-library-tabs .bb:hover::before, .refit-overlay .refit-library-tabs .bb:hover::after,
.refit-overlay .refit-selection .bb:hover::before, .refit-overlay .refit-selection .bb:hover::after { content: none; }

/* ---- THE SELECTION CARD: above the library (which now stays), the object's art + name, then its actions wearing their keys.
   Compact on purpose: at 1440x900 a taller card squeezed the tile grid back to a sliver, so the art is 84x54 and the keys run
   three to a row (two where the dock is narrow). */
.refit-overlay .refit-selection { display: grid; gap: 7px; padding: 8px 12px; border: 0; container-type: inline-size; border-bottom: 1px solid var(--refit-edge);
  background: linear-gradient(165deg, rgba(var(--ph-rgb),.075), transparent 46%), color-mix(in srgb, var(--panel2, var(--panel)) 88%, transparent); }
.refit-overlay .refit-selection[hidden] { display: none; }
.refit-overlay .refit-sel-head { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.refit-overlay .refit-sel-art { display: grid; place-items: center; width: 84px; height: 54px; border-radius: 8px;
  background: radial-gradient(ellipse 72% 70% at 50% 64%, rgba(130,170,150,.12), transparent 76%), rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--refit-edge); }
.refit-overlay .refit-sel-art canvas { display: block; width: 84px; height: 54px; }
/* a group: up to three of them, stacked in the one well */
.refit-overlay .refit-sel-art.is-group canvas { grid-area: 1 / 1; }
.refit-overlay .refit-sel-art.is-group canvas:nth-child(1) { transform: translate(-13px, -7px) scale(.62); }
.refit-overlay .refit-sel-art.is-group canvas:nth-child(2) { transform: translate(13px, -7px) scale(.62); }
.refit-overlay .refit-sel-art.is-group canvas:nth-child(3) { transform: translate(0, 9px) scale(.62); }
.refit-overlay .refit-sel-name { display: grid; gap: 2px; min-width: 0; }
.refit-overlay .refit-sel-name b { font-weight: normal; font-size: 17px; line-height: 1.15; letter-spacing: .6px; color: var(--ph-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refit-overlay .refit-sel-name small { font-size: 13px; color: var(--ph-dim); line-height: 1.25; }
.refit-overlay .refit-selection .refit-sel-x { min-width: 32px; min-height: 32px; padding: 0; border-radius: 8px; }
.refit-overlay .refit-selection-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
@container (max-width: 380px) { .refit-overlay .refit-selection-actions { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.refit-overlay .refit-selection .refit-sel-act { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; min-height: 30px; padding: 4px 6px 4px 8px;
  font-size: 14px; letter-spacing: .4px; border: 1px solid var(--refit-edge); border-radius: 8px; background: var(--refit-glass); box-shadow: inset 0 1px 0 rgba(var(--ph-bright-rgb),.07); text-shadow: none; }
.refit-overlay .refit-selection .refit-sel-act:hover:not(:disabled) { color: var(--ph-bright); border-color: rgba(var(--ph-rgb),.45); background: rgba(var(--ph-rgb),.1); }
.refit-overlay .refit-selection .refit-sel-act span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refit-overlay .refit-selection .refit-sel-act kbd { flex: 0 0 auto; font: 11px/1 'VT323', monospace; letter-spacing: .2px; color: var(--ph-dim); padding: 2px 4px; border-radius: 4px;
  border: 1px solid var(--refit-edge); background: rgba(0,0,0,.25); white-space: nowrap; }
.refit-overlay .refit-selection .refit-sel-del:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.refit-overlay .refit-selection .refit-sel-del:hover kbd { color: var(--bad); }
.refit-overlay .refit-selection .refit-position { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--ph-dim); }
.refit-overlay .refit-selection .refit-position label { margin: 0; }
.refit-overlay .refit-selection .refit-sel-pos[aria-expanded="true"] { color: var(--ph-bright); border-color: rgba(var(--ph-rgb),.45); }
/* WHO SITS HERE (build.js sitsRow): a workstation's agent, picked in its own card — one chip per crew member */
.refit-overlay .refit-sel-sits { display: grid; gap: 5px; }
.refit-overlay .refit-sel-sits-k { font-size: 13px; letter-spacing: .8px; color: var(--ph-dim); }
.refit-overlay .refit-sel-sits-row { display: flex; flex-wrap: wrap; gap: 5px; }
.refit-overlay .refit-sel-sits-row small { font-size: 14px; color: var(--ph-dim); }
.refit-overlay .refit-selection .refit-sit { min-height: 30px; max-width: 100%; padding: 4px 10px; font-size: 14px; letter-spacing: .4px; border: 1px solid var(--refit-edge); border-radius: 8px;
  background: var(--refit-glass); text-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refit-overlay .refit-selection .refit-sit:hover { color: var(--ph-bright); border-color: rgba(var(--ph-rgb),.45); background: rgba(var(--ph-rgb),.1); }
.refit-overlay .refit-selection .refit-sit.active { color: var(--ph-bright); border-color: rgba(var(--ph-rgb),.7); background: rgba(var(--ph-rgb),.16); }

/* ---- the Edit tab: the editor's keys as key caps (build.js renderPalette, THE TABS SHOW THEIR THINGS) */
.refit-overlay .refit-keycard { gap: 10px; }
.refit-overlay .refit-keyrows { display: grid; gap: 4px; }
.refit-overlay .refit-keyrow { display: grid; grid-template-columns: 108px minmax(0,1fr); align-items: center; gap: 8px; min-height: 28px; padding: 2px 10px 2px 5px; border: 1px solid var(--refit-edge); border-radius: 8px; background: var(--refit-glass); }
.refit-overlay .refit-keyrow kbd { justify-self: start; font: 12px/1 'VT323', monospace; letter-spacing: .3px; color: var(--ph-bright); padding: 3px 6px; border-radius: 4px; border: 1px solid var(--refit-edge); background: rgba(0,0,0,.25); white-space: nowrap; }
.refit-overlay .refit-keyrow > span { min-width: 0; font-size: 14px; color: var(--ph-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- THE ROOM CARD (build.js renderRoomCard): the deck in the art well, the name as a field, the furnish tiles */
.refit-overlay .refit-sel-art.is-room canvas { width: 84px; height: 48px; image-rendering: pixelated; border-radius: 6px; }
.refit-overlay .refit-room-name { width: 100%; min-width: 0; padding: 3px 6px; font: 17px/1.15 'VT323', monospace; letter-spacing: .6px; color: var(--ph-bright);
  background: rgba(0,0,0,.22); border: 1px solid var(--refit-edge); border-radius: 6px; outline: none; }
.refit-overlay .refit-room-name:focus { border-color: rgba(var(--ph-rgb),.55); background: rgba(0,0,0,.32); }
.refit-overlay .refit-room-furnish[aria-expanded="true"] { color: var(--ph-bright); border-color: rgba(var(--ph-rgb),.45); }
.refit-overlay .refit-room-ask { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--bad) 55%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--bad) 7%, transparent); font-size: 14px; line-height: 1.3; color: var(--text, var(--ph)); }
.refit-overlay .refit-room-ask-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.refit-overlay .refit-furnish-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; max-height: 236px; overflow-y: auto; scrollbar-width: thin; }
.refit-overlay .refit-furnish-tile { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 5px 4px 6px; border: 1px solid var(--refit-edge); border-radius: 10px;
  background: var(--refit-glass); color: var(--ph-dim); cursor: pointer; font: inherit; }
.refit-overlay .refit-furnish-tile:hover { color: var(--ph-bright); border-color: rgba(var(--ph-rgb),.45); background: rgba(var(--ph-rgb),.1); }
.refit-overlay .refit-furnish-art canvas { display: block; width: 72px; height: 46px; }
.refit-overlay .refit-furnish-name { max-width: 100%; font-size: 13px; letter-spacing: .4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .refit-overlay .refit-selection .refit-sel-act { transition: none; }
}