/* CLAUDE 10-09: the Draw bar (app-draw.js). On the desktop it takes over the left tools panel while you draw, so nothing
   covers the picture; on a phone it is a fixed bar along the bottom of the screen, in place of the tools row, with 44 px
   targets. Same quiet greys as the rest of the editor, the green only marks what is on. */
aside.library:has(> .draw-bar:not([hidden])) {
  position: relative;
}
.draw-bar {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  background: #101012;
  color: #ececf0;
  box-sizing: border-box;
}
.draw-bar[hidden] {
  display: none;
}
.db-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.db-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.db-end {
  gap: 6px;
}
.db-end .db-btn {
  flex: 1 1 0;
}
.draw-bar .db-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 52px;
  min-height: 48px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #d4d4d8;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.draw-bar .db-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.draw-bar .db-btn:hover:not(:disabled) {
  background: #26262a;
  color: #fff;
}
.draw-bar .db-btn[aria-pressed='true'] {
  background: rgba(83, 252, 24, 0.14);
  border-color: rgba(83, 252, 24, 0.55);
  color: #b8ff9a;
}
.draw-bar .db-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.draw-bar .db-done {
  background: #53fc18;
  color: #0f0f11;
  font-weight: 700;
}
.draw-bar .db-done:hover:not(:disabled) {
  background: #7dff4f;
  color: #0f0f11;
}
.draw-bar button:focus-visible,
.draw-bar .db-more:focus-within {
  outline: 2px solid #53fc18;
  outline-offset: 2px;
}
.db-colors,
.db-sizes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.db-colors[hidden] {
  display: none;
}
.db-sw {
  position: relative;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border: 2px solid #4a4a50;
  border-radius: 50%;
  background: var(--c, #fff);
  cursor: pointer;
  box-sizing: border-box;
}
.db-sw[aria-checked='true'],
.db-more.on {
  border-color: #53fc18;
  box-shadow:
    0 0 0 2px #121214,
    0 0 0 4px #53fc18;
}
.db-more {
  display: inline-block;
  overflow: hidden;
  background: conic-gradient(#f33, #fc3, #3c6, #3cf, #93f, #f3a, #f33);
}
.db-more.on {
  background: var(--c);
}
.db-more input {
  position: absolute;
  inset: -6px;
  width: 44px;
  height: 44px;
  opacity: 0;
  cursor: pointer;
}
.db-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.db-div {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: #3a3a3f;
}
.db-size {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.db-size i {
  display: block;
  width: var(--d, 10px);
  height: var(--d, 10px);
  border-radius: 50%;
  background: #d4d4d8;
}
.db-size[aria-checked='true'] {
  background: #26262a;
  border-color: #53fc18;
}
.db-size[aria-checked='true'] i {
  background: #fff;
}
.db-hint {
  margin: 0;
  min-height: 1.3em;
  font-size: 12px;
  line-height: 1.3;
  color: #a1a1aa;
}
.db-hint .db-kbd {
  color: #8d8d95;
}
canvas.draw-canvas {
  touch-action: none !important;
  cursor: crosshair;
  outline: 2px solid transparent;
  outline-offset: -2px;
}
canvas.draw-canvas:focus-visible {
  outline-color: #53fc18;
}
.cc-draw {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ov-draw {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .draw-bar:not([hidden]) {
    animation: db-in 0.16s ease-out;
  }
  @keyframes db-in {
    from {
      opacity: 0;
    }
  }
}
/* the phone editor screen: the bar sits along the bottom in place of the tools row, 44 px targets */
@media (max-width: 767.98px) {
  body.pe-on > .draw-bar {
    position: fixed;
    inset: auto 0 0 0;
    max-height: 62vh;
    z-index: 40;
    border-radius: 16px 16px 0 0;
    border-top: 1px solid #36363a;
    background: #121214;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
    padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  /* four rows: tools and Cancel / Done; undo, redo, clear and the sizes; the colours (they scroll); one line of help */
  body.pe-on .db-main,
  body.pe-on .db-look {
    display: contents;
  }
  body.pe-on .db-group {
    flex-wrap: nowrap;
    gap: 2px;
  }
  body.pe-on .db-tools {
    order: 1;
  }
  body.pe-on .db-end {
    order: 2;
    margin-left: auto;
    gap: 4px;
  }
  body.pe-on .db-strokes {
    order: 3;
  }
  body.pe-on .db-sizes {
    order: 4;
    margin-left: auto;
    flex-wrap: nowrap;
    gap: 0;
  }
  body.pe-on .db-colors {
    order: 5;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-width: none;
  }
  body.pe-on .db-colors::-webkit-scrollbar {
    display: none;
  }
  body.pe-on .db-hint:not(.db-kbd) {
    order: 6;
    flex: 1 1 100%;
    font-size: 12px;
  }
  body.pe-on .db-kbd {
    display: none;
  }
  body.pe-on .draw-bar .db-btn {
    min-width: 44px;
    min-height: 48px;
    padding: 4px 2px;
    font-size: 10px;
  }
  body.pe-on .draw-bar .db-done {
    min-width: 60px;
  }
  body.pe-on .db-sw {
    flex: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-width: 3px;
  }
  body.pe-on .db-more input {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  body.pe-on .db-size {
    width: 44px;
    height: 44px;
  }
  body.pe-on.draw-on .pe-tools {
    display: none;
  }
}
@media (pointer: coarse) {
  .db-hint .db-kbd {
    display: none;
  }
}