/*
 * tapered/tapered.css — TAPERED-page-only additions, loaded AFTER css/style.css.
 *
 * Zero shared-file risk (§7 reuse map): the shared stylesheet is reused
 * untouched; every selector here is namespaced .tapered-* (or scoped to
 * markup that only exists on tapered.html). Brand tokens come from the shared
 * :root — no hardcoded colors beyond the tokens' own values.
 */

/* Taper-direction hint under the direct form: quieter than .input-hint's
   default placement inside a form-group. */
.tapered-taper-hint {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

/* ── Preset library card grid (§6) — hard-shadow brand style ──────────────── */

.tapered-presets {
    margin: 1.5rem 0;
}

.tapered-presets h3 {
    font-family: 'Josefin Sans', sans-serif;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.tapered-presets__group {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--secondary-color, #8b9b87);
    margin: 0.9rem 0 0.45rem;
}

.tapered-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.tapered-preset-card {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    text-align: left;
    background: #fff;
    border: 2px solid var(--text-color, #322a17);
    border-radius: 10px;
    padding: 0.7rem;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--text-color, #322a17);
    transition: transform 0.12s, box-shadow 0.12s;
    font-family: 'Inter', sans-serif;
}

.tapered-preset-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--text-color, #322a17);
}

.tapered-preset-card:active {
    transform: translate(0, 0);
    box-shadow: 2px 2px 0 var(--text-color, #322a17);
}

.tapered-preset-card__art {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-color, #f4f1ed);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tapered-preset-card__art svg,
.tapered-preset-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tapered-preset-card__name {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-color, #322a17);
    margin-top: 0.3rem;
}

.tapered-preset-card__meta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color, #c65d42);
}

.tapered-preset-card__desc {
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--dark-brown, #5d4037);
}

@media (prefers-reduced-motion: reduce) {
    .tapered-preset-card,
    .tapered-preset-card:hover,
    .tapered-preset-card:active {
        transition: none;
        transform: none !important;
    }
}