/* Toolbars.
   Every tool is an icon with its name. Names fold away together when a bar
   runs out of room, never one tool at a time, and the icon keeps its tooltip.
   Top right: the simulation as a whole (Find, Overview, Share, Settings).
   Bottom left: tools that edit the draft (Manual only). Bottom right: how the
   canvas is viewed (every mode). */
.ss-v2 { --ss-tool-size: 36px; }
@media (pointer: coarse) { .ss-v2 { --ss-tool-size: 44px; } }
.ss-top-dock .ss-icon, .ss-bottom-dock .ss-icon { width: 20px; height: 20px; stroke-width: 1.8; flex-shrink: 0; }
.ss-tool { gap: 7px; white-space: nowrap; }
.ss-top-dock .ss-tool, .ss-bottom-dock .ss-tool { min-height: var(--ss-tool-size); height: var(--ss-tool-size); padding: 8px 10px; font-size: 12px; }
.ss-tool-group { display: flex; align-items: center; gap: 2px; }
.ss-simulation-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }

/* Bottom dock: editing tools, then undo and redo, then whatever is selected; view controls at the far end. */
.ss-bottom-dock :is(.ss-canvas-tools, .ss-edit-history) { padding-right: 8px; border-right: 1px solid var(--ss-border); }
.ss-bottom-dock .ss-canvas-controls { margin-left: auto; gap: 2px; }
.ss-bottom-dock .ss-canvas-help { position: relative; inset: auto; order: 0; }
.ss-bottom-dock .ss-help-panel { left: auto; right: 0; }
/* The shortcuts open over the minimap, not under it. */
.ss-bottom-dock:has(.ss-canvas-help[open]) { z-index: 13; }
.ss-help-panel .ss-help-groups { grid-template-columns: 1fr; gap: 16px; }
.ss-help-panel .ss-help-groups h3 { margin: 0 0 8px; }
.ss-help-panel h2 { margin-bottom: 12px; }
.ss-zoom-controls { display: flex; align-items: center; margin: 0 4px; border: 1px solid var(--ss-border); border-radius: 6px; }
.ss-bottom-dock .ss-zoom-controls .ss-icon-button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 6px; }
button.ss-zoom { min-width: 50px; height: 32px; padding: 0 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ss-text); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
button.ss-zoom:hover { background: var(--ss-raised); }
button.ss-zoom:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 1px; }
.ss-paint-tools > .ss-tool[aria-pressed=true] { background: var(--ss-accent); color: var(--ss-bg); }
/* What is selected floats just above the dock. Selecting something never
   resizes the bars or moves the canvas. On phones it shares the dock's rows. */
@media (min-width: 701px) {
  .ss-bottom-dock { position: relative; }
  .ss-selection-bar { position: absolute; left: 12px; bottom: calc(100% + 10px); z-index: 4; display: flex; flex-wrap: wrap-reverse; align-items: flex-end; gap: 8px; max-width: calc(100% - 24px); pointer-events: none; }
  .ss-selection-bar > * { pointer-events: auto; }
  .ss-bottom-dock .ss-selection-bar .ss-selection-tools, .ss-selection-bar .ss-context-dock { padding: 5px 8px; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-sidebar); box-shadow: 0 4px 18px #0006; }
  .ss-bottom-dock .ss-selection-bar .ss-selection-tools { gap: 4px; }
  .ss-selection-bar .ss-context-dock { flex: 0 1 380px; }
}
@media (max-width: 700px) {
  .ss-selection-bar { display: contents; }
  .ss-bottom-dock .ss-selection-slot { order: 1; }
  .ss-bottom-dock .ss-edit-history { order: 2; }
  .ss-bottom-dock .ss-canvas-controls { order: 3; }
  .ss-bottom-dock .ss-context-dock { order: 4; }
}

/* Not enough room for names: the whole bar becomes icons. */
@media (max-width: 1279px) {
  .ss-bottom-dock .ss-tool { width: var(--ss-tool-size); min-width: var(--ss-tool-size); padding: 8px; }
  .ss-bottom-dock .ss-tool > span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .ss-bottom-dock .ss-history-button { width: auto; padding: 8px 6px; }
}
@media (max-width: 700px) {
  .ss-top-dock .ss-simulation-tools .ss-tool { width: var(--ss-tool-size); min-width: var(--ss-tool-size); padding: 8px; }
  .ss-top-dock .ss-simulation-tools .ss-tool > span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  /* Two rows on a phone: editing tools with the selection, then undo with the view. Mouse and keyboard shortcuts are left out. */
  .ss-bottom-dock .ss-canvas-help { display: none; }
  .ss-bottom-dock :is(.ss-canvas-tools, .ss-edit-history) { padding-right: 4px; }
  .ss-bottom-dock .ss-edit-history { border-right: 0; padding-right: 0; }
  .ss-bottom-dock .ss-history-button { width: auto; min-width: 38px; padding: 8px 4px; }
  .ss-bottom-dock .ss-canvas-controls { gap: 0; }
  .ss-zoom-controls { margin: 0; border: 0; }
  button.ss-zoom { min-width: 44px; padding: 0; }
}
@media (pointer: coarse) {
  .ss-bottom-dock .ss-zoom-controls .ss-icon-button, button.ss-zoom { height: 44px; min-height: 44px; }
  .ss-bottom-dock .ss-zoom-controls .ss-icon-button { width: 44px; min-width: 44px; }
}