/* Progress: cumulative milestones with no calendar resets.
   Shared settings and mock-readiness styles are retained below. */
#home { --quest-blue: #08afe0; --quest-ink: #4b4b4b; --quest-muted: #777; --quest-line: #e8e8e8; border-top-color: var(--quest-blue); padding: 0 0 calc(100px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); background: #fff; color: var(--quest-ink); }
#home .hinner { max-width: 540px; }
#home.show .hinner > * { animation: none; }
.progress-desktop-title, .progress-desktop-subtitle { display: none; }
.progress-hero { padding: 14px 16px 18px; background: var(--quest-blue); }
.progress-hero-story { position: relative; display: flex; align-items: center; min-height: 152px; }
.progress-hero-copy { position: relative; z-index: 1; width: 58%; padding: 12px 0; }
.progress-journey-label { display: inline-block; max-width: 100%; padding: 5px 7px 4px; border-radius: 7px; background: #fff; color: #0783a7; font-size: 11px; font-weight: 1000; line-height: 1; text-transform: uppercase; letter-spacing: .5px; }
#home .progress-hero h1 { margin: 11px 0 8px; color: #fff; font: 900 21px/1.22 Nunito, sans-serif; letter-spacing: .1px; text-wrap: initial; }
.progress-hero-art { position: absolute; right: -6px; bottom: 0; width: 45%; height: 150px; }
.progress-hero-art img { position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; object-fit: contain; }
.progress-summary-card { padding: 17px 16px 19px; border-radius: 15px; background: #fff; }
#home .progress-summary-card h2 { margin: 0 0 13px; color: var(--quest-ink); font: 900 17px/1.3 Nunito, sans-serif; }
.progress-summary-meter { display: flex; align-items: center; min-height: 34px; gap: 12px; }
.quest-track { position: relative; flex: 1; height: 20px; border-radius: 10px; background: #e8e8e8; overflow: hidden; isolation: isolate; }
.quest-track-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #ffc800; }
.quest-track-fill::after { content: ""; position: absolute; inset: 3px 5px auto; height: 5px; border-radius: 6px; background: rgb(255 255 255 / 25%); }
.quest-track-label { position: absolute; inset: 0; display: grid; place-items: center; color: #6f6f6f; font-size: 11px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.quest-track.is-summary { height: 24px; border-radius: 12px; }
.quest-track.is-summary .quest-track-fill { background: #10b5df; }
.quest-track.is-facts .quest-track-fill { background: #20bdeb; }
.quest-track.is-correct .quest-track-fill, .quest-track.is-complete .quest-track-fill { background: #8bd437; }
.quest-icon { display: block; width: 52px; height: 52px; flex: none; object-fit: contain; }
.milestones { padding: 0 16px; }
.milestones-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 81px; padding: 15px 0 12px; border-bottom: 2px solid var(--quest-line); }
#home .milestones-header h2 { margin: 0 0 5px; font: 900 23px/1.2 Nunito, sans-serif; letter-spacing: -.4px; }
.milestones-header .settings-button { width: 44px; height: 44px; border: 2px solid #e5edef; border-radius: 11px; color: #16b1cb; background: #f4fcfd; box-shadow: 0 2px 0 #e5edef; }
.milestones-list { list-style: none; padding: 0; margin: 0; }
.milestone { display: flex; align-items: center; gap: 19px; width: 100%; min-height: 106px; padding: 19px 4px 19px 9px; border: 0; border-bottom: 2px solid var(--quest-line); border-radius: 0; background: none; box-shadow: none; color: var(--quest-ink); font: inherit; text-align: left; cursor: pointer; }
.milestone:hover { background: #f4fbfd; }
.milestone:focus-visible { outline: 3px solid #0788b5; outline-offset: -3px; border-radius: 8px; }
.milestones-list li:last-child .milestone { border-bottom: 0; }
.milestone-content { flex: 1; min-width: 0; }
.milestone-title { display: block; margin: 0 0 13px; font: 850 17px/1.35 Nunito, sans-serif; color: var(--quest-ink); }
.milestone-meter { display: flex; align-items: center; gap: 10px; }
.milestone-marker { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 2px solid var(--marker-line); border-radius: 11px; background: var(--marker-bg); color: var(--marker-ink); }
.milestone-marker.is-xp { --marker-line: #f2da89; --marker-bg: #fff9e5; --marker-ink: #b3830b; }
.milestone-marker.is-correct { --marker-line: #b5dda0; --marker-bg: #f2faec; --marker-ink: #519b2e; }
.milestone-marker.is-facts { --marker-line: #a5dfec; --marker-bg: #ecfaff; --marker-ink: #119cbe; }
.milestone-marker svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.milestone-marker.is-complete { --marker-line: #68b83c; --marker-bg: #79c94d; --marker-ink: #fff; }
.milestone-marker.is-complete svg { stroke-width: 3; }
.milestone-reached { display: block; margin-top: 8px; color: #448211; font-size: 12px; font-weight: 900; }
.is-readiness .milestone-title { margin-bottom: 5px; }
.milestone-description { display: block; margin-bottom: 13px; color: #555; font-size: 14px; font-weight: 750; line-height: 1.45; }
.milestone-marker.is-readiness:not(.is-complete) { --marker-line: #a5dfec; --marker-bg: #ecfaff; --marker-ink: #08789b; }
.quest-track.is-readiness .quest-track-label { color: #29410c; }

/* The settings button is one component, used on Progress and Learn. */
.settings-button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 2px solid var(--line-2); border-radius: 13px; background: var(--paper); color: var(--ink-2); box-shadow: none; }
.settings-button svg { width: 24px; height: 24px; fill: currentColor; }
.settings-button:hover { background: var(--panel); }

/* Readiness */
.readiness-line { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink); }
.readiness-line b { font-size: 34px; font-weight: 950; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.readiness-line span { margin-left: auto; color: var(--ink-2); font-size: 12px; font-weight: 750; white-space: nowrap; }
.readiness-track { position: relative; height: 14px; border-radius: 10px; background: var(--panel-2); overflow: visible; }
.readiness-fill { display: block; height: 100%; border-radius: inherit; background: #ff8a1f; transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.readiness-fill.is-near { background: #f5b400; }
.readiness-fill.is-pass { background: #2f9e5b; }
.readiness-pass { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.readiness-verdict { margin: 14px 0 16px; font-size: 14px; line-height: 1.5; font-weight: 750; color: var(--ink-2); }
.readiness-verdict.is-pass { color: var(--green-ink); }
.readiness-verdict.is-near { color: var(--amber-ink); }

@media (max-width: 359px) {
  .progress-hero { padding-left: 12px; padding-right: 12px; }
  #home .progress-hero h1 { font-size: 18px; }
  .progress-hero-art { height: 155px; }
  .milestones { padding: 0 12px; }
  .milestone { gap: 12px; padding-left: 0; }
  .milestone-title { font-size: 16px; }
}