/* Handwriting lookup — /tools/handwriting (growth plan D41).
   Colours come from Bootstrap variables so dark mode needs no second set of rules; the ink
   itself is the canvas element's own `color`, read at draw time by js/handwriting-lookup.js. */

/* The drawing square. It is a square at every width because the grid it imitates is one, and
   because a signature normalised from a squashed box would not match the reference glyphs. */
.hw-pad {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    border: 2px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    overflow: hidden;
}

/* The 田字格 guides every Chinese exercise book prints: they tell the writer where the middle
   of the character is, which is exactly the information the matcher uses. Drawn in CSS rather
   than on the canvas so clearing the drawing can never wipe them. */
.hw-pad::before,
.hw-pad::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
}

.hw-pad::before {
    border-top: 1px dashed var(--bs-border-color);
    border-bottom: 1px dashed var(--bs-border-color);
    inset-block: 50% 50%;
}

.hw-pad::after {
    border-left: 1px dashed var(--bs-border-color);
    border-right: 1px dashed var(--bs-border-color);
    inset-inline: 50% 50%;
}

.hw-pad canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* Without this a swipe scrolls the page instead of drawing a stroke on a phone, which is
       the majority of the traffic this tool is for. */
    touch-action: none;
    cursor: crosshair;
    color: var(--bs-body-color);
}

/* Candidates. A wrapping row rather than a scroller: twelve glyphs that need swiping to reach
   are eleven glyphs nobody sees. */
.hw-results {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hw-candidate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 4.25rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.hw-candidate:hover,
.hw-candidate:focus-visible {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
}

.hw-candidate-active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}

.hw-candidate-glyph {
    font-size: 1.9rem;
    line-height: 1.1;
}

.hw-candidate-read {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.75;
}

.hw-detail-glyph {
    font-size: clamp(3rem, 14vw, 4.5rem);
    line-height: 1;
}

/* The stroke-order animation sits beside the glyph, so it needs a reserved box — HanziWriter
   injects its SVG after the character data arrives and the card must not jump when it does. */
.hw-writer {
    width: 120px;
    height: 120px;
}