/* GRAY · flow board — shared styles (Figma-style pan/zoom canvas) */
@font-face { font-family:'Aduma'; src:url('../satisfaction-survey/assets/fonts/AdumaHeavy.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Aduma'; src:url('../satisfaction-survey/assets/fonts/AdumaRegular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; background:#383838; }
body { font-family:-apple-system,'Heebo','Segoe UI',Roboto,Arial,sans-serif; }

/* ---------- viewport / canvas ---------- */
#viewport {
  position:fixed; inset:0;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
}
#viewport.panning { cursor:grabbing; }
#canvas {
  position:absolute; top:0; left:0;
  transform-origin:0 0;
  will-change:transform;
}

/* ---------- board content ---------- */
.board-title {
  position:absolute;
  font-family:'Aduma',Arial,sans-serif;
  font-weight:800;
  font-size:56px;
  color:#F3EBDD;
  white-space:nowrap;
  direction:rtl;
  user-select:none;
}
.col { position:absolute; display:flex; flex-direction:column; gap:56px; }
.row { display:flex; flex-direction:row; align-items:flex-start; gap:80px; } /* rtl page → first frame on the right */
.frame { display:flex; flex-direction:column; --fw:420px; }
.frame-label {
  direction:rtl; text-align:right;
  font-size:15px; color:#A8A8A8;
  margin-bottom:10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:var(--fw);
  user-select:none;
}
.frame-body {
  width:var(--fw);
  background:#111;
  box-shadow:0 4px 24px rgba(0,0,0,.35);
  overflow:hidden;
  border-radius:2px;
}
.frame-body iframe {
  width:var(--fw);
  border:0;
  display:block;
  pointer-events:none;   /* board is a viewer — drag anywhere to pan */
  background:#111;
}

/* ---------- toolbar ---------- */
#toolbar {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:2px;
  background:#1e1e1e; border:1px solid #444; border-radius:10px;
  padding:4px; z-index:10;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  direction:ltr;
}
#toolbar button {
  background:none; border:0; color:#ddd;
  font-size:16px; line-height:1;
  width:34px; height:30px; border-radius:6px; cursor:pointer;
  font-family:inherit;
}
#toolbar button:hover { background:#333; }
#zoomLevel {
  color:#aaa; font-size:12px; min-width:48px; text-align:center;
  user-select:none; cursor:pointer; border-radius:6px; padding:8px 2px;
}
#zoomLevel:hover { background:#333; }
#hint {
  position:fixed; bottom:24px; right:20px; z-index:10;
  color:#777; font-size:12px; direction:rtl; user-select:none;
}