/* Home (A3; phase 4b A4b) and its first block (home-hero.js; also loaded by the wizard): layout only; every value is a kit token. */
[data-screen="home"], .home-screen { gap: var(--space-6); margin-top: calc(-1 * var(--space-4)); }
.home-hero { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); }
.home-hero .k-greet { gap: var(--space-4); }
.home-hero .k-greet__line { max-width: 38ch; }
.home-hero .k-greet__bridge { max-width: 66ch; margin-top: 0; }
.home-hero .k-greet__actions { margin-top: var(--space-1); }
/* the demo's quiet "Show me around", at the end of Navigator's name line */
.k-greet__who .home-tourlink { margin-left: var(--space-2); min-height: 24px; }

/* Your 90 days: four chapters in words, side by side; Next up under them (under the current one at 390) */
.home-journey { gap: var(--space-4); }
/* the card's title in the display serif, as This week's (round 04) */
.home-journey .k-card__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--display-s); line-height: var(--display-s-leading); letter-spacing: var(--tracking-display); }
.home-journey__lead { margin-top: calc(-1 * var(--space-2)); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink-2); }
.home-journey__lead b { color: var(--color-ink); }
.home-journey__goal { margin-top: calc(-1 * var(--space-3)); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-3); }
.home-journey__goallabel { font-weight: var(--weight-medium); color: var(--color-ink-2); }
.home-journey__chapters { display: grid; gap: var(--space-2); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-ch { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); order: var(--order); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
.home-ch[data-state="current"] { background: var(--color-brand-tint); }
.home-ch__name { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-lead); line-height: var(--leading-lead); font-weight: var(--weight-medium); color: var(--color-ink); }
.home-ch__n { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--display-s); line-height: 1; color: var(--color-brand); }
.home-ch__weeks { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-3); }
.home-ch__line { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink-2); }
.home-ch__foot { margin-top: auto; padding-top: var(--space-1); }
.home-ch__state { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-meta); line-height: var(--leading-meta); font-weight: var(--weight-medium); color: var(--color-ink-3); }
.home-ch[data-state="done"] .home-ch__state { color: var(--color-brand); }
.home-ch[data-state="current"] .home-ch__state { color: var(--color-ink); }
.home-ch__bar { display: block; height: 4px; margin-top: var(--space-2); overflow: hidden; border-radius: var(--radius-full); background: var(--color-surface); }
.home-ch[data-state="later"] .home-ch__bar { background: var(--color-ground-2); }
.home-ch__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--color-brand); }
.home-next { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); order: 99; grid-column: 1 / -1; padding: var(--space-3) var(--space-5) 0; }
.home-next__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.home-next__head .home-handed { padding-top: 0; box-shadow: none; font-size: var(--text-meta); line-height: var(--leading-meta); }
.home-next__list { display: grid; gap: var(--space-3) var(--space-6); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.home-next__step { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.home-next__title { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--color-ink); }
.home-next__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.home-handed { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-4); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink-2); box-shadow: 0 -1px 0 var(--color-hairline); }
.home-handed .k-icon { flex-shrink: 0; }

/* This week: the viewer's part (rows on white) beside the packets on their tinted desk */
.home-thisweek { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.home-thisweek__head { justify-content: flex-start; }
.home-thisweek__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .home-thisweek__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.home-rows { display: flex; min-width: 0; flex-direction: column; margin: 0; padding: var(--space-2) var(--space-6); list-style: none; border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-1); }
.home-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-4) 0; }
.home-row + .home-row { box-shadow: 0 -1px 0 var(--color-hairline); }
.home-row--none .home-row__title { font-weight: var(--weight-regular); color: var(--color-ink-2); }
.home-row__title { min-width: 0; flex: 1 1 14em; font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--color-ink); }
.home-row__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.home-week { display: grid; gap: var(--space-6); align-items: center; padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); background: var(--mat-teal-hi); box-shadow: var(--shadow-inset); grid-template-columns: 184px minmax(0, 1fr); }
.home-desk { display: flex; width: 100%; align-items: center; justify-content: center; padding: var(--space-5) 0; border: 0; border-radius: var(--radius-lg); background: none; cursor: pointer; }
.home-desk__stack { display: block; width: 168px; transition: transform var(--duration-slow) var(--ease-out); }
.home-desk__stack .k-pstack { width: 100%; }
.home-desk:hover .home-desk__stack { transform: translateY(-4px) rotate(-1deg); }
.home-week__text { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.home-week__count { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--display-l); line-height: var(--display-l-leading); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.home-week__unit { font-size: var(--display-s); line-height: var(--display-s-leading); }
.home-week__when { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink-2); }
.home-week__cost { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--color-ink); }
.home-week__text .k-note { align-self: stretch; margin-top: var(--space-2); background: var(--color-surface); }

