/* YanYan type system lock - loaded last.
   This file is the single source of truth for typography.

   Requested type contract:
   - Brand wordmark "阎言有关系": YanYanHand.
   - Function/page/test titles, body, buttons, nav, forms: YanYanBrand.
   - Small seals/tags: YanYanAlt.
   - Emotional observation snippets: YanYanHand.
*/

@font-face {
  font-family: "YYBrandLock";
  src: url("/assets/fonts/ShiShiRuYi-XiaoYaCiLi-2.ttf") format("truetype"),
    url("../fonts/ShiShiRuYi-XiaoYaCiLi-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YYHandLock";
  src: url("/assets/fonts/Slidefu-Regular-2.ttf") format("truetype"),
    url("../fonts/Slidefu-Regular-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YYAltLock";
  src: url("/assets/fonts/ShanHaiBanRuoTiW-2.ttf") format("truetype"),
    url("../fonts/ShanHaiBanRuoTiW-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root,
html,
body,
#app,
#app[data-view] {
  --font-hand: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-brand: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-alt: "YYAltLock", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: var(--font-alt);
  --font-body: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-serif: var(--font-brand);
  --font-display: var(--font-brand);

  --yy-brand-title: clamp(28px, 2vw, 38px);
  --yy-nav-title: clamp(13px, 0.82vw, 15px);
  --yy-home-node-title: clamp(22px, 1.55vw, 29px);
  --yy-home-node-main-title: clamp(24px, 1.75vw, 32px);
  --yy-page-title: clamp(20px, 1.12vw, 24px);
  --yy-section-title: clamp(17px, 0.9vw, 20px);
  --yy-card-title: clamp(18px, 0.94vw, 21px);
  --yy-long-title: clamp(17px, 0.86vw, 19px);
  --yy-body: clamp(12.8px, 0.68vw, 13.8px);
  --yy-small-body: clamp(11px, 0.58vw, 12px);
  --yy-button: clamp(11.5px, 0.62vw, 12.5px);
  --yy-tag: clamp(9.2px, 0.48vw, 10.2px);
  --yy-hand: clamp(20px, 1.12vw, 25px);
}

/* The older base styles set font variables on #app with high specificity.
   Lock them here too so functional pages cannot fall back to old families. */
html body #app.surface[data-view],
html body #app[data-view] {
  --font-hand: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-brand: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-alt: "YYAltLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-ink: "YYAltLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-body: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-sans: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-serif: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-display: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

html body #app[data-view],
html body #app[data-view] * {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

html body #app[data-view] :is(
  input,
  textarea,
  select,
  button,
  .button,
  .btn,
  .floating-function-dock,
  .page-nav,
  .topbar-links
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

/* Brand mark only. */
html body #app[data-view] :is(
  .wordmark,
  .site-wordmark,
  .brand-wordmark,
  [data-brand-wordmark]
) {
  font-family: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-nav-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.018em !important;
}

html body #app[data-view] :is(
  .home-brand-title,
  .brand-title-main,
  .wordmark-main,
  .hero-brand-title
) {
  font-family: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-brand-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.018em !important;
}

/* Home galaxy entries. */
html body #app[data-view="home"] :is(
  .feature-node strong,
  .feature-node-title,
  .galaxy-node-title
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-home-node-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em !important;
}

html body #app[data-view="home"] :is(
  .feature-node.main strong,
  .feature-node.primary strong,
  .galaxy-node-main .galaxy-node-title
) {
  font-size: var(--yy-home-node-main-title) !important;
}

html body #app[data-view="home"] :is(
  .feature-node em,
  .feature-node p,
  .galaxy-node-copy
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-body) !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
}

html body #app[data-view="home"] :is(
  .feature-node b,
  .galaxy-node-button,
  .feature-node button,
  .feature-node .button
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-button) !important;
  line-height: 1.12 !important;
}

