/* Wireframe styles: pages and components (left), the page on a grey desk (centre), properties and history (right). */
#main { display: flex; flex-direction: row; flex: 1; min-width: 0; min-height: 0; background: var(--panel); }

/* left column: the pages (shared/thumbs.js); right column: properties and history; Components open in a dialog */
#wf-left { min-height: 0; }
.wf-pane { display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--line); }
.wf-pane.grow { flex: 1; border-bottom: 0; }

/* centre: the page on the desk */
#wf-center { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#wf-stage { position: relative; flex: 1; min-height: 160px; overflow: hidden; background: var(--desk); outline: none; user-select: none; -webkit-user-select: none; touch-action: none; }
#wf-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--prog); }
#wf-stage.panning, #wf-stage.panning * { cursor: grabbing !important; }
.wf-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wf-svg text { user-select: none; }
.wf-ico { font-family: 'Material Symbols Outlined'; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; }
.wf-edit { position: absolute; z-index: 5; min-height: 34px; padding: 6px 8px; border: 2px solid var(--sel); border-radius: 4px; background: rgba(255, 255, 255, 0.97); color: #202124; line-height: 1.35; resize: both; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); outline: none; }

/* right column: properties and history */
#wf-side { min-height: 0; }
#wf-props-pane { flex: 1; }
#wf-props { flex: 1; min-height: 0; overflow: auto; padding: 0 0 12px; }
.pf-iconpick { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text); min-width: 0; text-align: left; }
.pf-iconpick:hover { border-color: var(--prog); }
.pf-iconpick .material-symbols-outlined { font-size: 18px; }
.pf-iconpick span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* icon picker */
.icon-pick { width: 340px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.icon-pick .inp { width: 100%; }
.icon-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; max-height: 260px; overflow-y: auto; }
.icon-cell { aspect-ratio: 1; border: 0; border-radius: 6px; background: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); padding: 0; }
.icon-cell:hover { background: var(--line-soft); }
.icon-cell.on { background: var(--prog-soft); color: var(--prog-strong); }
.icon-cell.none { grid-column: span 2; aspect-ratio: auto; font: inherit; font-size: 12px; color: var(--muted); }
.icon-cell .material-symbols-outlined { font-size: 20px; }

/* presenting the prototype */
.wf-present { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: #1d1e22; color: #eee; outline: none; }
.wfp-bar { flex: none; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; background: #26272c; border-bottom: 1px solid #111; }
.wfp-title { flex: 1; min-width: 0; text-align: center; font-size: 13px; color: #d6d6dc; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.wfp-btn { width: 34px; height: 32px; border: 0; border-radius: 6px; background: none; color: #e6e6ea; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.wfp-btn:hover { background: #3a3b42; }
.wfp-btn:focus-visible { outline: 2px solid #7aa7ff; }
.wfp-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.wfp-svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; background: #fff; border-radius: 4px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); }
.wfp-hot { fill: transparent; cursor: pointer; }
.wfp-hot:hover { fill: rgba(43, 111, 214, 0.12); }
.wfp-svg.flash .wfp-hot { fill: rgba(43, 111, 214, 0.18); stroke: #2b6fd6; stroke-width: 2; transition: fill 0.2s; }
.wfp-hint { flex: none; padding: 6px 12px 10px; text-align: center; font-size: 12px; color: var(--faint); }

/* dropping files */
body.dragging #wf-stage { box-shadow: inset 0 0 0 3px var(--prog); }

/* dialogs */
.kbd-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.kbd-table td { padding: 5px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
kbd { font: 12px var(--mono); background: var(--hover); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
ul.feat { padding-left: 18px; margin: 4px 0; line-height: 1.55; font-size: 13px; }
.small { font-size: 12px; }
.load-error { max-width: 520px; padding: 16px; color: #b3261e; line-height: 1.5; }

@media (max-width: 760px) {
  #main { flex-direction: column; }
  #wf-left { width: auto; height: 132px; border-right: 0; border-bottom: 1px solid var(--line); order: 2; }
  #wf-pages.th-strip { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 8px; }
  #wf-center { order: 1; min-height: 0; }
}
@media (max-width: 520px) {
  }