.board-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 12px; }
.board-hint { color: var(--muted); font-size: 14px; }
html.recommender-board-open { overflow: hidden; }
#simulador.is-board { position: fixed; inset: 0; z-index: 10000; width: 100%; height: 100dvh; max-width: none; box-sizing: border-box; margin: 0; padding: 16px; background: var(--bg); overflow: hidden; }
#simulador.is-board > .section-head { display: none; }
#simulador.is-board .sim { margin-inline: auto; }
#simulador.is-board .board-toolbar { justify-content: space-between; }
/* Keep the interactive illustration and its controls together on desktop. */
@media (min-width: 1000px) {
  #simulador .sim {
    grid-template-columns: minmax(210px, .95fr) minmax(250px, 1.2fr) minmax(240px, 1.1fr) minmax(260px, 1.3fr);
    grid-template-areas: "screen diag tl insp";
    gap: 12px;
    scroll-margin-top: 16px;
  }
  #simulador .panel-label { padding: 10px 12px; flex-wrap: wrap; gap: 4px; }
  #simulador .device { margin: 10px; }
  #simulador .screen { padding: 10px; min-height: 0; }
  #simulador .posters { gap: 6px; }
  #simulador .poster { aspect-ratio: auto; height: clamp(68px, 10vh, 100px); }
  #simulador .poster .pg { font-size: 8px; left: 5px; top: 5px; }
  #simulador .poster .pt { left: 5px; right: 5px; bottom: 5px; }
  #simulador .diagram-wrap svg { height: clamp(240px, 43vh, 440px); }
  #simulador .legend { gap: 8px; padding: 8px 12px; }
  #simulador .controls { gap: 6px; padding: 10px 12px; }
  #simulador .ctl { padding-inline: 9px; }
  #simulador .p-tl .tl li { padding: 5px 4px; gap: 5px; grid-template-columns: 20px 34px 1fr auto; }
  #simulador .intro-box, #simulador .insp { padding: 16px; }
}