/* The next course as a large cover; the badges beside it */
.home-two { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .home-two { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.home-learn .k-media__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--display-s); line-height: var(--display-s-leading); }
.home-medals { --medal: 64px; display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); justify-items: center; }

.home-results { padding: 0 var(--space-2); }
.home-results__line { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-ink-2); }
.home-results__line .k-icon { flex-shrink: 0; margin-top: var(--space-1); }
.home-results__line b { color: var(--color-ink); }

/* The hand-off target the wizard draws over its page: Home's main column, below the top bar */
.home-hero-stage { position: fixed; left: 0; right: 0; top: var(--topbar); bottom: 0; z-index: var(--z-panel); overflow: hidden; background: var(--color-ground); }
@media (min-width: 1024px) { .home-hero-stage[data-panel] { padding-right: calc(var(--panel) + var(--space-3)); } }

/* After the hand-off: the first block and This week are already in place; the rest rises in */
.app-screen[data-welcome] > :not(.home-hero):not(.home-thisweek) { animation: k-lift var(--duration-explain) var(--ease-out) both; }
.app-screen[data-welcome] > :nth-child(n+4) { animation-delay: 120ms; }

/* First paint (app.html, before scripts): the first block's skeleton in the same place */
.home-skel__line { display: flex; width: 100%; max-width: 640px; flex-direction: column; gap: var(--space-3); }
.home-skel__line .k-skeleton, .home-skel .k-skeleton { display: block; }
.home-skel__chapters { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Navigator's panel open at 1024–1279 leaves Home about 600 px: the chapters two by two, This week stacked */
@media (min-width: 1024px) and (max-width: 1279px) {
  .k-shell[data-panel-open] .home-journey__chapters, .home-hero-stage[data-panel] .home-journey__chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-shell[data-panel-open] .home-next__list, .home-hero-stage[data-panel] .home-next__list { grid-template-columns: minmax(0, 1fr); }
  .k-shell[data-panel-open] .home-thisweek__grid, .home-hero-stage[data-panel] .home-thisweek__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .home-journey__chapters, .home-skel__chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-next__list { grid-template-columns: minmax(0, 1fr); }
  .home-next__step { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@media (max-width: 767px) {
  [data-screen="home"], .home-screen { gap: var(--space-6); margin-top: 0; }
  .home-hero { gap: var(--space-6); }
  .home-hero .k-greet__line { font-size: var(--display-s); line-height: var(--display-s-leading); }
  .home-hero .k-greet__bridge { font-size: var(--text-body); line-height: var(--leading-body); }
  .home-journey__chapters { display: flex; flex-direction: column; gap: var(--space-1); }
  .home-skel__chapters { grid-template-columns: minmax(0, 1fr); }
  .home-ch { padding: var(--space-3) var(--space-4); gap: 0; }
  .home-ch__n { font-size: var(--text-title); }
  .home-ch__line { margin-top: 0; font-size: var(--text-meta); line-height: var(--leading-meta); }
  .home-ch__foot { padding-top: var(--space-1); }
  .home-next { order: var(--order); padding: var(--space-2) var(--space-4) var(--space-4); }
  .home-next__list { grid-template-columns: minmax(0, 1fr); }
  .home-rows { padding: var(--space-1) var(--space-5); border-radius: var(--radius-lg); }
  .home-week { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-1) var(--space-5); align-items: start; padding: var(--space-5); }
  .home-week__text { display: contents; }
  .home-desk { grid-row: 1 / span 4; grid-column: 1; min-height: 0; }
  .home-desk__stack { width: 88px; }
  .home-week__text > * { grid-column: 2; }
  .home-week__text > .app-split, .home-week__text > .home-week__cost { grid-column: 1 / -1; }
  .home-week__text > .app-split { margin-top: var(--space-3); }
  .home-week .k-note { display: none; }
  .home-week__count { font-size: var(--display-m); line-height: var(--display-m-leading); }
}
.home-hero .k-greet, .home-hero .k-anim-rise, .home-thisweek .k-anim-rise, .home-hero .k-note, .home-thisweek .k-note { animation: none; }