/* Several study situations converge into one concept-learning destination. */
.wl-routine {
    --routine-line: color-mix(in srgb, var(--wl-purple) 24%, var(--wl-paper));
    --routine-tint: color-mix(in srgb, var(--wl-purple) 5%, var(--wl-paper));
    --routine-glow: color-mix(in srgb, var(--wl-purple) 18%, transparent);
    --routine-halo: color-mix(in srgb, var(--wl-purple) 9%, transparent);
    margin-block: 4px 32px;
    padding: 36px;
    border: 1px solid var(--wl-line);
    border-radius: 24px;
    background: var(--wl-paper);
    letter-spacing: -.035em;
    word-break: keep-all;
    overflow-wrap: break-word;
}
#usage-moments .wl-usage-heading { padding-bottom: clamp(28px, 3.5vw, 44px); }
#usage-moments .wl-routine { margin-block: 0 clamp(32px, 4vw, 52px); }
.wl-routine-map { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) 160px minmax(0, 1.2fr); align-items: center; }
.wl-routine-situations, .wl-routine-tools { margin: 0; padding: 0; list-style: none; }
.wl-routine-situations { display: grid; grid-template-rows: repeat(5, 64px); gap: 16px; }
.wl-routine-situations li { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border: 1px solid var(--routine-line); border-radius: 12px; background: linear-gradient(110deg, var(--wl-paper), var(--routine-tint)); color: var(--wl-ink); font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: -.04em; }
.wl-routine-situations svg, .wl-routine-tools svg { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: var(--wl-purple); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wl-routine-connections { height: 384px; }
.wl-routine-connections svg { display: block; width: 100%; height: 100%; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* Keep dash lengths in the same SVG coordinate space on stretched mobile paths. */
.wl-routine-track { stroke: var(--routine-line); }
.wl-routine-branches, .wl-routine-trunk, .wl-routine-arrowhead { stroke: var(--wl-purple); }
.wl-routine-branches path, .wl-routine-trunk, .wl-routine-arrowhead { stroke-dasharray: 1; stroke-dashoffset: 0; }
.wl-routine-junction { fill: var(--wl-purple); stroke: var(--wl-paper); stroke-width: 2; }
.wl-routine-connections .wl-routine-fan-narrow, .wl-routine-connections .wl-routine-down { display: none; }
.wl-routine-learning { min-width: 0; min-height: 384px; display: flex; flex-direction: column; justify-content: center; padding: 28px 22px; border: 1px solid var(--routine-line); border-radius: 20px; background: radial-gradient(ellipse at 50% 0, var(--routine-tint), transparent 85%), var(--wl-paper); text-align: center; }
.wl-routine-learning h4 { margin: 0; color: var(--wl-ink); font-size: 36.4px; font-weight: 700; line-height: 1.45; letter-spacing: -.05em; }
.wl-routine-learning h4 > span { display: inline-block; white-space: nowrap; }
.wl-routine-accent { color: var(--wl-purple); }
.wl-routine-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; }
.wl-routine-tools li { display: flex; flex-direction: column; align-items: center; gap: 9px; padding-inline: 8px; }
.wl-routine-tools li + li { border-left: 1px solid var(--routine-line); }
.wl-routine-tools svg { width: 26px; height: 26px; margin-bottom: 2px; stroke: url(#routine-tool-gradient) var(--wl-purple); }
.wl-routine-tools strong { color: var(--wl-purple); font-size: 18px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.wl-routine-tools li > span { color: var(--wl-muted); font-size: 13px; line-height: 1.6; }
@media screen and (forced-colors: none) {
    @supports (background-clip: text) {
        .wl-routine-accent, .wl-routine-tools strong { background: var(--wl-emphasis-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    }
}
/* Progressive enhancement keeps the complete, non-interactive diagram readable without JS. */
[data-routine-phase="sources"] .wl-routine-branches path,
[data-routine-phase="sources"] .wl-routine-trunk,
[data-routine-phase="sources"] .wl-routine-arrowhead { stroke-dashoffset: 1; opacity: 0; }
[data-routine-phase="sources"] .wl-routine-junction { fill: var(--routine-line); }
[data-routine-phase="sources"] .wl-routine-situations li { animation: wl-routine-attention 2.4s ease-in-out both; }
/* Keep earlier cards emphasized as the next stage begins. */
:is([data-routine-phase="merge"], [data-routine-phase="learn"], [data-routine-phase="hold"]) .wl-routine-situations li,
[data-routine-phase="hold"] .wl-routine-learning {
    border-color: var(--wl-purple);
    box-shadow: 0 0 0 3px var(--routine-halo), 0 6px 22px var(--routine-glow);
}
[data-routine-phase="merge"] .wl-routine-branches path { animation: wl-routine-trace .65s ease-out both; }
[data-routine-phase="merge"] .wl-routine-branches path:nth-child(2) { animation-delay: .09s; }
[data-routine-phase="merge"] .wl-routine-branches path:nth-child(3) { animation-delay: .18s; }
[data-routine-phase="merge"] .wl-routine-branches path:nth-child(4) { animation-delay: .27s; }
[data-routine-phase="merge"] .wl-routine-branches path:nth-child(5) { animation-delay: .36s; }
/* Finish all five branches (1.01s), then fill the junction, shaft and arrowhead. */
[data-routine-phase="merge"] .wl-routine-junction { animation: wl-routine-join .2s 1.05s ease-out both; }
[data-routine-phase="merge"] .wl-routine-trunk { animation: wl-routine-trace .35s 1.35s ease-out both; }
[data-routine-phase="merge"] .wl-routine-arrowhead { animation: wl-routine-trace .15s 1.7s ease-out both; }
[data-routine-phase="learn"] .wl-routine-learning { animation: wl-routine-attention 2.4s ease-in-out both; }
/* After a two-second hold, fade only the emphasis; all labels stay readable. */
[data-routine-phase="fade"] .wl-routine-situations li,
[data-routine-phase="fade"] .wl-routine-learning { animation: wl-routine-focus 3s ease-in-out reverse both; }
[data-routine-phase="fade"] .wl-routine-branches path,
[data-routine-phase="fade"] .wl-routine-trunk,
[data-routine-phase="fade"] .wl-routine-arrowhead { animation: wl-routine-fade 3s ease-in-out both; }
[data-routine-phase="fade"] .wl-routine-junction { animation: wl-routine-join 3s ease-in-out reverse both; }
@keyframes wl-routine-trace {
    from { stroke-dashoffset: 1; opacity: 0; }
    1% { opacity: 1; }
    to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes wl-routine-join { from { fill: var(--routine-line); } to { fill: var(--wl-purple); } }
@keyframes wl-routine-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes wl-routine-focus {
    from { border-color: var(--routine-line); box-shadow: 0 0 0 3px transparent, 0 6px 22px transparent; }
    to { border-color: var(--wl-purple); box-shadow: 0 0 0 3px var(--routine-halo), 0 6px 22px var(--routine-glow); }
}
/* Three gentle emphasis pulses, with the third remaining lit for the next stage. */
@keyframes wl-routine-attention {
    0%, 25%, 33.333%, 58.333%, 66.667% {
        border-color: var(--routine-line);
        box-shadow: 0 0 0 3px transparent, 0 6px 22px transparent;
    }
    8.333%, 16.667%, 41.667%, 50%, 75%, 100% {
        border-color: var(--wl-purple);
        box-shadow: 0 0 0 3px var(--routine-halo), 0 6px 22px var(--routine-glow);
    }
}
@media (max-width: 1050px) {
    .wl-routine { padding: 28px 24px; }
    .wl-routine-map { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1.15fr); }
    .wl-routine-situations li { gap: 10px; padding-inline: 13px; font-size: 16px; }
    .wl-routine-learning { padding-inline: 14px; }
    .wl-routine-learning h4 { font-size: 32.5px; }
    .wl-routine-tools li { padding-inline: 5px; }
    .wl-routine-tools strong { font-size: 16px; }
    .wl-routine-tools li > span { font-size: 12px; }
}
@media (max-width: 760px) {
    .wl-routine { padding: 22px 18px; border-radius: 20px; }
    .wl-routine-map { grid-template-columns: minmax(0, 1fr) 56px; grid-template-rows: 384px 70px auto; }
    .wl-routine-situations { grid-column: 1; grid-row: 1; }
    .wl-routine-situations li { gap: 11px; padding: 8px 12px; font-size: 15px; border-radius: 10px; }
    .wl-routine-situations svg { width: 22px; height: 22px; }
    .wl-routine-connections { display: contents; }
    .wl-routine-connections .wl-routine-fan-wide { display: none; }
    .wl-routine-connections .wl-routine-fan-narrow { display: block; grid-column: 2; grid-row: 1; height: 384px; }
    .wl-routine-connections .wl-routine-down { display: block; position: absolute; top: 384px; right: 16px; width: calc(50% - 16px); height: 70px; }
    .wl-routine-learning { grid-column: 1 / -1; grid-row: 3; min-height: 0; padding: 25px 12px; border-radius: 16px; }
    .wl-routine-learning h4 { font-size: 31.2px; }
    .wl-routine-tools { margin-top: 25px; }
    .wl-routine-tools li { gap: 7px; padding-inline: 4px; }
    .wl-routine-tools svg { width: 24px; height: 24px; }
    [data-routine-phase="merge"] .wl-routine-fan-narrow .wl-routine-trunk { animation-duration: .2s; }
    [data-routine-phase="merge"] .wl-routine-down .wl-routine-trunk { animation-duration: .15s; animation-delay: 1.55s; }
}
@media (max-width: 380px) {
    .wl-routine { padding-inline: 12px; }
    .wl-routine-map { grid-template-columns: minmax(0, 1fr) 48px; }
    .wl-routine-situations li { gap: 8px; padding-inline: 10px; font-size: 14px; }
    .wl-routine-situations svg { width: 20px; height: 20px; }
    .wl-routine-connections .wl-routine-down { right: calc(48px * 16 / 56); width: calc(50% - 48px * 16 / 56); }
    .wl-routine-learning { padding-inline: 9px; }
    .wl-routine-learning h4 { font-size: 28.6px; }
    .wl-routine-tools strong { font-size: 15px; }
    .wl-routine-tools li > span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active), print {
    .wl-routine *, .wl-routine *::before { animation: none !important; transition: none !important; }
    .wl-routine-branches path, .wl-routine-trunk, .wl-routine-arrowhead { stroke-dashoffset: 0 !important; opacity: 1 !important; }
}
@media (forced-colors: active) {
    .wl-routine-tools svg { stroke: CanvasText; }
    .wl-routine, .wl-routine-situations li, .wl-routine-learning, .wl-routine-tools li + li { border-color: CanvasText !important; box-shadow: none !important; }
    .wl-routine-track, .wl-routine-branches, .wl-routine-trunk, .wl-routine-arrowhead { stroke: CanvasText; }
    .wl-routine-junction { fill: CanvasText; }
}
@media print { .wl-routine { break-inside: avoid; } }

/* The inline SVG's fixed light-theme gradient is decorative; keep its paths
   as readable as the matching labels on the dark learning panel. */
@media screen and (forced-colors: none) {
    html[data-wm-theme="dark"] .wm-landing .wl-routine-tools svg { stroke: var(--wl-purple); }
}