/* Functional pages: compact titles so the user sees content immediately. */
html body #app[data-view] :is(
  h1,
  .page-title,
  .view-title,
  .library-title,
  .observation-title,
  .activity-title,
  .creator-title,
  .service-title,
  .result-title,
  .tests-page-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .listening-progress-card h1,
  .observation-card-result h1
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-page-title) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.008em !important;
}

html body #app[data-view] :is(
  h2,
  .section-heading h2,
  .profile-section h2,
  .observation-intro-card h2,
  .observation-echo-section h2,
  .daily-reflection h2,
  .result-section h2,
  .admin-section h2
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-section-title) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.006em !important;
}

html body #app[data-view] :is(
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .event-card h3,
  .activity-card h3,
  .observation-card h2,
  .observation-card h3,
  .content-card h3,
  .listening-card h3,
  .service-card h3,
  .form-card h2,
  .form-card h3
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-card-title) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.004em !important;
}

/* Long titles need a lower ceiling so they stay inside cards. */
html body #app[data-view] :is(
  .test-card h2,
  .test-card-title,
  .event-card h3,
  .activity-card h3,
  .observation-card h2,
  .observation-card h3
) {
  font-size: var(--yy-long-title) !important;
  overflow-wrap: anywhere !important;
}

html body #app[data-view] :is(
  p,
  li,
  dt,
  dd,
  label,
  input,
  textarea,
  select,
  .page-subtitle,
  .section-heading p,
  .tests-page-view p,
  .test-card p,
  .test-card dd,
  .test-card-fit,
  .event-card p,
  .event-card dd,
  .event-card li,
  .activity-card p,
  .activity-card dd,
  .activity-card li,
  .observation-card p,
  .observation-arrived-note,
  .observation-intro-card p,
  .observation-echo-section p,
  .listening-progress-card p,
  .listening-boundary,
  .profile-section p,
  .result-section p,
  .video-context-note p,
  .form-field,
  .form-field input,
  .form-field textarea
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-body) !important;
  line-height: 1.52 !important;
  letter-spacing: 0 !important;
}

html body #app[data-view] :is(
  button,
  .button,
  .btn,
  .test-card-actions a,
  .event-card-actions a,
  .floating-function-dock button,
  .page-nav button,
  .topbar-links button,
  nav a,
  input::placeholder,
  textarea::placeholder
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-button) !important;
  line-height: 1.14 !important;
  letter-spacing: 0.004em !important;
}

/* Brand button appears in the nav, so restore its special handwritten role
   after the generic button rule. */
html body #app[data-view] :is(
  button.wordmark,
  .wordmark,
  .site-wordmark,
  .brand-wordmark,
  [data-brand-wordmark]
) {
  font-family: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-nav-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.018em !important;
}

html body #app[data-view] :is(
  .home-brand-title,
  .brand-title-main,
  .wordmark-main,
  .hero-brand-title
) {
  font-family: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-brand-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.018em !important;
}

html body #app[data-view] :is(
  .eyebrow,
  .tag,
  .pill,
  .pill-tag,
  .soft-tag,
  .badge,
  .event-type,
  .activity-type,
  .activity-status,
  .test-card-top,
  .test-card-top span,
  .test-meta-row,
  .test-meta-row span,
  .test-video-chip,
  .observation-type,
  .observation-number,
  .observation-source,
  .same-result-badge,
  .echo-featured,
  .form-hint,
  .platform-pill,
  .seal,
  .small-seal,
  .meta-label,
  .nav-label
) {
  font-family: "YYAltLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-tag) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.02em !important;
}

html body #app[data-view] :is(
  .observation-main-text.original,
  .daily-care-line,
  .emotional-line,
  .hand-note,
  .result-reminder,
  .creator-note,
  .echo-creator-note
) {
  font-family: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-hand) !important;
  line-height: 1.38 !important;
  letter-spacing: 0.01em !important;
}

html body #app[data-view] .observation-main-text.quote {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: clamp(18px, 1vw, 23px) !important;
  line-height: 1.42 !important;
}

