/* builder.css, the IDE dressed as a late-90s desktop app. It obeys the five
   laws too (this page is audited): legal colours, hard bevels, no radius. */

body { margin: 0; font-family: var(--rs-font-narrow); }

.bx-app {
  display: grid;
  grid-template-columns: 210px 1fr 290px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "toolbar toolbar toolbar"
    "palette stage inspector";
  block-size: 100vh;
}

/* ---- toolbar ---- */
.bx-toolbar {
  grid-area: toolbar;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rs-space-3);
  padding: var(--rs-space-2) var(--rs-space-3);
  background: var(--rs-bevel-face);
  border-block-end: 1px solid var(--rs-bevel-dark);
  box-shadow: 0 1px 0 var(--rs-bevel-shadow);
}
.bx-brand { font-weight: bold; color: #000080; }
.bx-group { display: flex; align-items: center; gap: var(--rs-space-1); }
.bx-group--end { margin-inline-start: auto; }

/* pressed toggles read as sunken, the current width, and active Preview */
.bx-w-on,
#bx-preview[aria-pressed="true"] { border-color: var(--rs-bevel-shadow) var(--rs-bevel-light) var(--rs-bevel-light) var(--rs-bevel-shadow) !important; }
#bx-preview[aria-pressed="true"] { background: #FFFFCC; }

/* ---- palette ---- */
.bx-palette {
  grid-area: palette; overflow: auto;
  background: var(--rs-bevel-face);
  border-inline-end: 1px solid var(--rs-bevel-dark);
}
.bx-palette__head { position: sticky; inset-block-start: 0; padding: var(--rs-space-2);
  background: var(--rs-bevel-face); border-block-end: 1px solid var(--rs-bevel-shadow); }
.bx-palette__head .rs-input { inline-size: 100%; }
.bx-palette__group { padding: var(--rs-space-2) var(--rs-space-2) 0; }
.bx-palette__group h2 { margin: 0 0 var(--rs-space-1);
  font-size: var(--rs-font-size-1); text-transform: uppercase; color: #333333; letter-spacing: 1px; }
.bx-palette__list { padding-block-end: var(--rs-space-4); }
.bx-pal {
  display: block; inline-size: 100%; text-align: start; margin-block-end: 2px;
  padding: 3px var(--rs-space-2);
  font: var(--rs-font-size-2)/1.3 var(--rs-font-narrow);
  color: #000000; background: #FFFFFF;
  border: 1px solid var(--rs-bevel-light);
  border-inline-end-color: var(--rs-bevel-shadow); border-block-end-color: var(--rs-bevel-shadow);
  cursor: pointer;
}
.bx-pal:hover { background: #000080; color: #FFFFFF; }
.bx-pal:focus-visible { outline: 2px solid #000080; outline-offset: 1px; }
.bx-pal[hidden] { display: none; }

/* preview makes the palette inert; wear the disabled gray honestly (opaque,
   no alpha) and say so, in the same tint as the pressed Preview button */
.bx-palette[inert]::before {
  content: "parked while previewing";
  display: block; padding: var(--rs-space-1) var(--rs-space-2);
  background: #FFFFCC; border-block-end: 1px solid var(--rs-bevel-shadow);
  font-size: var(--rs-font-size-1); color: #333333;
}
.bx-palette[inert] .bx-pal { color: #808080; background: var(--rs-bevel-face); cursor: default; }
.bx-palette[inert] .bx-palette__group h2 { color: #808080; }
.bx-palette[inert] .rs-input { color: #808080; background: var(--rs-bevel-face); }

/* ---- stage (the desktop) ---- */
.bx-stage {
  grid-area: stage; overflow: auto; padding: var(--rs-space-4);
  background: #008080;
}
.bx-stage__frame {
  margin-inline: auto; background: #FFFFFF;
  border: 2px solid var(--rs-bevel-light);
  border-inline-end-color: var(--rs-bevel-dark); border-block-end-color: var(--rs-bevel-dark);
}
#bx-canvas { display: block; inline-size: 100%; block-size: calc(100vh - 140px); min-block-size: 400px; border: 0; background: #FFFFFF; }

/* ---- inspector ---- */
.bx-inspector {
  grid-area: inspector; overflow: auto; padding: var(--rs-space-3);
  background: var(--rs-bevel-face);
  border-inline-start: 1px solid var(--rs-bevel-dark);
}
.bx-inspector h2 { margin: 0 0 var(--rs-space-2); font-size: var(--rs-font-size-3);
  border-block-end: 1px solid var(--rs-bevel-shadow); padding-block-end: 2px; }
.bx-field { margin-block-end: var(--rs-space-3); }
.bx-field > label { display: block; font-size: var(--rs-font-size-1); font-weight: bold; margin-block-end: 2px; }
.bx-field .rs-input, .bx-field .rs-select, .bx-field .rs-textarea { inline-size: 100%; }
.bx-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.bx-chip { font-size: var(--rs-font-size-1); padding: 2px var(--rs-space-2);
  border: 1px solid var(--rs-bevel-shadow); background: #FFFFFF; cursor: pointer; }
.bx-chip[aria-pressed="true"] { background: #000080; color: #FFFFFF; }
.bx-toggle { display: flex; align-items: center; gap: var(--rs-space-2); margin-block-end: 2px; font-size: var(--rs-font-size-2); }
.bx-widget-opts { margin: 0 0 var(--rs-space-2) 18px; padding-inline-start: var(--rs-space-2);
  border-inline-start: 2px solid var(--rs-bevel-shadow); }
.bx-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--rs-space-2);
  margin-block: 2px; font-size: var(--rs-font-size-1); }
.bx-opt > span { color: #333333; }
.bx-opt select, .bx-opt input[type="number"], .bx-opt input[type="text"] { inline-size: 55%; }
.bx-ops { display: flex; flex-wrap: wrap; gap: 2px; margin-block-start: var(--rs-space-2); }
.bx-hint { font-size: var(--rs-font-size-1); color: #333333; }

/* ---- export drawer ---- */
.bx-drawer {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
  block-size: 45vh; display: flex; flex-direction: column;
  background: var(--rs-bevel-face);
  border-block-start: 2px solid var(--rs-bevel-light);
  box-shadow: 0 -2px 0 var(--rs-bevel-dark);
}
.bx-drawer[hidden] { display: none; }
.bx-drawer__head { display: flex; align-items: center; gap: var(--rs-space-3);
  padding: var(--rs-space-2) var(--rs-space-3); border-block-end: 1px solid var(--rs-bevel-shadow); }
.bx-drawer__head strong { color: #000080; }
.bx-drawer__head #bx-drawer-close { margin-inline-start: auto; }
#bx-export-out { flex: 1; margin: var(--rs-space-2); resize: none;
  font-family: var(--rs-font-mono); font-size: var(--rs-font-size-2); white-space: pre; }

.bx-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

/* the little label that follows the pointer while dragging a component in */
.bx-ghost { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 100; pointer-events: none;
  padding: 2px var(--rs-space-2); background: #000080; color: #FFFFFF;
  font-size: var(--rs-font-size-1); border: 1px solid #FFFFFF; }

/* the builder wants room; stack the panels when there isn't any */
@media (max-width: 899px) {
  .bx-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "toolbar" "palette" "stage" "inspector";
    block-size: auto; min-block-size: 100vh;
  }
  .bx-palette { max-block-size: 150px; border-inline-end: 0; border-block-end: 1px solid var(--rs-bevel-dark); }
  .bx-palette__list { display: flex; flex-wrap: wrap; gap: 2px; }
  .bx-pal { inline-size: auto; }
  /* let the toolbar groups wrap too, and stop the name input + projects select
     from forcing a wider-than-phone row (a 375px viewport overflowed ~27px) */
  .bx-group { flex-wrap: wrap; }
  .bx-toolbar input, .bx-toolbar select { max-inline-size: 42vw; min-inline-size: 0; }
  .bx-inspector { max-block-size: 50vh; border-inline-start: 0; border-block-start: 1px solid var(--rs-bevel-dark); }
  #bx-canvas { block-size: 60vh; }
}