/* Outlines on demand: the tapped hold's outline on the wall view (drawn by hold-tap.js) and in the
   boulder designer (HoldShine.razor). The layer is a sibling of .hold-overlay with the same 0-100
   viewBox, so it follows zoom and pan like the photo; it never takes a pointer event. */
.hold-tap-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

/* Every stroke is in screen pixels (non-scaling), so an outline keeps its weight at any zoom and on
   the stretched viewBox. --hold-c is the hold's colour; the accent stands in for a hold without one. */
.hold-shine > g > * {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: none;
    pointer-events: none;
}
/* The soft glow outside, a dark casing so the colour reads on a light panel, the colour itself, and a
   thin light line along it: the "slightly shiny" look. */
.hold-shine-glow > * { stroke: var(--hold-c, var(--accent)); stroke-width: 11px; stroke-opacity: 0.38; filter: blur(2px); }
.hold-shine-case > * { stroke: rgba(0, 0, 0, 0.6); stroke-width: 5.5px; }
.hold-shine-main > * { stroke: var(--hold-c, var(--accent)); stroke-width: 3.5px; }
.hold-shine-light > * { stroke: rgba(255, 255, 255, 0.75); stroke-width: 1px; animation: hold-shine-flash 0.7s ease-out 1; }

/* A hold that sits on the tapped one, or overlaps it: the same outline, darker and without the shine. The light casing
   keeps it readable on a dark panel. */
.hold-shine.dark .hold-shine-case > * { stroke: rgba(255, 255, 255, 0.45); stroke-width: 4.5px; }
.hold-shine.dark .hold-shine-main > * {
    stroke: color-mix(in srgb, var(--hold-c, var(--accent)) 42%, black);
    stroke-width: 2.5px;
}

/* The hold the tapped one sits ON: subdued, a thin dashed line in its colour, so it reads as "underneath". */
.hold-shine.base .hold-shine-case > * { stroke: rgba(0, 0, 0, 0.5); stroke-width: 4px; }
.hold-shine.base .hold-shine-main > * {
    stroke: color-mix(in srgb, var(--hold-c, var(--accent)) 65%, white);
    stroke-width: 2px;
    stroke-opacity: 0.85;
    stroke-dasharray: 7 5;
}

@keyframes hold-shine-flash {
    from { stroke-width: 5px; stroke: rgba(255, 255, 255, 1); }
    to { stroke-width: 1px; stroke: rgba(255, 255, 255, 0.75); }
}
@media (prefers-reduced-motion: reduce) {
    .hold-shine-light > * { animation: none; }
}

/* What the tapped hold is: its colour and how many boulders use it. HTML, positioned in percent of the
   photo, so it keeps its size while the photo zooms. Dark chip with white text in both themes. */
.hold-tap-label {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, calc(-100% - 10px));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 94%;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(18, 18, 22, 0.88);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.hold-tap-label.below { transform: translate(-50%, 10px); }
.hold-tap-label[hidden] { display: none; }
.hold-tap-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hold-c, var(--accent));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* "Show all holds": the wall view's switch back to the full overlay. Bottom right, clear of the heat
   buttons (top right), the "needs update" chip (top left) and the heat legend (bottom left). */
.holds-all-tool { position: absolute; z-index: 3; bottom: 10px; right: 10px; }

/* The wall page's photo / 3D switch (WallViewToggle): left of "Show all holds", or in its corner without it. */
.view3d-tool { position: absolute; z-index: 3; bottom: 10px; right: 62px; }
:not(:has(> .holds-all-tool)) > .view3d-tool { right: 10px; }

/* Boulder designer: a hold that is not part of the boulder is a tap target only. A mouse shows what it
   would pick; a finger gets the outline with the tap. */
@media (hover: hover) {
    .photo-picker .hold-overlay :is(circle, rect, polygon)[stroke="transparent"]:hover { stroke: rgba(255, 255, 255, 0.85); }
}