/* Keep functional pages compact and content-first. */
html body #app[data-view]:not([data-view="home"]) :is(
  .view,
  .tests-page-view,
  .daily-card-view,
  .activities-view,
  .observations-view,
  .creator-profile-view,
  .listening-service-view
) {
  padding-top: clamp(30px, 2.5vw, 44px) !important;
}

html body #app[data-view] :is(
  .feature-page-hero,
  .observations-hero,
  .activities-hero,
  .observation-card-result,
  .listening-progress-card,
  .profile-hero
) {
  padding: clamp(18px, 2vw, 30px) !important;
  margin-bottom: clamp(14px, 1.8vw, 24px) !important;
}

html body #app[data-view="library"] .testing-progress-panel {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.5fr) !important;
  gap: clamp(14px, 1.8vw, 24px) !important;
  padding: clamp(16px, 2vw, 26px) !important;
}

html body #app[data-view="library"] .testing-progress-panel h2 {
  font-size: clamp(17px, 0.95vw, 20px) !important;
}

html body #app[data-view="library"] .section-heading {
  grid-template-columns: minmax(210px, 0.44fr) minmax(300px, 1fr) !important;
  gap: clamp(18px, 2.4vw, 42px) !important;
  margin-block: clamp(18px, 2.2vw, 34px) clamp(14px, 1.8vw, 24px) !important;
}

html body #app[data-view="library"] .section-heading h2 {
  font-size: var(--yy-page-title) !important;
}

html body #app[data-view="library"] .library-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

html body #app[data-view="library"] .test-card {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: clamp(20px, 2.1vw, 30px) !important;
}

html body #app[data-view="home"] .feature-node {
  min-width: 0 !important;
  overflow: visible !important;
}

html body #app[data-view="home"] .feature-node :is(strong, em, b) {
  display: block !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html body #app[data-view="library"] .test-card *,
html body #app[data-view="activities"] .event-card *,
html body #app[data-view="observations"] .observation-card * {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body #app[data-view="library"] .test-card-visual {
  min-height: clamp(86px, 7vw, 118px) !important;
  margin-bottom: clamp(10px, 1.2vw, 16px) !important;
}

html body #app[data-view] :is(
  .test-card,
  .event-card,
  .activity-card,
  .observation-card,
  .profile-section,
  .listening-progress-card,
  .observation-card-result
) {
  overflow: hidden !important;
}

@media (max-width: 900px) {
  :root,
  html body,
  html body #app,
  html body #app[data-view] {
    --yy-brand-title: clamp(27px, 8vw, 38px);
    --yy-nav-title: 13px;
    --yy-home-node-title: clamp(22px, 6.2vw, 30px);
    --yy-home-node-main-title: clamp(24px, 6.8vw, 33px);
    --yy-page-title: clamp(20px, 5.4vw, 26px);
    --yy-section-title: clamp(17px, 4.5vw, 21px);
    --yy-card-title: clamp(18px, 4.8vw, 22px);
    --yy-long-title: clamp(17px, 4.5vw, 20px);
    --yy-body: 12.8px;
    --yy-small-body: 11px;
    --yy-button: 11.5px;
    --yy-tag: 9.2px;
    --yy-hand: clamp(20px, 5.4vw, 25px);
  }

  html body #app[data-view="library"] .testing-progress-panel,
  html body #app[data-view="library"] .section-heading {
    grid-template-columns: 1fr !important;
  }

  html body #app[data-view="library"] .library-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Final typography guard. Keep this block last so legacy component styles cannot
   pull headings/buttons back into mixed system fonts or oversized scales. */
html body #app[data-view] :is(
  .wordmark.wordmark,
  button.wordmark.wordmark,
  .site-topbar .wordmark,
  .site-wordmark,
  .brand-wordmark,
  [data-brand-wordmark]
) {
  font-family: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-nav-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.018em !important;
  font-weight: 400 !important;
}

html body #app[data-view="home"] :is(
  .feature-node strong,
  .feature-node-title,
  .feature-node h2,
  .feature-node h3
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-home-node-title) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.018em !important;
  font-weight: 400 !important;
}

