/* A quiet route map: progress is visual; explanations are available on demand. */
html[data-page="home"][data-home-dashboard="plan"] body:not(.feature-guide-active) #floating-tools { display:none; }
#personal-plan { gap:16px; padding:20px; border-radius:25px; background:linear-gradient(135deg,#fffdf9,#edf5f0); }
#personal-plan h2 { font-size:clamp(21px,3.2vw,30px); line-height:1.18; max-width:24ch; overflow-wrap:anywhere; }
#personal-plan > header { align-items:center; gap:18px; }
#personal-plan > header > span { flex:none; width:58px; min-height:58px; border-radius:19px; font-size:17px; background:linear-gradient(145deg,#285f51,#183d35); box-shadow:0 6px 16px #214e3920; }
#personal-plan-level svg { width:28px; height:28px; }
#route-goal-label { margin:0 0 7px; font-size:10px; letter-spacing:.12em; }
#personal-plan-signals { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#personal-plan-signals > span { display:flex; min-width:0; align-items:center; gap:8px; padding:11px 12px; border:1px solid #d9e5df; border-radius:14px; background:#ffffffb8; font-size:12px; line-height:1.4; }
#personal-plan-signals svg { width:20px; height:20px; flex:none; color:#487364; }
#personal-plan-signals b { min-width:0; overflow-wrap:anywhere; font-weight:700; }
#personal-plan-signals .route-work-focus { grid-column:1/-1; padding:2px 2px; background:none; border:0; font-size:12px; color:#536b61; }
.route-week { display:flex; flex-wrap:wrap; max-width:54px; gap:3px; margin-inline-start:auto; flex:none; }
.route-week em { width:5px; height:5px; border-radius:50%; background:#d7e2dc; }
.route-week .filled { background:#4e7a64; }
#personal-plan-signals > span:nth-child(2) { display:grid; grid-template-columns:20px minmax(0,1fr); gap:5px 8px; }
#personal-plan-signals > span:nth-child(2) > svg { grid-row:1/3; }
#personal-plan-signals .route-week { grid-column:2; margin-inline-start:0; max-width:none; gap:4px; }
.route-choices { border-top:1px solid #d3e1d8; padding-top:5px; }
.route-choices > summary { min-height:44px; padding:10px 0; color:#365e50; font-size:12px; font-weight:750; cursor:pointer; }
.route-choices > div { display:grid; gap:14px; padding-top:8px; }
#personal-plan-summary { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.6; }
#personal-plan #edit-learning-plan { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:46px; font-size:13px; }
#edit-learning-plan svg { width:18px; height:18px; }
#personal-plan .home-mission { margin:0; padding:12px; min-height:0; box-shadow:none; border-radius:15px; grid-template-columns:32px minmax(0,1fr) 44px; }
#personal-plan .home-mission > span { width:32px; height:32px; background:none; }
#personal-plan .home-mission svg { width:22px; height:22px; }
#personal-plan .home-mission strong { font-size:12px; }
#personal-plan .home-mission p { font-size:12px; line-height:1.5; }
#personal-plan .home-mission button { width:44px; height:44px; padding:10px; }
#personal-plan-official { padding:14px; border:1px solid #e0e8e2; gap:10px; }
#personal-plan-official > strong { font-size:11px; }
#personal-plan-official > p { font-size:12px; line-height:1.55; }
#personal-plan-official a { display:flex; align-items:center; min-height:44px; padding:10px 12px; font-size:12px; overflow-wrap:anywhere; }
.route-extras > summary { font-size:12px; padding:10px 0; color:#6c655a; cursor:pointer; }
#personal-plan-offer p { font-size:12px; line-height:1.55; }
#personal-plan-offer strong { font-size:13px; }
#personal-plan-offer small { font-size:10px; }
.learning-roadmap[data-home-panel="plan"] { padding:20px; border-radius:25px; background:#fffdfa; }
.learning-roadmap .roadmap-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
#roadmap-title { margin:0; font-size:clamp(20px,2.8vw,25px); line-height:1.2; }
.learning-roadmap .context-guide-button { flex:none; min-height:38px; }
.route-level-track { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:8px 0 19px; position:relative; isolation:isolate; }
.route-level-track::before { content:""; position:absolute; top:57px; inset-inline:12%; height:2px; background:#dde6df; z-index:-1; }
.route-level { display:grid; justify-items:center; gap:7px; min-width:0; padding:0 2px 7px; color:#6b7c71; background:none; border-radius:18px; }
.route-level-marker { height:18px; color:#9b6549; }
.route-level-marker svg { width:17px; height:17px; }
.route-level-ring { display:grid; width:64px; height:64px; padding:4px; place-items:center; border-radius:50%; background:conic-gradient(#346954 var(--route-progress),#e5ece6 0); box-shadow:0 0 0 7px #fffdfa; }
.route-level-ring > b { display:grid; width:100%; height:100%; place-items:center; border:4px solid #fffdfa; border-radius:50%; background:#f0f5ef; color:#566b5e; font-size:16px; font-weight:850; }
.route-level small { font-size:11px; font-variant-numeric:tabular-nums; }
.route-level[aria-pressed="true"] .route-level-ring > b { color:#fff; background:linear-gradient(145deg,#356c58,#1b4439); }
.route-level.is-current .route-level-ring { outline:1px solid #a4c3ad; outline-offset:5px; }
.route-level:focus-visible,.route-stage:focus-visible,.route-lesson-picker > summary:focus-visible { outline:3px solid #be854c; outline-offset:4px; }
.route-stage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 16px; }
.route-stage.stage-sound { --stage-color:#a76650; }
.route-stage.stage-literacy { --stage-color:#687eac; }
.route-stage.stage-meaning { --stage-color:#4e8a70; }
.route-stage.stage-grammar { --stage-color:#947aad; }
.route-stage.stage-practice { --stage-color:#b28154; }
.route-stage.stage-assessment { --stage-color:#a89044; }
.route-stage { display:grid; justify-items:center; min-width:0; gap:6px; padding:12px 8px 10px; border:1px solid #e3e7df; border-radius:16px; background:#fff; color:#596b60; }
.route-stage > span { display:grid; width:32px; height:32px; place-items:center; border-radius:11px; color:var(--stage-color,#637f69); background:color-mix(in srgb,var(--stage-color,#637f69) 10%,white); font-size:17px; font-weight:800; }
.route-stage > span svg { width:20px; height:20px; }
.route-stage > b { font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
.route-stage > i { width:30px; height:3px; border-radius:4px; background:linear-gradient(to right,var(--stage-color,#637f69) var(--route-progress),#e8ece7 0); }
.route-stage[aria-pressed="true"] { border-color:#7fa48a; box-shadow:inset 0 0 0 1px #7fa48a; background:#f0f6ef; color:#264a3c; }
.route-stage-focus { padding:16px; border:1px solid #cfdfd1; border-radius:20px; background:linear-gradient(130deg,#edf5ec,#f8faf5); }
.route-stage-focus > header { display:flex; align-items:center; gap:11px; }
.route-focus-icon { display:grid; place-items:center; width:44px; height:44px; flex:none; border:1px solid #d1dfd0; border-radius:15px; color:#35614d; background:#fff; font-size:21px; font-weight:800; }
.route-stage-focus header > div { min-width:0; }
.route-stage-focus header small { color:#586f5c; font-size:10px; font-weight:700; }
.route-stage-focus h3 { margin:2px 0 0; font-size:18px; line-height:1.3; color:#264b3b; overflow-wrap:anywhere; }
.route-count { margin-inline-start:auto; font-size:15px; font-variant-numeric:tabular-nums; color:#355f47; }
.route-evidence-line { display:flex; height:5px; margin:14px 0 8px; border-radius:6px; overflow:hidden; background:#dce7da; }
.route-evidence-line i { background:#4d805b; transition:width 260ms ease-out; }
.route-evidence-line em,.route-placement-credit i,.route-progress-help .placement { background:repeating-linear-gradient(135deg,#98b6a1 0 3px,#e2ece0 3px 6px); }
.route-placement-credit { display:flex; gap:6px; align-items:center; color:#58715e; font-size:10px; }
.route-placement-credit i { width:14px; height:6px; border-radius:3px; }
.route-next-lesson { display:grid; gap:3px; margin:14px 0; }
.route-next-lesson > small { color:#71816f; font-size:10px; }
.route-next-lesson > strong { font-size:14px; line-height:1.4; color:#254d3a; overflow-wrap:anywhere; }
.route-lesson-picker > summary { display:flex; align-items:center; justify-content:space-between; min-height:46px; padding:12px 15px; border-radius:13px; background:linear-gradient(145deg,#2e674f,#194c39); color:white; font-size:13px; font-weight:750; cursor:pointer; }
.route-lesson-picker > summary::-webkit-details-marker { display:none; }
.route-lesson-picker > summary svg { width:20px; height:20px; }
.route-lesson-picker[open] > summary svg { transform:rotate(90deg); }
.route-lesson-picker > div { display:grid; gap:7px; padding-top:12px; }
.route-lesson-choice { display:flex; gap:10px; align-items:center; text-align:start; padding:11px; min-height:48px; border:1px solid #d7e3d4; border-radius:13px; color:#36553e; background:#fff; }
.route-lesson-choice > b { flex:1; min-width:0; font-size:12px; line-height:1.4; overflow-wrap:anywhere; font-weight:700; }
.route-lesson-status { display:grid; place-items:center; width:27px; height:27px; flex:none; border-radius:9px; background:#ecf4e9; }
.route-lesson-status svg { width:17px; height:17px; }
.route-lesson-choice:disabled { color:#6a7669; background:#f7f9f4; opacity:.8; cursor:default; }
.route-more-lessons { min-height:44px; color:#35634a; background:none; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.route-progress-help { margin-top:13px; color:#738170; }
.route-progress-help summary { padding:10px 0; min-height:38px; cursor:pointer; font-size:11px; }
.route-progress-help p { margin:7px 0; font-size:12px; line-height:1.5; }
.route-progress-help > div { display:flex; gap:12px; flex-wrap:wrap; font-size:11px; }
.route-progress-help span { display:flex; align-items:center; gap:5px; }
.route-progress-help i { width:13px; height:6px; border-radius:3px; background:#4d805b; }
[dir="rtl"] .route-lesson-picker > summary svg { transform:rotate(180deg); }
[dir="rtl"] .route-lesson-picker[open] > summary svg { transform:rotate(90deg); }
@media(max-width:360px) {
  #personal-plan,.learning-roadmap[data-home-panel="plan"] { padding:15px; }
  .route-level-ring { width:54px; height:54px; }
  .route-level-track::before { top:52px; }
  .route-stage-focus { padding:13px; }
  .route-week { display:none; }
}
html[data-text-scale="extra-large"] #personal-plan-signals,.a11y-font-200 #personal-plan-signals { grid-template-columns:1fr; }
html[data-text-scale="extra-large"] .roadmap-heading,.a11y-font-200 .roadmap-heading { flex-wrap:wrap; }
html.high-contrast :is(#personal-plan,.route-stage-focus,.route-stage,.route-level-ring) { border:2px solid currentColor; }
html.calm-mode .route-evidence-line i { transition:none; }
@media(prefers-reduced-motion:reduce) { .route-evidence-line i { transition:none; } }
