/* PR-UI02: Guest Home only. PR-UI01 Foundation remains unchanged. */
body[data-role="public"][data-page-module="home"]:not([data-shell]) {
  --ui02-content: 74rem;
  --ui02-accent: var(--ui-brand, #063f3c);
  --ui02-accent-soft: var(--ui-brand-soft, #e7f0f0);
  --ui02-coral: var(--ui-cta, #c95749);
  --ui02-line: var(--ui-line, #dce3e8);
  --ui02-muted: var(--ui-muted, #62717b);
  background: var(--ui-canvas, #f6f8fa);
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main {
  display: block;
  inline-size: 100%;
  max-inline-size: none;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #auth-view {
  display: block;
  inline-size: min(calc(100% - 3rem), var(--ui02-content));
  max-inline-size: none;
  margin: 1.5rem auto 0;
}

/* Keep the real promotional artwork visible without letting it consume the viewport. */
body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner {
  inline-size: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ui02-line);
  border-radius: var(--ui-radius-card, 8px);
  background: var(--ui-surface, #fff);
  box-shadow: var(--ui-shadow-surface, 0 2px 12px rgb(15 43 40 / 6%));
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-viewport {
  max-block-size: none;
  aspect-ratio: 2400 / 675;
  background: var(--ui-surface, #fff);
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-slide {
  background: var(--ui-surface, #fff);
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-slide img {
  object-fit: contain;
}

@media (min-width: 621px) {
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-track {
    inline-size: 100%;
    margin-inline: 0;
    overflow: hidden;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-slide {
    box-sizing: border-box;
    padding-inline: 3.5rem;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-toggle {
    inline-size: 2.75rem;
    min-inline-size: 2.75rem;
    block-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-toggle::before {
    color: #fff;
    content: "\2016";
    font: 750 1rem/1 system-ui, sans-serif;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-toggle[aria-pressed="true"]::before {
    content: "\25b6";
  }
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-arrow {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid rgb(255 255 255 / 76%);
  background: rgb(35 48 57 / 76%);
  box-shadow: none;
  backdrop-filter: none;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-arrow.is-prev {
  inset-inline-start: 0.75rem;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-arrow.is-next {
  inset-inline-end: 0.75rem;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-toggle {
  inset-inline-end: 0.75rem;
  inset-block-end: 0.65rem;
  min-block-size: 2.25rem;
  border-radius: var(--ui-radius-control, 6px);
  background: rgb(35 48 57 / 82%);
  font-size: 13px;
}

/* Latest news and lookup form a compact utility band rather than a hero card. */
body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro {
  display: grid;
  grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.22fr);
  gap: 0;
  inline-size: 100%;
  max-inline-size: none;
  margin: 1.5rem 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ui02-line);
  border-radius: var(--ui-radius-card, 8px);
  background: var(--ui-surface, #fff);
  box-shadow: none;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro::before,
body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro::after {
  display: none;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .public-home-intro-primary,
body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .public-home-word-lookup {
  min-inline-size: 0;
  padding: 1.5rem;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .public-home-intro-primary {
  border-inline-end: 1px solid var(--ui02-line);
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .public-home-intro-primary:has(.public-home-live-empty) {
  display: none;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) {
  display: block;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .public-home-word-lookup {
  margin: 0;
  border: 0;
  border-inline-start: 4px solid var(--ui02-accent);
  border-radius: 0;
  background: var(--ui02-accent-soft);
  box-shadow: none;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .public-home-word-lookup {
  display: grid;
  grid-template-columns: minmax(12rem, 0.65fr) minmax(24rem, 1.35fr);
  grid-template-areas:
    "heading form"
    "heading feedback"
    "heading report";
  gap: 0.25rem 2rem;
  align-items: end;
  inline-size: 100%;
  padding: 1.25rem 1.5rem;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .public-home-word-lookup > :first-child {
  grid-area: heading;
  align-self: center;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .home-word-lookup-form {
  grid-area: form;
  margin: 0;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .home-word-lookup-feedback {
  grid-area: feedback;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .pinyin-error-report-entry {
  grid-area: report;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .public-home-word-lookup :is(h2, h3) {
  font-size: 1.375rem;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .public-home-word-lookup p {
  color: var(--ui02-muted);
  font-size: 15px;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .home-word-lookup-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .home-word-lookup-form :is(input, .button) {
  min-block-size: 3rem;
}

/* Content sections share one readable rhythm without nested section cards. */
body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-home-sections {
  inline-size: min(calc(100% - 3rem), var(--ui02-content));
  max-inline-size: none;
  margin-inline: auto;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-home-sections > .public-section {
  inline-size: 100%;
  max-inline-size: none;
  padding: 3rem 0;
  border: 0;
  border-block-end: 1px solid var(--ui02-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.78fr);
  gap: 1.25rem 2rem;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries > .section-title,
body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries > .school-practice-search {
  margin: 0;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries > .textbook-groups {
  grid-column: 1 / -1;
  gap: 1.5rem;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .textbook-group:has(.empty-state):not(:has(.course-cover-card)) {
  display: none;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .textbook-group > .home-course-grid {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .textbook-group > .home-course-grid:has(> .course-cover-card:only-child) {
  grid-template-columns: minmax(0, 48rem);
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .course-cover-card {
  min-block-size: 0;
  border: 1px solid var(--ui02-line);
  border-radius: var(--ui-radius-card, 8px);
  background: var(--ui-surface, #fff);
  box-shadow: none;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .home-course-grid > .course-cover-card:only-child {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  align-items: stretch;
  inline-size: 100%;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .home-course-grid > .course-cover-card:only-child .course-cover-media {
  block-size: 100%;
  min-block-size: 8.5rem;
  aspect-ratio: auto;
  background: #edf2f1;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .course-cover-media img {
  object-fit: contain;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .course-cover-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.25rem;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .course-cover-copy strong {
  font-size: 1.125rem;
}

/* Voice topics read as a two-column action list instead of four equal feature cards. */
body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-voice-practice .public-voice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-voice-practice .voice-topic-card:nth-child(n) {
  min-block-size: 6.75rem;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1rem;
  border: 0;
  border-block-start: 1px solid var(--ui02-line);
  border-radius: 0;
  padding: 1rem 0;
  background: transparent;
  box-shadow: none;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-voice-practice .voice-topic-card:nth-child(n)::before {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--ui-radius-control, 6px);
  background: #f8e9e6;
  color: #a94237;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-voice-practice .voice-topic-card:nth-child(2)::before {
  background: #e7f0f5;
  color: #35657d;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-voice-practice .voice-topic-card:nth-child(3)::before {
  background: #eef2e7;
  color: #5d703f;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-voice-practice .voice-topic-card:nth-child(4)::before {
  background: var(--ui02-accent-soft);
  color: var(--ui02-accent);
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-voice-practice .voice-topic-card:is(:hover, :focus-visible) {
  transform: none;
  background: transparent;
  color: var(--ui02-accent);
  box-shadow: inset 3px 0 0 var(--ui02-accent);
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-voice-practice .voice-topic-card > span {
  font-size: 14px;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-home-sections .public-live-section .panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-social-preview:has(.module-entry-card.is-muted):not(:has(a[href], .module-entry-card:not(.is-muted))),
body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-home-ad-disclaimer:not(:has(iframe, ins, img, picture, video, object, a[href], [data-ad-filled="true"])) {
  display: none;
}

@media (max-width: 900px) {
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #auth-view,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-home-sections {
    inline-size: min(calc(100% - 2rem), var(--ui02-content));
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .public-home-intro-primary {
    border-inline-end: 0;
    border-block-end: 1px solid var(--ui02-line);
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries > .textbook-groups {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  body[data-role="public"][data-page-module="home"]:not([data-shell]) main {
    padding-block-end: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-block-end: calc(132px + env(safe-area-inset-bottom, 0px));
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #auth-view {
    inline-size: 100%;
    margin-block-start: 0;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner {
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-viewport {
    aspect-ratio: 1;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-arrow {
    inset-block-start: 0.75rem;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    transform: none;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-arrow.is-prev {
    inset-inline: auto 4rem;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-arrow.is-next {
    inset-inline: auto 0.75rem;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-toggle {
    inset-inline-end: 0.5rem;
    inset-block-end: 0.5rem;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-home-sections {
    inline-size: calc(100% - 2rem);
    margin-inline: auto;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro {
    inline-size: calc(100% - 4rem) !important;
    margin-inline: 1rem auto;
    margin-block-start: 1rem;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .public-home-word-lookup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .public-home-word-lookup > :first-child,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .public-home-word-lookup > *,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .home-word-lookup-form,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .home-word-lookup-feedback,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .pinyin-error-report-entry {
    grid-area: auto;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .public-home-intro-primary,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .public-home-word-lookup,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .intro-panel.public-home-intro:has(.public-home-intro-primary .public-home-live-empty) .public-home-word-lookup {
    padding: 1.25rem 1rem;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main :is(.home-word-lookup-feedback, .pinyin-error-report-entry) {
    padding-inline-end: 3.75rem;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) .whatsapp-floating-contact {
    inset-inline-end: max(0px, env(safe-area-inset-right, 0px));
    inset-block-end: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .home-word-lookup-form > div,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .school-practice-search {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #main .home-word-lookup-form .button,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .school-practice-search .button {
    inline-size: 100%;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-home-sections > .public-section {
    padding-block: 2.25rem;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .textbook-group > .home-course-grid,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .textbook-group > .home-course-grid:has(> .course-cover-card:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .home-course-grid > .course-cover-card:only-child {
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .home-course-grid > .course-cover-card:only-child .course-cover-media {
    min-block-size: 7.5rem;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-practice-entries .course-cover-copy {
    padding: 1rem;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-voice-practice .public-voice-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body[data-role="public"][data-page-module="home"]:not([data-shell]) #public-voice-practice .voice-topic-card:nth-child(n) {
    min-block-size: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-role="public"][data-page-module="home"]:not([data-shell]) #home-banner .home-banner-track,
  body[data-role="public"][data-page-module="home"]:not([data-shell]) :is(.course-cover-card, .voice-topic-card) {
    transition: none;
  }
}