html body #app[data-view="home"] :is(
  .feature-node-scene strong,
  .feature-node-scene h2,
  .feature-node-scene h3
) {
  font-size: var(--yy-home-node-main-title) !important;
}

html body #app[data-view]:not([data-view="home"]) :is(
  h1,
  .page-title,
  .view-title,
  .tests-page-title,
  .daily-card-title,
  .observation-title,
  .activities-title,
  .profile-title,
  .listening-title
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-page-title) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.018em !important;
  font-weight: 400 !important;
}

html body #app[data-view]:not([data-view="home"]) :is(
  h2,
  .section-title,
  .section-heading h2,
  .panel-title,
  .module-title
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-section-title) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.014em !important;
  font-weight: 400 !important;
}

html body #app[data-view] :is(
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .event-card h2,
  .event-card h3,
  .activity-card h2,
  .activity-card h3,
  .event-card-title,
  .activity-card-title,
  .observation-card h2,
  .observation-card h3,
  .observation-card-title,
  .service-card h2,
  .service-card h3
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-card-title) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.012em !important;
  font-weight: 400 !important;
  overflow-wrap: anywhere !important;
}

html body #app[data-view] :is(
  .test-card h2,
  .test-card-title,
  .event-card h2,
  .event-card-title,
  .activity-card h2,
  .activity-card-title,
  .observation-card h2,
  .observation-card-title
) {
  font-size: var(--yy-long-title) !important;
}

html body #app[data-view] :is(
  p,
  li,
  dd,
  dt,
  label,
  input,
  textarea,
  select,
  .body-copy,
  .description,
  .section-heading p,
  .test-card p,
  .test-card dd,
  .event-card p,
  .event-card dd,
  .activity-card p,
  .activity-card dd,
  .observation-card p,
  .profile-section p,
  .listening-progress-card p
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-body) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.006em !important;
  font-weight: 400 !important;
}

html body #app[data-view] :is(
  button,
  .button,
  .btn,
  a.button,
  .test-card-actions a,
  .event-card-actions a,
  .activity-card-actions a,
  .floating-function-dock button,
  .page-nav button,
  .topbar-links button,
  nav a
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-button) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.006em !important;
  font-weight: 400 !important;
}

html body #app[data-view] :is(
  .eyebrow,
  .tag,
  .pill,
  .pill-tag,
  .soft-tag,
  .badge,
  .event-type,
  .activity-type,
  .activity-status,
  .test-card-top,
  .test-card-top span,
  .test-meta-row,
  .test-meta-row span,
  .test-video-chip,
  .observation-type,
  .observation-number,
  .observation-source,
  .same-result-badge,
  .platform-pill,
  .seal,
  .small-seal,
  .meta-label,
  .nav-label
) {
  font-family: "YYAltLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-tag) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.016em !important;
  font-weight: 400 !important;
}

html body #app[data-view] :is(
  .observation-main-text.original,
  .daily-care-line,
  .emotional-line,
  .hand-note,
  .result-reminder,
  .creator-note,
  .echo-creator-note
) {
  font-family: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-hand) !important;
  line-height: 1.34 !important;
  letter-spacing: 0.01em !important;
  font-weight: 400 !important;
}

html body #app[data-view] :is(.test-card, .event-card, .activity-card, .observation-card) {
  overflow: hidden !important;
}

/* High-specificity page locks for legacy rules that repeat many times in older
   stylesheets. These are intentionally explicit so functional pages stay calm. */
body[data-view] html body #app[data-view],
body[data-view] #app[data-view] {
  --yy-page-title: clamp(20px, 1.12vw, 24px) !important;
  --yy-section-title: clamp(17px, 0.9vw, 20px) !important;
  --yy-card-title: clamp(18px, 0.94vw, 21px) !important;
  --yy-long-title: clamp(17px, 0.86vw, 19px) !important;
  --yy-body: clamp(12.8px, 0.68vw, 13.8px) !important;
  --yy-button: clamp(11.5px, 0.62vw, 12.5px) !important;
  --yy-tag: clamp(9.2px, 0.48vw, 10.2px) !important;
}

