/* Learn · My Journey (redesign): one "Up next" panel, then a calm route list.
   Units are the only boxes; lessons are single rows inside them; locked unit tests are single quiet rows. */
.learn-v2{max-width:860px;margin:0 auto;display:grid;gap:28px}
.learn-v2 .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Up next */
.learn-next{display:grid;grid-template-columns:1fr auto;gap:18px 24px;align-items:center;padding:26px 28px;border-radius:22px;background:linear-gradient(135deg,#1f4d3d 0%,#2a6a53 100%);color:#fff;box-shadow:0 14px 34px #1f4d3d26}
.learn-next .eyebrow{color:#cfe6d8;letter-spacing:.14em}
.learn-next h2{margin:6px 0 6px;font-size:clamp(24px,3.4vw,32px);line-height:1.15;color:#fff}
.learn-next p{margin:0;color:#dcebe2;font-size:15px}
.learn-next-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:180px}
.learn-next-actions .primary{background:#fff;color:#1f4d3d;border-color:#fff;min-height:48px;font-size:16px;font-weight:700}
.learn-next-actions .primary:hover{background:#eef6f0}
.learn-next-actions .primary:disabled{opacity:.6}
.learn-link{min-height:36px;padding:6px 10px;border:0;background:none;color:#e6f2ea;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.learn-today{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:16px;border-top:1px solid #ffffff2e}
.learn-today>span{font-size:13px;font-weight:600;color:#cfe6d8}
.learn-today ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.learn-today li{padding:5px 12px;border-radius:999px;background:#ffffff1f;color:#fff;font-size:13px;font-weight:600}
.learn-today li.done{background:#ffffff38;color:#e6f2ea}

/* Route header */
.learn-route{display:grid;gap:10px}
.learn-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.learn-toolbar h2{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-size:24px}
.learn-toolbar .tag{font-size:12px;font-weight:600}
.learn-v2 .topic-search{margin:0;flex:0 1 280px}
.learn-v2 .topic-search input{width:100%;min-height:42px;padding:8px 14px 8px 38px;border:1px solid #d6e2da;border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6f66' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center;font:inherit}
.learn-v2 .topic-search-status{margin:0;color:#47594f}

/* Chapters and units */
.learn-v2 .journey{padding:0}
.learn-v2 .journey:before{display:none}
.learn-v2 .chapter-heading{display:flex;align-items:baseline;gap:10px;margin:22px 4px 10px;padding:0;border:0;background:none;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1f4d3d}
.learn-v2 .chapter-heading:before{content:'';width:10px;height:10px;border-radius:50%;background:var(--chapter-color,#225f4b);align-self:center}
.learn-v2 .chapter-heading small{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:#6b7d73}
.learn-v2 .chapter-heading:first-child{margin-top:4px}
.learn-v2 .journey-unit{margin:0 0 12px;border:1px solid #e1e9e3;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 1px 2px #1f4d3d0d}
.learn-v2 .journey-unit>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;cursor:pointer;list-style:none}
.learn-v2 .journey-unit>summary::-webkit-details-marker{display:none}
.learn-v2 .journey-unit>summary:after{content:'';width:9px;height:9px;border-right:2px solid #6b7d73;border-bottom:2px solid #6b7d73;transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s;flex:none}
.learn-v2 .journey-unit[open]>summary:after{transform:rotate(225deg);margin-top:4px}
.learn-v2 .unit-title{display:grid;gap:2px;min-width:0}
.learn-v2 .unit-title strong{font-size:16px;color:#1f2f28}
.learn-v2 .unit-title small{font-size:12.5px;color:#6b7d73}
.learn-v2 .unit-progress{display:flex;align-items:center;gap:10px;margin-left:auto}
.learn-v2 .unit-bar{position:relative;width:72px;height:6px;border-radius:6px;background:#e7eee9;overflow:hidden}
.learn-v2 .unit-bar:after{content:'';position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:6px;background:#2f8a62}
.learn-v2 .unit-status{font-size:13px;font-weight:700;color:#47594f;white-space:nowrap}
.learn-v2 .journey-unit-lessons{border-top:1px solid #edf2ee}

/* Lesson rows */
.learn-v2 .stage{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:14px;padding:0 20px;border-top:1px solid #f0f4f1}
.learn-v2 .stage:first-child{border-top:0}
.learn-v2 .stage .node{width:30px;height:30px;border:1.5px solid #c9d8cc;background:#fff;color:#47594f;font-size:13px;font-weight:700;box-shadow:none;animation:none}
.learn-v2 .stage .stage-body{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:62px;padding:10px 0;border:0;border-radius:0;background:none;box-shadow:none;text-align:left}
.learn-v2 .stage .stage-body:hover,.learn-v2 .stage .stage-body:focus-visible{box-shadow:none}
.learn-v2 .stage:hover{background:#f8fbf9}
.learn-v2 .stage-text{display:grid;gap:3px;min-width:0}
.learn-v2 .stage-body h3{margin:0;font-size:15.5px;font-weight:650;color:#1f2f28;line-height:1.3}
.learn-v2 .journey-origin{font-size:12.5px;color:#6b7d73}
.learn-v2 .stage-pill{flex:none;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.learn-v2 .stage-pill.next{background:#225f4b;color:#fff}
.learn-v2 .stage-pill.today{background:#fff3dc;color:#8a5a12}
.learn-v2 .stage-pill.done{background:#e6f3ec;color:#1d6b43}
.learn-v2 .stage-pill.locked{background:#f1f3f2;color:#7c8a83}
.learn-v2 .stage.current{background:#f2f9f4;box-shadow:inset 3px 0 0 #225f4b}
.learn-v2 .stage.current .node{background:#225f4b;border-color:#225f4b;color:#fff}
.learn-v2 .stage.goal:not(.current) .node{border-color:#e0a845;color:#8a5a12;background:#fffaf0}
.learn-v2 .stage.is-done .node{background:#2f8a62;border-color:#2f8a62;color:#fff}
.learn-v2 .stage.is-done h3{color:#47594f}
.learn-v2 .stage .stage-body[data-locked="true"]{opacity:.55}
.learn-v2 .journey-person,.learn-v2 .target-label{display:none}

/* Unit tests: one quiet row; a button only when the test is open */
.learn-v2 .unit-checkpoint{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:14px;margin:0;padding:12px 20px;border:0;border-top:1px solid #f0f4f1;border-radius:0;background:#fafcfa}
.learn-v2 .checkpoint-node{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#eef3ef;color:#6b7d73;font-size:13px;font-weight:800}
.learn-v2 .checkpoint-text{display:grid;gap:2px;min-width:0}
.learn-v2 .checkpoint-text strong{font-size:14px;color:#1f2f28}
.learn-v2 .checkpoint-text small{font-size:12.5px;color:#6b7d73}
.learn-v2 .unit-checkpoint.ready{background:#fff9ec}
.learn-v2 .unit-checkpoint.ready .checkpoint-node{background:#f2b84b;color:#fff}
.learn-v2 .unit-checkpoint.passed .checkpoint-node{background:#2f8a62;color:#fff}
.learn-v2 .unit-checkpoint button{min-height:38px;padding:6px 14px;font-size:14px}
.learn-v2 .unit-checkpoint button[hidden]{display:none}

.learn-v2 .learn-about{margin-top:6px}

@media(max-width:600px){
 .learn-v2{gap:20px}
 .learn-next{grid-template-columns:1fr;padding:22px 20px;border-radius:18px}
 .learn-next-actions{min-width:0}
 .learn-toolbar h2{font-size:21px}
 .learn-v2 .topic-search{flex:1 1 100%}
 .learn-v2 .journey-unit>summary{padding:14px 16px}
 .learn-v2 .stage{padding:0 14px;gap:12px}
 .learn-v2 .unit-checkpoint{padding:12px 14px;gap:12px;grid-template-columns:30px 1fr}
 .learn-v2 .unit-checkpoint button{grid-column:2;justify-self:start}
 .learn-v2 .unit-bar{width:48px}
}

/* Override the older timeline styles (journey-chapters.css) inside the redesigned Learn page. */
.learn-v2 .journey-unit-lessons .stage::before,.learn-v2 .journey-unit-lessons .unit-checkpoint::before,.learn-v2 .journey-unit-lessons .stage::after{display:none}
.learn-v2 .journey-unit-lessons .unit-checkpoint{margin:0;--cp-offset:0px}
.learn-v2 .journey-unit-lessons .checkpoint-node{position:static;inset:auto;transform:none;margin:0;border:0;box-shadow:none}
.learn-v2 .journey-unit-lessons .stage .node{position:static;transform:none;margin:0}
.learn-v2 .journey-unit-lessons{margin:0;padding:0}

/* Topic complete: the unit bar grows, the lesson's number becomes a tick with a small bounce, and the row glows once. */
.learn-v2 .unit-bar:after{transition:width 1.2s cubic-bezier(.22,.9,.24,1)}
.learn-v2 .unit-bar[data-progress-to]{box-shadow:0 0 0 0 #2f8a6200;animation:bar-glow 1.8s ease .45s}
@keyframes bar-glow{30%{box-shadow:0 0 0 4px #2f8a6230}100%{box-shadow:0 0 0 0 #2f8a6200}}
.learn-v2 .stage.just-done.play{animation:row-glow 1.8s ease}
.learn-v2 .stage.just-done.play .node{animation:node-pop .75s cubic-bezier(.2,1.7,.35,1) .25s both}
.learn-v2 .stage.just-done.play .stage-pill{animation:pill-in .5s ease .7s both}
@keyframes row-glow{0%{background:#fff}25%{background:#dff1e6}100%{background:transparent}}
@keyframes node-pop{0%{transform:scale(.4)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes pill-in{0%{opacity:0;transform:translateY(4px) scale(.9)}100%{opacity:1;transform:none}}
.goal-dial .goal-fill{transition:stroke-dasharray 1.2s cubic-bezier(.22,.9,.24,1)}
@media(prefers-reduced-motion:reduce){.learn-v2 .unit-bar:after,.goal-dial .goal-fill{transition:none}.learn-v2 .stage.just-done.play,.learn-v2 .stage.just-done.play .node,.learn-v2 .stage.just-done.play .stage-pill,.learn-v2 .unit-bar[data-progress-to]{animation:none}}
html.reduce-motion .learn-v2 .unit-bar:after,html.reduce-motion .goal-dial .goal-fill{transition:none}
html.reduce-motion .learn-v2 .stage.just-done.play,html.reduce-motion .learn-v2 .stage.just-done.play .node,html.reduce-motion .learn-v2 .stage.just-done.play .stage-pill,html.reduce-motion .learn-v2 .unit-bar[data-progress-to]{animation:none}
/* Topic flow with two steps: the older three-column rule left an empty third column. */
#settings:has(.flow-track) .flow-cards.flow-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
#settings:has(.flow-track) .flow-track.flow-track-2:before{left:25%;right:25%}
#settings:has(.flow-track) .flow-track.flow-track-2:after{left:25%;width:calc(50% * min(var(--step),1))}
@media(max-width:600px){#settings:has(.flow-track) .flow-cards.flow-cards-2{grid-template-columns:1fr}}