/* dt-canvas-zoom.css — companion of dt-canvas-zoom.js (2026-09-22). Tool-agnostic:
   a small - % + Fit strip at the canvas's bottom-right (top-right when that would
   cover the tool's edit field) and the hand cursors for panning. */
.dt-cz {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 13;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
    user-select: none;
    -webkit-user-select: none;
}
.dt-cz[hidden] { display: none !important; }
.dt-cz.is-top { top: 16px; bottom: auto; }
.dt-cz-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #374151;
    cursor: pointer;
}
.dt-cz-btn:hover:not(:disabled) { background: #f3f4f6; color: #111827; }
.dt-cz-btn:disabled { opacity: .35; cursor: default; }
.dt-cz-fit { margin-left: 2px; }
.dt-cz-pct {
    min-width: 44px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #374151;
}
body.dark-mode .dt-cz { background: rgba(31, 31, 34, .96); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
body.dark-mode .dt-cz-btn { color: #d4d4d8; }
body.dark-mode .dt-cz-btn:hover:not(:disabled) { background: #2a2a2e; color: #f5f5f6; }
body.dark-mode .dt-cz-pct { color: #d4d4d8; }

/* zoomed in: the picture can be dragged; Space = hand everywhere */
.dt-cz-on img:not([class]) { cursor: grab; }
.dt-cz-hand,
.dt-cz-hand * { cursor: grab !important; }
.dt-cz-panning,
.dt-cz-panning * { cursor: grabbing !important; }

/* 2026-09-22: no capsule, no button feel - quiet icons and the number, a soft
   halo so they read over the picture when it is zoomed under them */
.dt-cz,
body.dark-mode .dt-cz {
    padding: 0;
    gap: 0;
    background: transparent;
    box-shadow: none;
}
.dt-cz-btn,
body.dark-mode .dt-cz-btn {
    width: 26px;
    height: 26px;
    color: #6b7280;
    background: transparent !important;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9));
}
.dt-cz-btn:hover:not(:disabled) { color: #111827; }
.dt-cz-pct {
    min-width: 40px;
    color: #6b7280;
    font-weight: 500;
    text-shadow: 0 0 3px rgba(255, 255, 255, .9);
}
body.dark-mode .dt-cz-btn { color: #8b8b94; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
body.dark-mode .dt-cz-btn:hover:not(:disabled) { color: #f5f5f6; }
body.dark-mode .dt-cz-pct { color: #8b8b94; text-shadow: 0 0 3px rgba(0, 0, 0, .8); }