body[data-view="library"] #app[data-view="library"] .tests-page-view .testing-progress-panel h2,
body[data-view="library"] #app[data-view="library"] .tests-page-view .section-heading h2,
body[data-view="activities"] #app[data-view="activities"] .activities-view h1,
body[data-view="activities"] #app[data-view="activities"] .activities-view .activities-title,
body[data-view="daily"] #app[data-view="daily"] .daily-card-view h1,
body[data-view="daily"] #app[data-view="daily"] .daily-card-view .daily-card-title,
body[data-view="observations"] #app[data-view="observations"] .observations-view h1,
body[data-view="profile"] #app[data-view="profile"] .creator-profile-view h1,
body[data-view="listening"] #app[data-view="listening"] .listening-service-view h1 {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-page-title) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.014em !important;
  font-weight: 400 !important;
}

body[data-view="library"] #app[data-view="library"] .tests-page-view .recommended-tests .section-heading h2 {
  font-size: var(--yy-page-title) !important;
}

body[data-view="library"] #app[data-view="library"] .tests-page-view .recommended-tests .test-card h2,
body[data-view="library"] #app[data-view="library"] .tests-page-view .library-grid .test-card h2,
body[data-view="library"] #app[data-view="library"] .tests-page-view .library-grid .test-card h3,
body[data-view="activities"] #app[data-view="activities"] .activities-view .event-card h2,
body[data-view="activities"] #app[data-view="activities"] .activities-view .event-card h3,
body[data-view="activities"] #app[data-view="activities"] .activities-view .activity-card h2,
body[data-view="activities"] #app[data-view="activities"] .activities-view .activity-card h3,
body[data-view="observations"] #app[data-view="observations"] .observations-view .observation-card h2,
body[data-view="observations"] #app[data-view="observations"] .observations-view .observation-card h3,
body[data-view="listening"] #app[data-view="listening"] .listening-service-view .service-card h2,
body[data-view="listening"] #app[data-view="listening"] .listening-service-view .service-card h3 {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-long-title) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.01em !important;
  font-weight: 400 !important;
  overflow-wrap: anywhere !important;
}

body[data-view] #app[data-view] .floating-function-dock button,
body[data-view] #app[data-view] .page-nav button,
body[data-view] #app[data-view] nav button {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-button) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.004em !important;
  font-weight: 400 !important;
}

body[data-view] #app[data-view] :is(.tag, .pill, .badge, .test-meta-row span, .test-card-top span, .event-type, .activity-type, .platform-pill, .eyebrow) {
  font-family: "YYAltLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-tag) !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
}

/* Final inheritance cleanup: keep page shells from leaking older font aliases. */
html body :is(#app, .app-shell, .surface, .feature-page-view, .page-shell, .tests-page-view, .daily-card-view, .activities-view, .creator-profile-view, .listening-service-view) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

html body :is(.wordmark, .brand-wordmark, .site-brand, .hero-brand) {
  font-family: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

html body :is(.test-card-actions, .event-card-actions, .activity-card-actions, .form-actions, .page-actions) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

html body :is(.tag, .pill, .badge, .eyebrow, .event-type, .activity-type, .platform-pill, .test-meta-row, .test-card-top) {
  font-family: "YYAltLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

/* 2026-06-15 v49: final feature-page type rhythm lock.
   This block intentionally sits last so future feature edits do not leak
   random serif/system fonts or oversized headings back into the UI. */
html body #app[data-view] {
  --yy-page-title: clamp(28px, 2.1vw, 38px) !important;
  --yy-section-title: clamp(22px, 1.45vw, 28px) !important;
  --yy-card-title: clamp(24px, 1.7vw, 32px) !important;
  --yy-body: clamp(15px, 0.92vw, 17px) !important;
  --yy-small-body: clamp(13px, 0.76vw, 14px) !important;
  --yy-button: clamp(14px, 0.84vw, 16px) !important;
  --yy-tag: clamp(11px, 0.68vw, 13px) !important;
  --yy-hand-line: clamp(25px, 1.85vw, 36px) !important;
}

html body #app[data-view] :where(
  p,
  li,
  dd,
  span,
  a,
  button,
  input,
  textarea,
  select,
  label,
  small
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

html body #app[data-view] :is(
  h1,
  h2,
  h3,
  h4,
  .page-title,
  .section-title,
  .feature-page-title,
  .test-card-title,
  .event-card h2,
  .event-card h3,
  .activity-card h2,
  .activity-card h3,
  .observation-card h2,
  .observation-card h3,
  .observation-card-result h1,
  .observation-echo-section .section-heading h2,
  .listening-progress-title
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  color: var(--color-deep-sea, #2A4561) !important;
  letter-spacing: 0.018em !important;
}

html body #app[data-view] :is(
  h1,
  .page-title,
  .feature-page-title,
  .activities-title,
  .daily-card-title
) {
  font-size: var(--yy-page-title) !important;
  line-height: 1.18 !important;
}

html body #app[data-view] :is(
  .section-heading h2,
  .observation-echo-section .section-heading h2,
  .listening-progress-title
) {
  font-size: var(--yy-section-title) !important;
  line-height: 1.24 !important;
}

