/* Board palettes carry into the instruments and every Inky dialog. */
html.inky-editor[data-canvas="chalkboard"] { --paper:#101e17; --surface:#15261c; --raised:#20382a; --ink:#eef5eb; --ink-2:#bdcfbf; --ink-3:#9eafa0; --rule:#3a5140; --rule-2:#293d30; --accent:#b2d6b6; --accent-wash:#294531; --on-accent:#122319; }
html.inky-editor[data-canvas="blueprint"] { --paper:#101d33; --surface:#14243d; --raised:#213653; --ink:#f0f7ff; --ink-2:#bccfe5; --ink-3:#a3b7cf; --rule:#3a5272; --rule-2:#293d59; --accent:#90caf8; --accent-wash:#294c6c; --on-accent:#102538; }
html.inky-editor[data-canvas="midnight"] { --paper:#101222; --surface:#181c30; --raised:#272d47; --ink:#f2f4ff; --ink-2:#c0c6df; --ink-3:#a1abc8; --rule:#404866; --rule-2:#2d344f; --accent:#adbbeb; --accent-wash:#303c63; --on-accent:#17203b; }
html.inky-editor[data-canvas="cream"] { --paper:#eee7d9; --surface:#faf4e8; --raised:#eee4d2; --ink:#31271c; --ink-2:#655440; --ink-3:#76634b; --rule:#d0bea2; --rule-2:#dfd2bd; --accent:#7c572f; --accent-wash:#ebdfc9; --on-accent:#ffffff; }
html.inky-editor[data-canvas="whiteboard"] { --paper:#edf1f7; --surface:#ffffff; --raised:#e9eff7; --ink:#142338; --ink-2:#4b5d76; --ink-3:#62738a; --rule:#cad5e3; --rule-2:#dfe6ef; --accent:#41609f; --accent-wash:#e4ebf9; --on-accent:#ffffff; }
html.inky-editor[data-canvas="contrast"] { --paper:#000000; --surface:#000000; --raised:#141414; --ink:#ffffff; --ink-2:#e0e0e0; --ink-3:#c0c0c0; --rule:#888888; --rule-2:#555555; --accent:#ffffff; --accent-wash:#292929; --on-accent:#000000; }
.inky-dialog { position:fixed; inset:0; z-index:14000; display:grid; place-items:center; padding:16px; box-sizing:border-box; background:#0009; color:var(--ink); }
.inky-dialog-panel { width:min(440px,100%); max-height:calc(100dvh - 32px); box-sizing:border-box; overflow:auto; padding:24px; border:1px solid var(--rule); border-radius:20px; background:var(--surface); box-shadow:0 24px 80px #0005; animation:inky-dialog-arrive 160ms ease-out; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; }
.inky-dialog-panel header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.inky-dialog-kicker { margin:0 0 8px; font:10px var(--mono); letter-spacing:.12em; color:var(--accent); }
.inky-dialog-panel h2 { margin:0; font-size:1.4rem; font-weight:600; letter-spacing:-.03em; }
.inky-dialog-panel p:not(.inky-dialog-kicker) { font-size:.85rem; line-height:1.6; color:var(--ink-2); overflow-wrap:anywhere; }
.inky-dialog-panel button { min-height:44px; padding:10px 14px; font:inherit; font-size:.8rem; border:1px solid var(--rule); border-radius:10px; color:var(--ink); background:var(--raised); cursor:pointer; }
.inky-dialog-panel .inky-dialog-close { width:44px; padding:10px; flex:none; font-size:24px; }
.inky-dialog-close svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none; }
.inky-dialog-field { display:grid; gap:8px; margin-top:20px; font-size:.8rem; }
.inky-dialog-field input { width:100%; box-sizing:border-box; min-height:46px; border:1px solid var(--rule); border-radius:10px; padding:10px 12px; font:inherit; color:var(--ink); background:var(--raised); }
.inky-dialog-panel .inky-dialog-error { color:var(--error); }
.inky-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:22px; }
.inky-dialog-panel .inky-dialog-submit { color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:600; }
.inky-dialog[data-danger="true"] .inky-dialog-submit { color:#ffffff; background:#ac302d; border-color:#ac302d; }
/* Leave the real toolbar visible while its arrangement is previewed. */
#toolbarLayoutDialog { background:#0004; }
.toolbar-layout-panel { width:min(490px,100%); max-height:calc(100dvh - 180px); display:flex; flex-direction:column; overflow:auto; }
.toolbar-layout-panel > header, .toolbar-layout-panel > p { flex:none; }
.toolbar-edge-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; flex:none; }
.toolbar-edge-picker button { padding:8px 4px; }
.toolbar-edge-picker [aria-pressed="true"] { background:var(--accent-wash); border-color:var(--accent); color:var(--accent); }
.toolbar-order-list { flex:1 1 auto; min-height:70px; overflow:auto; margin:16px 0 0; padding:0 4px 0 0; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; }
.toolbar-order-list li { display:flex; align-items:center; gap:8px; padding:6px 8px; margin:4px 0; border:1px solid var(--rule); border-radius:10px; background:var(--raised); }
.toolbar-order-grip { color:var(--ink-3); cursor:grab; font-size:20px; }
.toolbar-order-label { flex:1; min-width:0; font-size:.8rem; overflow-wrap:anywhere; }
.toolbar-order-list button { min-width:40px; min-height:40px; padding:6px; }
.toolbar-order-list button:disabled { opacity:.3; cursor:default; }
.toolbar-order-list .is-dragging { opacity:.4; }
.toolbar-layout-panel .toolbar-order-status { margin:8px 0 0; min-height:1.5em; font-size:.7rem; flex:none; }
.toolbar-layout-panel .inky-dialog-actions { margin-top:8px; flex:none; }
.toolbar-position-control { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.toolbar-position-control > span { grid-column:1 / -1; margin-bottom:4px; }
.toolbar-position-control button { padding:8px 3px; }
#customizeToolbarBtn { width:100%; margin-top:10px; }
.inky-editor .toolbar.toolbar-personalized { display:flex; transition:background-color 140ms, border-color 140ms; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; justify-content:flex-start; justify-content:safe center; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; }
.inky-editor .toolbar.toolbar-personalized > .tool { flex:0 0 44px; width:44px; height:44px; min-height:44px; min-width:44px; }
.inky-editor .toolbar.toolbar-personalized #zoomLevel { flex:0 0 52px; width:52px; box-sizing:border-box; }
.inky-editor .toolbar.toolbar-personalized .bar-mode { flex:none; }
body.toolbar-location-left .toolbar.toolbar-personalized, body.toolbar-location-right .toolbar.toolbar-personalized { top:68px; bottom:34px; width:62px; height:auto; max-height:none; padding:8px; box-sizing:border-box; flex-direction:column; flex-wrap:nowrap; overflow-x:hidden; overflow-y:auto; transform:none; gap:6px; border-radius:16px; }
body.toolbar-location-left .toolbar.toolbar-personalized { left:12px; right:auto; }
body.toolbar-location-right .toolbar.toolbar-personalized { right:12px; left:auto; }
body.toolbar-location-left .toolbar #zoomLevel, body.toolbar-location-right .toolbar #zoomLevel { flex:0 0 36px; min-height:36px; width:44px; font-size:11px; }
body:is(.toolbar-location-left,.toolbar-location-right) .toolbar .bar-mode { flex-direction:column; }
body:is(.toolbar-location-left,.toolbar-location-right) :is(.geometry-inspector,.line-inspector,.manipulative-inspector) { top:var(--inspector-top,68px); bottom:var(--inspector-bottom,34px); right:var(--inspector-right,12px); max-height:calc(100dvh - var(--inspector-top,68px) - var(--inspector-bottom,34px)); }
@keyframes inky-dialog-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media(max-width:600px) {
  .inky-dialog { padding:10px; }
  .inky-dialog-panel { max-height:calc(100dvh - 20px); padding:18px; border-radius:16px; }
  .toolbar-layout-panel { max-height:calc(100dvh - 180px); }
  body.toolbar-location-left .toolbar.toolbar-personalized { left:8px; }
  body.toolbar-location-right .toolbar.toolbar-personalized { right:8px; }
  .inky-editor .toolbar.toolbar-personalized { max-height:76px; }
  .notebook-page-nav { max-width:calc(100vw - 24px); }
}
/* In landscape, keep the order list beside the edge picker and actions. */
@media (min-width:600px) and (max-height:540px) {
  .toolbar-layout-panel { width:min(700px,100%); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:44px 44px minmax(18px,1fr) 44px; height:calc(100dvh - 180px); gap:8px 16px; padding:16px; }
  .toolbar-layout-panel > header { grid-column:1; grid-row:1; }
  .toolbar-layout-panel h2 { font-size:1.2rem; }
  .toolbar-layout-panel .inky-dialog-kicker, .toolbar-layout-panel > header + p { display:none; }
  .toolbar-edge-picker { grid-column:1; grid-row:2; }
  .toolbar-order-list { grid-column:2; grid-row:1 / 5; margin:0; min-height:0; height:100%; box-sizing:border-box; }
  .toolbar-layout-panel .toolbar-order-status { grid-column:1; grid-row:3; margin:0; min-height:0; overflow:hidden; line-height:1.2; }
  .toolbar-layout-panel .inky-dialog-actions { grid-column:1; grid-row:4; margin:0; }
}
/* Short windows need the usable viewport instead of a fixed 180px reserve. */
@media (max-width:600px) and (max-height:520px) {
  .toolbar-layout-panel { max-height:calc(100dvh - 24px); }
}
@media (min-width:600px) and (max-height:380px) {
  .toolbar-layout-panel { height:calc(100dvh - 32px); max-height:calc(100dvh - 32px); }
}
@media(prefers-reduced-motion:reduce) { .inky-dialog-panel { animation:none; } }

/* Floating utilities use the same reserved edge as the board. */
body.toolbar-location-right .pomo-pill { right:86px; }
body.toolbar-location-right :is(.notebook-page-nav,.ppt-slide-nav) { right:86px; max-width:calc(100vw - 98px); }
body.toolbar-location-left :is(.notebook-page-nav,.ppt-slide-nav) { max-width:calc(100vw - 98px); }
body:is(.toolbar-location-left,.toolbar-location-right) :is(.geometry-inspector,.line-inspector,.manipulative-inspector) { max-width:calc(100vw - var(--inspector-right,12px) - 24px); }
body:is(.toolbar-location-left,.toolbar-location-right) .tool-options:not(.is-docked) :is(.compass-modes,.compass-actions,.angle-actions) { flex-wrap:wrap; }
body:is(.toolbar-location-left,.toolbar-location-right) .notebook-page-nav { gap:4px; padding:6px; }
body:is(.toolbar-location-left,.toolbar-location-right) .notebook-page-nav .ppt-slide-btn { width:32px; min-width:32px; }

body .color-studio { z-index:13000; }

.tool-options:not(.is-docked) { container-type:inline-size; }
@container (max-width:260px) {
  #shapeOptions .shape-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #shapeOptions .shape-btn-label { overflow-wrap:normal; word-break:normal; hyphens:auto; }
  #shapeOptions .shape-group-heading { overflow-wrap:normal; font-size:.75rem; letter-spacing:.02em; }
}

.file-notebook-rename-icon { display:inline-flex; flex:none; width:18px; height:18px; color:var(--ink-2); }
.file-notebook-rename-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }

.workspace-quick-actions { border-bottom:1px solid var(--rule); padding:0 0 8px; margin:0 0 8px; }
#sideMenu .workspace-quick-actions #customizeToolbarBtn { margin:0; }

#sideMenu .workspace-quick-actions .menu-command-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }