/* plates_panel.css — the shaar builder's own screen.
   Kept beside its script rather than folded into studio.css: this is one
   room, it is opened from one control, and a stylesheet nobody has to read to
   understand the rest of the studio is worth its own file. */
.pb-openbtn { margin-inline-start: 8px; font-size: 12px; padding: 2px 10px;
  border-radius: 999px; border: 1px solid var(--line, #cfc7b8);
  background: transparent; color: inherit; cursor: pointer; }
.pb-openbtn:hover { background: rgba(0, 0, 0, .06); }

.pb-back { position: fixed; inset: 0; background: rgba(18, 20, 28, .55);
  z-index: 90; display: flex; align-items: center; justify-content: center; }
.pb-box { width: min(1180px, 95vw); height: min(860px, 92vh);
  background: var(--panel, #fbf9f4); color: var(--ink, #1a1a1a);
  border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .40);
  display: flex; flex-direction: column; overflow: hidden; }

.pb-head { display: flex; align-items: baseline; gap: 14px;
  padding: 14px 20px 10px; border-bottom: 1px solid var(--line, #e2dccd); }
.pb-ttl b { font-size: 17px; }
.pb-sub { margin-inline-start: 10px; opacity: .72; font-size: 13px; }
.pb-count { margin-inline-start: auto; font-size: 12px; opacity: .65; }

.pb-body { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 0; overflow: hidden; }
.pb-axes { overflow: auto; padding: 12px 18px 20px;
  border-inline-end: 1px solid var(--line, #e2dccd); }
.pb-row { margin-bottom: 14px; }
.pb-rowhd { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.pb-rowhd b { font-size: 13px; letter-spacing: .02em; }
.pb-lock { border: 0; background: transparent; cursor: pointer; font-size: 13px;
  opacity: .45; }
.pb-lock.on { opacity: 1; }
.pb-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-opt { border: 1px solid transparent; border-radius: 8px; padding: 3px;
  background: #fff; cursor: pointer; width: 78px; text-align: center; }
.pb-opt.on { border-color: var(--accent, #8a6d3b); box-shadow: 0 0 0 2px rgba(138, 109, 59, .18); }
.pb-opt img { width: 100%; display: block; border-radius: 4px; }
.pb-opt .pb-ph { width: 100%; padding-top: 150%; background: #f1efe9;
  border-radius: 4px; }
.pb-opt span { display: block; font-size: 10.5px; line-height: 1.25;
  margin-top: 3px; opacity: .8; }

.pb-set { overflow: auto; padding: 12px 18px 20px; }
.pb-sethd { display: flex; align-items: baseline; gap: 8px; }
.pb-sethd b { font-size: 13px; }
.pb-sethd span { font-size: 12px; opacity: .66; }
.pb-fam { font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  opacity: .7; margin: 4px 0 8px; direction: ltr; }
.pb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pb-kind { text-align: center; }
.pb-kind img { width: 100%; display: block; border: 1px solid var(--line, #e2dccd);
  border-radius: 4px; background: #fff; }
.pb-kind span { display: block; font-size: 10.5px; margin-top: 3px; opacity: .78; }
.pb-wait { grid-column: 1 / -1; padding: 30px 0; text-align: center;
  font-size: 13px; opacity: .6; }
.pb-nearhd { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; }
.pb-nearhd b { font-size: 13px; }
.pb-nearhd span { font-size: 12px; opacity: .66; }
.pb-near { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pb-nearb { font-size: 11px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line, #cfc7b8); background: transparent;
  color: inherit; cursor: pointer; direction: ltr; }
.pb-nearb:hover { background: rgba(0, 0, 0, .06); }
.pb-err { margin-top: 10px; font-size: 12px; color: #a33; }

.pb-foot { display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-top: 1px solid var(--line, #e2dccd); }
.pb-spacer { flex: 1; }
.pb-btn { font-size: 13px; padding: 5px 14px; border-radius: 8px;
  border: 1px solid var(--line, #cfc7b8); background: transparent;
  color: inherit; cursor: pointer; }
.pb-btn:hover { background: rgba(0, 0, 0, .06); }
.pb-ok { border-color: var(--accent, #8a6d3b); }
.pb-go { background: var(--accent, #8a6d3b); color: #fff; border-color: transparent; }
.pb-shuffle { border-style: dashed; }

/* ── slot by slot ──────────────────────────────────────────────────────────
   The second way into one design. The page as the engine drew it with every
   slot's own box laid over it, and the same slots listed beside it in the
   order they are PAINTED — so what a person clicks on the picture and what he
   clicks in the list are the same thing, and both are the thing the .sfr
   records. */
.pb-modes { display: flex; gap: 4px; margin-inline-start: 14px; }
.pb-mode { font-size: 12px; padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--line, #cfc7b8); background: transparent;
  color: inherit; cursor: pointer; opacity: .66; }
.pb-mode.on { opacity: 1; border-color: var(--accent, #8a6d3b);
  background: rgba(138, 109, 59, .10); }

.pb-slots { overflow: auto; padding: 12px 18px 20px;
  border-inline-end: 1px solid var(--line, #e2dccd); }
.pb-stage { position: relative; width: min(300px, 100%); margin: 8px auto 4px; }
.pb-stage img { width: 100%; display: block; background: #fff;
  border: 1px solid var(--line, #e2dccd); border-radius: 4px; }
.pb-slotbox { position: absolute; padding: 0; cursor: pointer;
  background: transparent; border: 1px dashed rgba(138, 109, 59, .40); }
.pb-slotbox:hover { background: rgba(138, 109, 59, .10); }
.pb-slotbox.on { border: 1.5px solid var(--accent, #8a6d3b);
  background: rgba(138, 109, 59, .14); }
.pb-slotbox.held { border-style: solid; border-color: rgba(60, 110, 80, .65); }
.pb-slotbox.off { border-color: rgba(0, 0, 0, .12); }

.pb-edited { font-size: 11.5px; opacity: .72; text-align: center;
  margin: 2px 0 6px; }
.pb-slotlist { margin-top: 8px; }
.pb-slot { display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--line, #eee6d8); }
.pb-slot.off { opacity: .55; }
.pb-slot.on { background: rgba(138, 109, 59, .08); }
.pb-slotname { flex: 1; text-align: start; border: 0; background: transparent;
  color: inherit; cursor: pointer; padding: 6px 4px; }
.pb-slotname b { font-size: 12.5px; display: block; }
.pb-slotname span { font-size: 10.5px; opacity: .62; direction: ltr;
  display: block; }
.pb-vary { padding: 6px 4px 12px; }
.pb-slotnote { font-size: 11.5px; opacity: .7; margin-bottom: 6px; }
.pb-treat { display: flex; align-items: center; gap: 6px; font-size: 12px;
  margin-bottom: 8px; }
.pb-treat i { font-size: 11px; opacity: .6; font-style: normal; }
.pb-gen { margin-top: 8px; font-size: 11.5px; }
.pb-gen:disabled { opacity: .5; cursor: not-allowed; }