html body #app[data-view] :is(
  .test-card h2,
  .test-card h3,
  .event-card h2,
  .event-card h3,
  .activity-card h2,
  .activity-card h3,
  .observation-card h2,
  .observation-card h3
) {
  font-size: var(--yy-card-title) !important;
  line-height: 1.24 !important;
  letter-spacing: 0.014em !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

html body #app[data-view] :is(
  .eyebrow,
  .observation-number,
  .tag,
  .pill,
  .badge,
  .test-badge,
  .test-status,
  .test-meta-row span,
  .test-card-top span,
  .event-type,
  .activity-type,
  .platform-pill,
  .soft-tag,
  .echo-list-header,
  .echo-card-meta,
  dt
) {
  font-family: "YYAltLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-tag) !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: 0.025em !important;
}

html body #app[data-view] :is(
  .button,
  button,
  input,
  textarea,
  select,
  .floating-function-dock button,
  .page-nav button
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-button) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

html body #app[data-view] :is(
  p,
  li,
  dd,
  .section-heading > p,
  .test-card-description,
  .event-card p,
  .activity-card p,
  .observation-card p,
  .listening-progress-card p,
  .echo-form-card p,
  .echo-list-card p
) {
  font-size: var(--yy-body) !important;
  line-height: 1.78 !important;
  letter-spacing: 0.01em !important;
}

html body #app[data-view="daily-observation"] :is(
  .observation-main-text.original,
  .observation-main-text.quote
),
html body #app[data-view] :is(
  .handwritten-note,
  .emotional-line,
  .result-reminder,
  .creator-note-text
) {
  font-family: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-hand-line) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: 0.028em !important;
}

html body #app[data-view="daily-observation"] :is(
  .observation-arrived-note,
  .observation-prompt-strip,
  .echo-public-option,
  .echo-notice,
  .echo-empty
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-body) !important;
}

/* 2026-06-15 v50: strict typography contract.
   Keep the whole site on three roles only:
   YanYanBrand for readable UI, YanYanHand for emotional lines,
   YanYanAlt for tiny seals/tags. No loose Songti/system serif fallbacks. */
:root,
html,
body,
#app,
#app[data-view] {
  --font-hand: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-brand: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-alt: "YYAltLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-body: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-serif: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-sans: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;

  --yy-page-title: clamp(27px, 2vw, 38px);
  --yy-section-title: clamp(22px, 1.45vw, 30px);
  --yy-card-title: clamp(23px, 1.65vw, 32px);
  --yy-feature-title: clamp(25px, 1.9vw, 36px);
  --yy-body: clamp(15px, 0.86vw, 17px);
  --yy-small-body: clamp(12px, 0.68vw, 13.5px);
  --yy-button: clamp(13px, 0.78vw, 15px);
  --yy-tag: clamp(10.5px, 0.64vw, 12.5px);
  --yy-hand-line: clamp(24px, 1.85vw, 36px);
}

