/* dt-markup.css — companion of dt-markup.js (2026-09-22). Tool-agnostic: the SVG
   layer over the picture and the tool strip (select, pen, text, shapes, colour,
   eraser | undo, redo | close) with its shape / colour pop-ups. */
.dt-mk-layer {
    position: absolute;
    z-index: 12;                    /* the same level as the asset layer, after it: on top */
    pointer-events: none;
}
.dt-mk-layer[hidden] { display: none !important; }
/* per-tool cursors (2026-09-27): dark glyphs with a white edge so they read on any
   picture. Shapes: ring + centre dot; pen: pencil, hotspot at the tip; text: I-beam;
   eraser: tilted eraser, hotspot at its dark end. */
.dt-mk-layer.is-draw { pointer-events: auto; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='white' stroke-width='3.5'/%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%23111827' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23111827' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E") 12 12, crosshair; touch-action: none; }
.dt-mk-layer.is-draw[data-tool="pen"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 21l1.3-5.2L15.6 4.5a2.1 2.1 0 0 1 3 0l.9.9a2.1 2.1 0 0 1 0 3L8.2 19.7z' fill='%23111827' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M13.8 6.3l3.9 3.9' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E") 3 21, crosshair; }
.dt-mk-layer.is-draw[data-tool="text"] { cursor: text; }
.dt-mk-layer.is-eraser { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Crect x='4' y='8' width='16' height='8' rx='1.6' fill='none' stroke='white' stroke-width='3.5'/%3E%3Crect x='4' y='8' width='16' height='8' rx='1.6' fill='white' stroke='%23111827' stroke-width='1.5'/%3E%3Crect x='4.75' y='8.75' width='5.5' height='6.5' rx='1' fill='%23111827'/%3E%3C/g%3E%3C/svg%3E") 6 18, cell; }
.dt-mk-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.dt-mk-layer.is-draw .dt-mk-svg,
.dt-mk-layer.is-select .dt-mk-svg [data-i] { pointer-events: auto; }
.dt-mk-layer.is-select .dt-mk-svg [data-i] { cursor: move; }
.dt-mk-hit { pointer-events: stroke; }
.dt-mk-svg text { user-select: none; -webkit-user-select: none; }
/* text notes: grabbed (move) with any tool but the eraser, double click edits */
.dt-mk-layer.is-draw .dt-mk-svg text,
.dt-mk-layer.is-select .dt-mk-svg text { pointer-events: all; cursor: move; }
.dt-mk-layer.is-eraser .dt-mk-svg text { cursor: inherit; }
.dt-mk-selbox {
    stroke: #2563eb;
    stroke-width: 2;
    stroke-dasharray: 6 5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}
.dt-mk-input {
    position: absolute;
    min-width: 120px;
    padding: 2px 6px;
    border: 1.5px dashed #2563eb;
    border-radius: 6px;
    background: rgba(255, 255, 255, .85);
    font-weight: 600;
    line-height: 1.2;
    outline: none;
    pointer-events: auto;
    transform: translateY(-2px);
}

/* the strip */
.dt-mk-bar {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .16);
    user-select: none;
    -webkit-user-select: none;
}
.dt-mk-bar[hidden] { display: none !important; }
.dt-mk-key {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #374151;
    cursor: pointer;
}
.dt-mk-key:hover:not(:disabled) { background: #f3f4f6; color: #111827; }
.dt-mk-key.is-on { background: #e9ebef; color: #111827; }
.dt-mk-key:disabled { opacity: .35; cursor: default; }
.dt-mk-color span {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .15);
}
.dt-mk-sep { width: 1px; height: 20px; margin: 0 4px; background: #e5e7eb; }
.dt-mk-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    display: flex;
    gap: 4px;
    padding: 5px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .16);
}
.dt-mk-pop[hidden] { display: none !important; }
.dt-mk-shapes { left: 50px; }
.dt-mk-colors { left: 30px; }
.dt-mk-swatch {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .15);
}
.dt-mk-swatch.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb; }

body.dark-mode .dt-mk-bar,
body.dark-mode .dt-mk-pop { background: rgba(31, 31, 34, .98); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
body.dark-mode .dt-mk-key { color: #d4d4d8; }
body.dark-mode .dt-mk-key:hover:not(:disabled) { background: #2a2a2e; color: #f5f5f6; }
body.dark-mode .dt-mk-key.is-on { background: #3a3a40; color: #ffffff; }
body.dark-mode .dt-mk-sep { background: #3a3a3f; }
body.dark-mode .dt-mk-swatch.is-on { box-shadow: 0 0 0 2px #1f1f22, 0 0 0 4px #3b82f6; }
body.dark-mode .dt-mk-input { background: rgba(31, 31, 34, .85); }