/* canvas.css — stage, canvas, overlays, view controls, minimap, page bar, panels */

.stage {
  grid-area: stage; position: relative; overflow: hidden; background: var(--bg);
  touch-action: none; user-select: none;
}
.board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.edit-layer, .overlay-layer { position: absolute; inset: 0; pointer-events: none; }
.edit-layer > * { pointer-events: auto; }

/* inline text editor */
.text-editor {
  position: absolute; transform-origin: top left; background: transparent; color: inherit;
  border: 1px dashed var(--accent); border-radius: 4px; padding: 2px 4px; outline: none;
  min-width: 20px; min-height: 1em; white-space: pre-wrap; overflow-wrap: break-word; line-height: 1.25;
  box-shadow: 0 0 0 9999px transparent;
}
.text-editor:empty::before { content: attr(data-ph); color: var(--text-faint); }

/* sticky-note editor look handled inline via style */

/* VIEW CONTROLS */
.viewctl {
  position: absolute; right: 12px; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 2px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-1); padding: 3px;
}
.vc-btn, .vc-zoom {
  height: 34px; min-width: 34px; padding: 0 8px; border: none; background: transparent; color: var(--text);
  cursor: pointer; border-radius: 999px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.vc-btn:hover, .vc-zoom:hover { background: var(--panel-hover); }
.vc-zoom { font-size: 12.5px; font-weight: 600; min-width: 52px; }
.vc-btn .ic { width: 18px; height: 18px; }

/* MINIMAP */
.minimap {
  position: absolute; right: 12px; bottom: 58px; z-index: 20; width: 200px; height: 140px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); overflow: hidden;
}
.minimap canvas { width: 100%; height: 100%; display: block; cursor: pointer; }

/* SEARCH BAR */
.search-bar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 28;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2);
  display: flex; align-items: center; gap: 4px; padding: 5px 6px;
}
.search-bar input { border: none; background: transparent; color: var(--text); height: 32px; width: 220px; padding: 0 8px; outline: none; font-size: 14px; }
.search-count { font-size: 12px; color: var(--text-dim); min-width: 46px; text-align: center; }

/* TIMER PANEL */
.timer-panel {
  position: absolute; right: 12px; top: 12px; z-index: 24; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 12px 14px; min-width: 180px;
}
.timer-panel .t-display { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; letter-spacing: 1px; }
.timer-panel .t-row { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.timer-panel .t-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.timer-panel .t-head .seg button { height: 28px; padding: 0 10px; font-size: 12px; }

/* PRESENT CONTROLS */
.present-ctl {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 150;
  display: flex; gap: 8px; align-items: center; background: rgba(20,22,28,.82); color: #fff;
  border-radius: 999px; padding: 8px 12px; box-shadow: var(--shadow-3); backdrop-filter: blur(6px);
}
.pc-btn { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 14px; }
.pc-btn:hover { background: rgba(255,255,255,.18); }
.pc-btn.active { background: var(--accent); border-color: var(--accent); }
.pc-btn.danger { background: rgba(229,72,77,.85); border-color: transparent; }
.pc-info { font-variant-numeric: tabular-nums; padding: 0 6px; min-width: 56px; text-align: center; }

/* PAGE BAR */
.pagebar {
  grid-area: pages; display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: var(--panel); border-top: 1px solid var(--border); z-index: 30;
}
.page-list { display: flex; gap: 6px; overflow-x: auto; flex: 1; padding: 4px 0; align-items: center; }
.page-list::-webkit-scrollbar { height: 6px; }
.page-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
.page-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim); cursor: pointer; white-space: nowrap; font-size: 12.5px;
}
.page-tab.active { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.page-tab .pg-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

/* app modes */
body.present-mode .topbar,
body.present-mode .toolbar,
body.present-mode .pagebar,
body.present-mode .viewctl,
body.present-mode .tool-options { display: none !important; }
body.present-mode .app { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr 0; }

.cursor-cross { cursor: crosshair; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-move { cursor: move; }
.cursor-text { cursor: text; }
.cursor-default { cursor: default; }