html body #app[data-view],
html body #app[data-view] :is(
  p,
  li,
  span,
  a,
  button,
  input,
  textarea,
  select,
  label,
  dd,
  small,
  strong,
  em,
  b,
  .button,
  .btn,
  .tip,
  .body-copy,
  .card-copy,
  .section-copy
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

html body #app[data-view] :is(
  p,
  li,
  dd,
  label,
  input,
  textarea,
  select,
  .tip,
  .section-heading > p,
  .feature-page-hero p,
  .test-card-description,
  .test-card p,
  .event-card p,
  .activity-card p,
  .observation-card p,
  .listening-progress-card p,
  .echo-form-card p,
  .echo-list-card p,
  .observation-arrived-note,
  .observation-prompt-strip
) {
  font-size: var(--yy-body) !important;
  line-height: 1.72 !important;
  letter-spacing: 0.008em !important;
  color: rgba(30, 26, 26, 0.76) !important;
}

html body #app[data-view] :is(
  h1,
  h2,
  h3,
  h4,
  .page-title,
  .section-title,
  .section-heading h1,
  .section-heading h2,
  .feature-page-hero h1,
  .feature-page-hero h2,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .test-card h2,
  .test-card h3,
  .event-card h2,
  .event-card h3,
  .activity-card h2,
  .activity-card h3,
  .observation-card h2,
  .observation-card h3,
  .listening-progress-card h1,
  .listening-progress-card h2,
  .observation-title,
  .echo-list-header h2,
  .echo-form-card h2
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  letter-spacing: 0.012em !important;
  color: #243e56 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-wrap: balance;
}

html body #app[data-view] :is(
  .feature-page-hero h1,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-progress-card h1,
  .section-heading h1,
  .page-title
) {
  font-size: var(--yy-page-title) !important;
}

html body #app[data-view] :is(
  .section-heading h2,
  .feature-page-hero h2,
  .echo-list-header h2,
  .echo-form-card h2,
  .section-title
) {
  font-size: var(--yy-section-title) !important;
}

html body #app[data-view] :is(
  .test-card h2,
  .test-card h3,
  .event-card h2,
  .event-card h3,
  .activity-card h2,
  .activity-card h3,
  .observation-card h2,
  .observation-card h3,
  .listening-progress-card h2,
  .observation-title
) {
  font-size: var(--yy-card-title) !important;
}

html body #app[data-view] :is(
  .eyebrow,
  .tag,
  .pill,
  .badge,
  .test-badge,
  .test-status,
  .test-meta-row span,
  .test-card-top span,
  .event-type,
  .activity-type,
  .event-status,
  .event-price,
  .platform-pill,
  .soft-tag,
  .echo-list-header,
  .echo-card-meta,
  .observation-number,
  dt
) {
  font-family: "YYAltLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-tag) !important;
  line-height: 1.28 !important;
  letter-spacing: 0.028em !important;
  color: #2a4561 !important;
}

html body #app[data-view] :is(
  .button,
  button,
  .floating-function-dock button,
  .page-nav button,
  .test-card-actions a,
  .event-card-actions a
) {
  font-family: "YYBrandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: var(--yy-button) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em !important;
}

html body #app[data-view] :is(
  .site-brand-mark,
  .brand-title,
  .home-brand-title,
  .wordmark-main,
  .hero-brand-title,
  .observation-main-text.original,
  .observation-main-text.quote,
  .handwritten-note,
  .hand-note,
  .emotional-line,
  .result-reminder,
  .creator-note-text
) {
  font-family: "YYHandLock", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 400 !important;
}

html body #app[data-view="daily-observation"] :is(
  .observation-main-text.original,
  .observation-main-text.quote
) {
  font-size: var(--yy-hand-line) !important;
  line-height: 1.48 !important;
  letter-spacing: 0.018em !important;
}