/* Radical walker — /tools/radical-walker (content pipeline 2026-09-20, item 10).
   Colours come from Bootstrap variables; the three stroke colours HanziWriter needs are read
   from the custom properties below, so dark mode is one override block. Every effect is chrome
   inside the tool card: nothing animates beside an ad, and nothing moves under reduced motion. */

:root {
    --rw-stroke: #1e3a8a;
    --rw-radical: #f97316;
    --rw-outline: #e5e7eb;
    --rw-accent: #0d9488;
}

[data-bs-theme="dark"] {
    --rw-stroke: #bfdbfe;
    --rw-radical: #fb923c;
    --rw-outline: #374151;
    --rw-accent: #2dd4bf;
}

.rw-hero {
    background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
}

.rw-hero-chain {
    display: inline-block;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    padding: 0.35rem 0.75rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

/* The start grid: links to the radical pages, which the script turns into first steps. */
.rw-band + .rw-band { margin-top: 0.9rem; }

.rw-band-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-bottom: 0.35rem;
}

.rw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
    gap: 0.4rem;
}

.rw-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.rw-key:hover, .rw-key:focus-visible {
    transform: translateY(-2px);
    border-color: var(--rw-accent);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.18);
    color: var(--bs-body-color);
}

.rw-key-glyph { font-size: 1.6rem; line-height: 1.15; }

.rw-key-meaning {
    font-size: 0.68rem;
    opacity: 0.7;
    text-align: center;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The trail: the chain so far, newest on the right, every earlier link a way back. */
.rw-trail {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: 0.25rem 0 0.6rem;
    margin: 0 0 0.75rem;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 1px dashed var(--bs-border-color);
}

.rw-crumb { display: flex; align-items: center; flex: 0 0 auto; }

.rw-crumb + .rw-crumb::before {
    content: "→";
    margin: 0 0.3rem;
    opacity: 0.45;
}

.rw-crumb button {
    min-width: 2.3rem;
    height: 2.3rem;
    font-size: 1.25rem;
    line-height: 1;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.rw-crumb-part button { border-radius: 0.45rem; color: var(--rw-radical); }

.rw-crumb-now button {
    border-color: var(--rw-accent);
    background: var(--rw-accent);
    color: #fff;
    animation: rw-pop 0.35s ease-out;
}

/* One step. */
.rw-head {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.rw-hero-glyph {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    flex: 0 0 auto;
    font-size: 5.5rem;
    line-height: 1;
    color: var(--rw-radical);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background:
        linear-gradient(var(--bs-border-color), var(--bs-border-color)) center / 1px 100% no-repeat,
        linear-gradient(var(--bs-border-color), var(--bs-border-color)) center / 100% 1px no-repeat,
        var(--bs-body-bg);
}

.rw-writer { color: var(--rw-stroke); }
.rw-writer-text { font-size: 6rem; }

.rw-about { flex: 1 1 14rem; min-width: 0; }

.rw-kind {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rw-accent);
}

.rw-read { font-size: 1.35rem; font-weight: 700; color: var(--bs-primary); }
.rw-meaning { font-size: 1.05rem; margin-bottom: 0.2rem; }

.rw-out {
    display: inline-block;
    margin-top: 0.35rem;
    font-weight: 600;
    text-decoration: none;
}

.rw-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.45rem;
}

.rw-actions .rw-out { margin-top: 0; }

.rw-sub {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
    margin: 1rem 0 0.45rem;
}

/* Characters on a part. */
.rw-chars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
    gap: 0.45rem;
}

.rw-char, .rw-part, .rw-word {
    animation: rw-rise 0.32s ease-out both;
    animation-delay: calc(var(--i, 0) * 22ms);
}

.rw-char {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.55rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.rw-char:hover, .rw-char:focus-visible,
.rw-part:hover, .rw-part:focus-visible {
    transform: translateY(-2px) scale(1.03);
    border-color: var(--rw-accent);
    box-shadow: 0 6px 14px rgba(13, 148, 136, 0.2);
}

.rw-char-from, .rw-part-from { border-style: dashed; opacity: 0.7; }

.rw-char-glyph { font-size: 1.9rem; line-height: 1.1; }
.rw-char-read { font-size: 0.78rem; font-weight: 600; color: var(--bs-primary); }

.rw-char-gloss, .rw-word-gloss {
    font-size: 0.68rem;
    opacity: 0.72;
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Parts inside a character. */
.rw-parts { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.rw-part {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.65rem 0.3rem 0.4rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.rw-part-glyph { font-size: 1.45rem; line-height: 1; color: var(--rw-radical); }
.rw-part-meta { font-size: 0.75rem; opacity: 0.75; }

/* Words: real links to real pages. */
.rw-words {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.45rem;
}

.rw-word {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.45rem 0.35rem;
    border-radius: 0.55rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: transform 0.12s ease, background-color 0.12s ease;
}

.rw-word:hover, .rw-word:focus-visible { transform: translateY(-2px); color: var(--bs-body-color); }
.rw-word-hanzi { font-size: 1.35rem; line-height: 1.2; }
.rw-word-here { color: var(--rw-radical); font-weight: 700; }
.rw-word-read { font-size: 0.75rem; color: var(--bs-primary); }

/* Effects. */
.rw-pop { animation: rw-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }

@keyframes rw-pop {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes rw-rise {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.rw-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rw-burst i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px;
    border-radius: 50%;
    background: var(--rw-radical);
    animation: rw-spark 0.9s ease-out forwards;
}

.rw-burst i:nth-child(even) { background: var(--rw-accent); }

@keyframes rw-spark {
    from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
    to { transform: rotate(var(--a)) translateY(-92px) scale(0.3); opacity: 0; }
}

.rw-milestone {
    position: absolute;
    left: 50%;
    top: -0.6rem;
    transform: translateX(-50%);
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--rw-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    animation: rw-pop 0.4s ease-out;
}

@media (max-width: 575.98px) {
    .rw-hero-glyph { width: 120px; height: 120px; font-size: 4.5rem; }
    .rw-hero-chain { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rw-pop, .rw-char, .rw-part, .rw-word, .rw-crumb-now button, .rw-milestone { animation: none; }
    .rw-key, .rw-char, .rw-part, .rw-word { transition: none; }
}