/* NANATALE public experience authority.
   Page composition lives in scoped CSS Modules. This file owns only shared
   experience tokens, safe legacy fallbacks, and internal dashboard continuity. */

@layer nanatale-legacy-public {
  .public-page,
  .public-page[data-public-skin] {
    --experience-bg: #070807;
    --experience-surface: #101112;
    --experience-surface-raised: #171719;
    --experience-text: #f6e9cf;
    --experience-muted: #b8ad9d;
    --experience-line: rgba(246, 233, 207, .24);
    --experience-line-strong: rgba(246, 233, 207, .46);
    --experience-primary: #ff4f78;
    --experience-primary-ink: #21040c;
    --experience-card-radius: 8px;
    --experience-control-radius: 6px;
    --experience-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    --experience-focus: #ff9ab1;
    --nnt-display-font: "Noto Serif Thai", Georgia, "Times New Roman", serif;
    --nnt-label-font: ui-monospace, "SFMono-Regular", Consolas, monospace;
    --public-bg: #070807;
    --public-surface: #101112;
    --public-surface-2: #171719;
    --public-line: rgba(246, 233, 207, .24);
    --public-text: #f6e9cf;
    --public-muted: #b8ad9d;
    --public-pink: #ff4f78;
    --accent: var(--experience-primary);
    --accent-soft: rgba(255, 79, 120, .14);
    min-width: 0;
    color: var(--experience-text);
    background-color: var(--experience-bg);
  }

  .public-page[data-public-skin] :is(h1, h2) {
    font-family: var(--nnt-display-font);
    font-weight: 760;
  }

  /* Thai uses one modern, loopless family in both public experiences. Keep the
     Standard serif voice available for non-Thai editorial headings only. */
  html:lang(th) .public-page[data-public-skin]:not(.admin-internal, .creator-dashboard-internal) {
    --nnt-display-font: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
    --nnt-label-font: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  }

  html:lang(th) .public-page[data-public-skin]:not(.admin-internal, .creator-dashboard-internal) :is(h1, h2) {
    letter-spacing: 0;
  }

  .public-page[data-public-skin="home"] { --public-art: url("/skins/v2/home-header-mobile.avif"); }
  .public-page[data-public-skin="works"] { --public-art: url("/skins/v2/works-header-mobile.avif"); }
  .public-page[data-public-skin="contact"] { --public-art: url("/skins/v2/contact-header-mobile.avif"); }
  .public-page[data-public-skin="legal"] { --public-art: url("/skins/v2/legal-header-mobile.avif"); }
  .public-page[data-public-skin="system"] { --public-art: url("/nanatale-story-gateway-optimized.avif"); }

  .public-page[data-public-skin] .public-canvas[data-content-layer="live-ui"] {
    color: var(--experience-text);
    background: transparent;
  }

  .public-page[data-public-skin] :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--experience-focus);
    outline-offset: 3px;
  }

  .public-page :is(a, button, input, select, textarea) { touch-action: manipulation; }
  .public-page :is(button, [role="button"]):not(:disabled):active,
  .public-page a:active { filter: brightness(.94); }

  .public-ui-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.18em;
  }

  .public-ui-icon-loading { animation: public-ui-icon-spin .8s linear infinite; }
  @keyframes public-ui-icon-spin { to { transform: rotate(1turn); } }

  html[data-experience="kids"] .public-page[data-public-skin] {
    --experience-bg: #f8f1e6;
    --experience-surface: #fffdf8;
    --experience-surface-raised: #eef6ff;
    --experience-text: #173b5f;
    --experience-muted: #496d86;
    --experience-line: rgba(37, 99, 235, .34);
    --experience-line-strong: rgba(37, 99, 235, .72);
    --experience-primary: #2563eb;
    --experience-primary-ink: #fff;
    --experience-card-radius: 16px;
    --experience-control-radius: 12px;
    --experience-shadow: 0 16px 38px rgba(30, 78, 132, .14);
    --experience-focus: #174fb9;
    --nnt-display-font: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
    --public-bg: #f8f1e6;
    --public-surface: #fffdf8;
    --public-surface-2: #eef6ff;
    --public-line: rgba(37, 99, 235, .34);
    --public-text: #173b5f;
    --public-muted: #496d86;
    --public-pink: #2563eb;
    --accent: #2563eb;
    --accent-soft: rgba(37, 99, 235, .11);
    color: var(--experience-text);
    background-color: var(--experience-bg);
  }

  html[data-experience="kids"] .public-page[data-public-skin] :is(h1, h2) {
    font-family: var(--nnt-display-font);
    font-weight: 900;
  }

  /* Creator project dashboard is outside the public redesign. Keep its former
     material behavior while the public profile uses its own scoped module. */
  .public-page .creator-dashboard-shell {
    border: 1px solid var(--experience-line);
    border-radius: var(--experience-card-radius);
    background: rgba(7, 8, 7, .82);
    box-shadow: var(--experience-shadow);
  }

  .public-page .creator-dashboard-tabs button,
  .public-page .metric-chart button {
    min-height: 44px;
    border-color: var(--experience-line);
    border-radius: var(--experience-control-radius);
    color: var(--experience-muted);
    background: var(--experience-surface);
  }

  .public-page .creator-dashboard-tabs button.active,
  .public-page .metric-chart button.active {
    border-color: var(--experience-primary);
    color: var(--experience-primary-ink);
    background: var(--experience-primary);
  }

  .public-page .metric-chart-canvas { --metric-point-stroke: #0e120e; border-top-color: var(--experience-line); }
  .public-page .metric-grid-line { stroke: color-mix(in srgb, var(--experience-line) 72%, transparent); }
  .public-page .metric-axis-label { fill: var(--experience-muted); }
  .public-page .metric-chart-tooltip {
    border-color: var(--experience-line);
    border-radius: var(--experience-control-radius);
    color: var(--experience-text);
    background: rgba(7, 8, 7, .95);
  }

  html[data-experience="kids"] .public-page .creator-dashboard-shell {
    border-color: var(--experience-line);
    border-radius: 16px;
    color: var(--experience-text);
    background: rgba(255, 253, 248, .96);
  }
  html[data-experience="kids"] .public-page .metric-chart-tooltip {
    border-color: var(--experience-line);
    color: var(--experience-text);
    background: rgba(255, 253, 248, .98);
  }
  html[data-experience="kids"] .public-page .metric-chart-canvas { --metric-point-stroke: #fffdf8; }

  .public-page .deployment-label { display: none; }
  html[data-experience="kids"] .public-page.admin-internal[data-public-skin] .public-canvas[data-content-layer="live-ui"] {
    color: #f2f6ef;
    background: #080b09;
  }

  @media (prefers-reduced-motion: reduce) {
    .public-page,
    .public-page *,
    .public-page *::before,
    .public-page *::after {
      scroll-behavior: auto;
      animation-duration: .01ms;
      animation-iteration-count: 1;
      transition-duration: .01ms;
    }
  }
}

/* Public website material tokens. Page modules consume only this namespace. */
.public-page {
  /* Public artwork and chrome stay fluid on desktop while retaining a
     deliberate ultrawide cap. Reading/form measures remain separate below. */
  --nnt-canvas: 2400px;
  --nnt-editorial-canvas: 1320px;
  --nnt-reading-canvas: 1180px;
  --nnt-story-canvas: 1042px;
  --nnt-page-gutter: clamp(24px, 1.667vw, 40px);
  --nnt-bg: #070807;
  --nnt-surface: #101112;
  --nnt-surface-raised: #151617;
  --nnt-control-bg: rgba(9, 10, 11, .68);
  --nnt-control-line: rgba(246, 233, 207, .54);
  --nnt-text: #f6e9cf;
  --nnt-muted: #b8ad9d;
  --nnt-action: #ff4f78;
  --nnt-action-ink: #09090a;
  --nnt-focus: #ff4f78;
  --nnt-error: #ff899f;
  --nnt-control-radius: 6px;
  --nnt-content-radius: 8px;
  --nnt-radius-control: var(--nnt-control-radius);
  --nnt-radius-card: var(--nnt-content-radius);
  --nnt-radius-chip: 999px;
  --nnt-space-1: 4px;
  --nnt-space-2: 8px;
  --nnt-space-3: 12px;
  --nnt-space-4: 16px;
  --nnt-space-6: 24px;
  --nnt-space-8: 32px;
  --nnt-duration-standard: 150ms;
  --nnt-duration-emphasized: 200ms;
  --nnt-duration-normal: var(--nnt-duration-standard);
  --nnt-hero-scrim:
    linear-gradient(90deg, rgba(3, 7, 13, .99) 0 38%, rgba(3, 7, 13, .88) 52%, rgba(3, 7, 13, .58) 68%, rgba(3, 7, 13, .12) 100%),
    linear-gradient(0deg, rgba(3, 7, 13, .58), rgba(3, 7, 13, .08) 68%, transparent 100%);
  --nnt-hero-scrim-rtl:
    linear-gradient(270deg, rgba(3, 7, 13, .99) 0 38%, rgba(3, 7, 13, .88) 52%, rgba(3, 7, 13, .58) 68%, rgba(3, 7, 13, .12) 100%),
    linear-gradient(0deg, rgba(3, 7, 13, .58), rgba(3, 7, 13, .08) 68%, transparent 100%);
  /* Compatibility aliases consumed by public sections that have not yet
     migrated from the older token names. Keep these unlayered so experience
     selection cannot be shadowed by legacy globals. */
  --public-pink: #ff4f78;
  --public-text: #f6e9cf;
  --public-muted: #b8ad9d;
  --public-surface: #101112;
  --public-line: rgba(246, 233, 207, .24);
  color: var(--nnt-text);
  background-color: var(--nnt-bg);
  overflow-wrap: normal;
  word-break: normal;
}

html[data-experience="kids"] .public-page {
  --nnt-bg: #f8f1e6;
  --nnt-surface: #fffdf8;
  --nnt-surface-raised: #fff;
  --nnt-control-bg: rgba(255, 253, 248, .88);
  --nnt-control-line: rgba(37, 99, 235, .58);
  --nnt-text: #173b5f;
  --nnt-muted: #496d86;
  --nnt-action: #2563eb;
  --nnt-action-ink: #fff;
  --nnt-focus: #174fb9;
  --nnt-error: #b4233a;
  --nnt-control-radius: 12px;
  --nnt-content-radius: 16px;
  --nnt-hero-scrim:
    linear-gradient(90deg, rgba(255, 253, 248, .995) 0 40%, rgba(255, 253, 248, .94) 54%, rgba(239, 247, 255, .68) 72%, rgba(239, 247, 255, .16) 100%),
    linear-gradient(0deg, rgba(255, 253, 248, .7), rgba(255, 253, 248, .12) 70%, transparent 100%);
  --nnt-hero-scrim-rtl:
    linear-gradient(270deg, rgba(255, 253, 248, .995) 0 40%, rgba(255, 253, 248, .94) 54%, rgba(239, 247, 255, .68) 72%, rgba(239, 247, 255, .16) 100%),
    linear-gradient(0deg, rgba(255, 253, 248, .7), rgba(255, 253, 248, .12) 70%, transparent 100%);
  --public-pink: #2563eb;
  --public-text: #173b5f;
  --public-muted: #496d86;
  --public-surface: #fffdf8;
  --public-line: rgba(37, 99, 235, .34);
}

/* NANATALE KID keeps the original route-specific artwork. The fixed
   PublicParallaxLayers surface is the single image authority; page modules and
   the scrolling live-content canvas remain transparent. */
html[data-experience="kids"] .public-page[data-public-skin] {
  --kids-page-art: url("/skins/kids/kids-learning-mobile.avif");
}

html[data-experience="kids"] .public-page[data-public-skin="home"] { --kids-page-art: url("/skins/kids/kids-home-mobile.avif"); }
html[data-experience="kids"] .public-page[data-public-skin="explore"] { --kids-page-art: url("/skins/kids/kids-explore-mobile.avif"); }
html[data-experience="kids"] .public-page:is([data-public-skin="story"], [data-public-skin="creator"]) { --kids-page-art: url("/skins/kids/kids-story-mobile.avif"); }
html[data-experience="kids"] .public-page:is([data-public-skin="world"], [data-public-skin="profile"]) { --kids-page-art: url("/skins/kids/kids-world-mobile.avif"); }
html[data-experience="kids"] .public-page[data-public-skin="packages"] { --kids-page-art: url("/skins/kids/kids-packages-mobile.avif"); }
html[data-experience="kids"] .public-page:is([data-public-skin="contact"], [data-public-skin="news"], [data-public-skin="legal"]) { --kids-page-art: url("/skins/kids/kids-help-mobile.avif"); }
html[data-experience="kids"] .public-page[data-public-skin="about"] { --kids-page-art: url("/skins/kids/kids-legal-mobile.avif"); }
html[data-experience="kids"] .public-page:is([data-public-skin="works"], [data-public-skin="space"]) { --kids-page-art: url("/skins/kids/kids-learning-mobile.avif"); }
html[data-experience="kids"] .public-page[data-public-skin="system"] { --kids-page-art: url("/skins/kids/system-states-mobile.avif"); }
html[lang^="zh"][data-experience="kids"] .public-page:is([data-public-skin="works"], [data-public-skin="space"]) { --kids-page-art: url("/skins/kids/chinese-ink-learning-mobile.avif"); }
html[lang^="ko"][data-experience="kids"] .public-page:is([data-public-skin="works"], [data-public-skin="space"]) { --kids-page-art: url("/skins/kids/korean-webtoon-learning-mobile.avif"); }
html[lang^="th"][data-experience="kids"] .public-page:is([data-public-skin="works"], [data-public-skin="space"]) { --kids-page-art: url("/skins/kids/thai-learning-mobile.avif"); }

@media (min-width: 701px) {
  .public-page[data-public-skin="home"] { --public-art: url("/skins/v2/home-header-desktop.avif"); }
  .public-page[data-public-skin="works"] { --public-art: url("/skins/v2/works-header-desktop.avif"); }
  .public-page[data-public-skin="contact"] { --public-art: url("/skins/v2/contact-header-desktop.avif"); }
  .public-page[data-public-skin="legal"] { --public-art: url("/skins/v2/legal-header-desktop.avif"); }
  html[data-experience="kids"] .public-page[data-public-skin] { --kids-page-art: url("/skins/kids/kids-learning-desktop.avif"); }
  html[data-experience="kids"] .public-page[data-public-skin="home"] { --kids-page-art: url("/skins/kids/kids-home-desktop.avif"); }
  html[data-experience="kids"] .public-page[data-public-skin="explore"] { --kids-page-art: url("/skins/kids/kids-explore-desktop.avif"); }
  html[data-experience="kids"] .public-page:is([data-public-skin="story"], [data-public-skin="creator"]) { --kids-page-art: url("/skins/kids/kids-story-desktop.avif"); }
  html[data-experience="kids"] .public-page:is([data-public-skin="world"], [data-public-skin="profile"]) { --kids-page-art: url("/skins/kids/kids-world-desktop.avif"); }
  html[data-experience="kids"] .public-page[data-public-skin="packages"] { --kids-page-art: url("/skins/kids/kids-packages-desktop.avif"); }
  html[data-experience="kids"] .public-page:is([data-public-skin="contact"], [data-public-skin="news"], [data-public-skin="legal"]) { --kids-page-art: url("/skins/kids/kids-help-desktop.avif"); }
  html[data-experience="kids"] .public-page[data-public-skin="about"] { --kids-page-art: url("/skins/kids/kids-legal-desktop.avif"); }
  html[data-experience="kids"] .public-page:is([data-public-skin="works"], [data-public-skin="space"]) { --kids-page-art: url("/skins/kids/kids-learning-desktop.avif"); }
  html[data-experience="kids"] .public-page[data-public-skin="system"] { --kids-page-art: url("/skins/kids/system-states-desktop.avif"); }
  html[lang^="zh"][data-experience="kids"] .public-page:is([data-public-skin="works"], [data-public-skin="space"]) { --kids-page-art: url("/skins/kids/chinese-ink-learning-desktop.avif"); }
  html[lang^="ko"][data-experience="kids"] .public-page:is([data-public-skin="works"], [data-public-skin="space"]) { --kids-page-art: url("/skins/kids/korean-webtoon-learning-desktop.avif"); }
  html[lang^="th"][data-experience="kids"] .public-page:is([data-public-skin="works"], [data-public-skin="space"]) { --kids-page-art: url("/skins/kids/thai-learning-desktop.avif"); }
}

html[data-experience="kids"] .public-page[data-public-skin] .public-canvas[data-content-layer="live-ui"] {
  color: var(--nnt-text);
  background: transparent;
}

html[data-experience="kids"] .public-page[data-public-skin] :is(h1, h2) {
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .public-page { --nnt-page-gutter: 20px; }
}

@media (max-width: 390px) {
  .public-page { --nnt-page-gutter: 10px; }
}