/*
  Homepage editorial softening, 2026-06-06.
  Reduces boxed dashboard chrome while keeping tool surfaces scannable.
*/

body.home-page {
  --hm-editorial-line: color-mix(in srgb, var(--text, #111) 12%, transparent);
  --hm-editorial-line-strong: color-mix(in srgb, var(--text, #111) 18%, transparent);
  --hm-editorial-muted: color-mix(in srgb, var(--text, #111) 52%, transparent);
  --hm-editorial-faint: color-mix(in srgb, var(--text, #111) 6%, transparent);
}

body.home-page .home-wwdc26-countdown {
  background: var(--hm-section-bg, var(--bg, #fff)) !important;
  border: 0 !important;
}

body.home-page .home-wwdc26-countdown .container {
  width: min(calc(100% - clamp(32px, 6vw, 96px)), 1040px) !important;
}

body.home-page .home-wwdc26-countdown__inner {
  grid-template-columns: minmax(190px, 0.74fr) minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 18px 0 !important;
  border-top: 1px solid var(--hm-editorial-line) !important;
  border-bottom: 1px solid var(--hm-editorial-line) !important;
}

body.home-page .home-wwdc26-countdown__copy {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  gap: 4px !important;
}

body.home-page .home-wwdc26-countdown__copy h2 {
  font-size: clamp(20px, 2vw, 26px) !important;
}

body.home-page .home-wwdc26-countdown__digits {
  display: flex !important;
  justify-content: flex-end !important;
  gap: clamp(14px, 2.4vw, 34px) !important;
  min-width: 0 !important;
}

body.home-page .home-wwdc26-countdown__digits span {
  min-width: clamp(44px, 4.8vw, 64px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.home-page .home-wwdc26-countdown__digits b {
  font-size: clamp(26px, 3.2vw, 42px) !important;
}

body.home-page .home-wwdc26-countdown__digits small,
body.home-page .home-wwdc26-countdown__link {
  color: var(--hm-editorial-muted) !important;
  letter-spacing: 0.08em !important;
}

body.home-page .home-wwdc26-countdown__link {
  min-height: 0 !important;
  padding: 0 0 0 clamp(16px, 2.2vw, 28px) !important;
}

body.home-page main > .home-chip-section.home-route-section {
  padding: clamp(34px, 5vw, 66px) 0 clamp(34px, 5vw, 64px) !important;
  background: var(--hm-section-bg, var(--bg, #fff)) !important;
  border: 0 !important;
}

body.home-page .home-route-section .container {
  width: min(calc(100% - clamp(32px, 6vw, 96px)), 1040px) !important;
  grid-template-columns: minmax(170px, 0.32fr) minmax(0, 1fr) !important;
  gap: clamp(24px, 5vw, 78px) !important;
  padding-top: clamp(20px, 2.8vw, 30px) !important;
  border-top: 1px solid var(--hm-editorial-line-strong) !important;
}

body.home-page .home-route-copy {
  max-width: 18em !important;
}

body.home-page .home-route-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2vw, 26px) !important;
  border: 0 !important;
}

body.home-page .home-route,
body.home-page .home-route:nth-child(odd),
body.home-page .home-route:nth-child(even),
body.home-page .home-route:not(:first-child) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: end !important;
  gap: 10px 10px !important;
  min-height: 0 !important;
  padding: 0 0 13px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hm-editorial-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text, #111) !important;
}

body.home-page .home-route:hover,
body.home-page .home-route:focus-visible {
  border-bottom-color: color-mix(in srgb, var(--accent, #d97868) 58%, transparent) !important;
  background: transparent !important;
}

body.home-page .home-route__num {
  grid-column: 1 / -1 !important;
  color: color-mix(in srgb, var(--text, #111) 34%, transparent) !important;
  font-size: 11px !important;
}

body.home-page .home-route__body {
  display: block !important;
  min-width: 0 !important;
}

body.home-page .home-route__title {
  display: block !important;
  font-size: clamp(14px, 1.1vw, 17px) !important;
  letter-spacing: 0.08em !important;
}

body.home-page .home-route__meta {
  display: block !important;
  margin-top: 7px !important;
  overflow: visible !important;
  color: var(--hm-editorial-muted) !important;
  font-size: 12px !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

body.home-page .home-route__arrow {
  align-self: end !important;
  color: color-mix(in srgb, var(--text, #111) 38%, transparent) !important;
  transform: none !important;
}

body.home-page main > .home-chip-section + #home-latest.home-section--paper-top,
body.home-page main > #home-latest.home-section--paper {
  padding-top: 0 !important;
  background: var(--hm-section-bg, var(--bg, #fff)) !important;
  border: 0 !important;
}

body.home-page main > #home-latest .hm-latest-articles {
  padding-top: clamp(34px, 5vw, 68px) !important;
  background: transparent !important;
}

body.home-page main > #home-latest .hm-latest-articles__inner {
  width: min(calc(100% - clamp(32px, 6vw, 96px)), 1040px) !important;
}

body.home-page main > #home-latest .hm-latest-articles__head {
  margin-bottom: clamp(14px, 2vw, 22px) !important;
  padding-top: clamp(18px, 2.8vw, 28px) !important;
  border-top: 1px solid var(--hm-editorial-line-strong) !important;
}

body.home-page main > #home-latest .hm-latest-articles__list {
  border-top: 0 !important;
}

body.home-page main > #home-latest .hm-latest-articles__item,
body.home-page main > #home-latest .hm-latest-articles__item:first-child,
body.home-page main > #home-latest .hm-latest-articles__item:nth-child(2),
body.home-page main > #home-latest .hm-latest-articles__item:nth-child(3) {
  border-bottom-color: var(--hm-editorial-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.home-page main > #home-latest .hm-latest-articles__link,
body.home-page main > #home-latest .hm-latest-articles__item + .hm-latest-articles__item .hm-latest-articles__link,
body.home-page main > #home-latest .hm-latest-articles__item:first-child .hm-latest-articles__link {
  background: transparent !important;
}

body.home-page main > #home-latest .hm-latest-articles__item:first-child .hm-latest-articles__link {
  gap: 18px clamp(28px, 4vw, 56px) !important;
  padding: clamp(22px, 3.4vw, 34px) 0 clamp(26px, 3.8vw, 40px) !important;
}

body.home-page main > #home-latest .hm-latest-articles__item:first-child .hm-latest-articles__headline {
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 820 !important;
}

body.home-page main > #home-latest .hm-latest-articles__thumb,
body.home-page main > #home-latest .hm-latest-articles__item:first-child .hm-latest-articles__thumb {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--hm-editorial-faint) !important;
  box-shadow: none !important;
}

body.home-page #rumors.hm-rumors-section {
  background: var(--hm-section-bg, var(--bg, #fff)) !important;
}

body.home-page #rumors .hm-rumors-grid {
  gap: clamp(18px, 3vw, 34px) !important;
  border-top: 0 !important;
}

body.home-page #rumors .hm-rumor-card {
  min-height: 0 !important;
  padding: clamp(18px, 2.2vw, 26px) 0 clamp(20px, 2.6vw, 30px) !important;
  border-top: 1px solid var(--hm-editorial-line-strong) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--hm-editorial-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.home-page #rumors .hm-rumor-card::before {
  height: 1px !important;
  background: color-mix(in srgb, var(--accent, #d97868) 72%, transparent) !important;
  opacity: 0.84 !important;
}

body.home-page #rumors .hm-rumor-card__title {
  max-width: 12em !important;
  font-size: clamp(24px, 2.35vw, 34px) !important;
  font-weight: 740 !important;
}

body.home-page #rumors .hm-rumor-card::after {
  color: var(--hm-editorial-muted) !important;
}

body.home-page .hm-tool-row,
body.home-page .hm-buy-timing-note,
body.home-page .hm-performance-snapshot,
body.home-page .hm-performance-score,
body.home-page .hm-timeline__chip {
  box-shadow: none !important;
}

body.home-page .hm-performance-snapshot,
body.home-page .hm-performance-score,
body.home-page .hm-timeline__chip {
  border-radius: 0 !important;
}

@media (max-width: 900px) {
  body.home-page .home-wwdc26-countdown__inner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 18px 0 20px !important;
  }

  body.home-page .home-wwdc26-countdown__digits {
    justify-content: flex-start !important;
  }

  body.home-page .home-wwdc26-countdown__link {
    padding: 0 !important;
    border: 0 !important;
  }

  body.home-page .home-route-section .container {
    display: block !important;
  }

  body.home-page .home-route-head {
    margin-bottom: 22px !important;
  }

  body.home-page .home-route-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.home-page .home-wwdc26-countdown .container,
  body.home-page .home-route-section .container,
  body.home-page main > #home-latest .hm-latest-articles__inner {
    width: calc(100% - 28px) !important;
  }

  body.home-page .home-wwdc26-countdown__digits {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  body.home-page .home-wwdc26-countdown__digits span {
    min-width: 0 !important;
  }

  body.home-page .home-route-nav {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  body.home-page .home-route,
  body.home-page .home-route:nth-child(odd),
  body.home-page .home-route:nth-child(even),
  body.home-page .home-route:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 14px 0 !important;
  }

  body.home-page .home-route__num {
    grid-column: 1 !important;
    margin: 0 !important;
  }

  body.home-page .home-route__body {
    grid-column: 1 !important;
  }

  body.home-page .home-route__arrow {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }
}

html[data-theme="dark"] body.home-page {
  --hm-editorial-line: color-mix(in srgb, var(--text, #f5f5f7) 14%, transparent);
  --hm-editorial-line-strong: color-mix(in srgb, var(--text, #f5f5f7) 22%, transparent);
  --hm-editorial-muted: color-mix(in srgb, var(--text, #f5f5f7) 62%, transparent);
  --hm-editorial-faint: color-mix(in srgb, var(--text, #f5f5f7) 9%, transparent);
}