/* Norelyn System UI
   Shared brand layer for public product and reference pages.
   Loaded after page-specific CSS so products keep their own composition while
   typography, navigation, metadata, controls and surface language stay coherent. */

:root {
  --n-bg: #f4f5f3;
  --n-surface: #ecefeb;
  --n-surface-2: #ffffff;
  --n-ink: #171b1f;
  --n-muted: #5f6972;
  --n-quiet: #7b8790;
  --n-line: #cbd2d6;
  --n-line-strong: #87939d;
  --n-accent: #4f637a;
  --n-accent-soft: rgba(79, 99, 122, .09);
  --n-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --n-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --n-font-mono: "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

:root[data-theme="dark"] {
  --n-bg: #0b0d10;
  --n-surface: #11151a;
  --n-surface-2: #161b21;
  --n-ink: #c3d2e0;
  --n-muted: #c3d2e0;
  --n-quiet: #c3d2e0;
  --n-line: #252c33;
  --n-line-strong: #54616d;
  --n-accent: #a8b3bf;
  --n-accent-soft: rgba(168, 179, 191, .08);
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) {
  --bg: var(--n-bg);
  --surface: var(--n-surface-2);
  --ink: var(--n-ink);
  --muted: var(--n-muted);
  --line: var(--n-line);
  --accent: var(--n-accent);
  --accent-deep: var(--n-accent);
  --service-bg: var(--n-bg);
  --service-surface: var(--n-surface-2);
  --service-ink: var(--n-ink);
  --service-muted: var(--n-muted);
  --service-line: var(--n-line);
  --service-blue: var(--n-accent);
  --service-blue-deep: var(--n-accent);
  --service-blue-soft: var(--n-accent-soft);
  background: var(--n-bg) !important;
  color: var(--n-ink);
  font-family: var(--n-font-ui) !important;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) :where(h1,h2,h3) {
  font-family: var(--n-font-display);
  font-synthesis: none;
}

html:lang(zh-Hant) :where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) :where(h1,h2,h3),
html:lang(zh-Hans) :where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) :where(h1,h2,h3) {
  letter-spacing: 0 !important;
}

/* Header / path navigation */
:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) .site-header,
.about-page .site-header {
  min-height: 58px !important;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--n-bg) !important;
  border-bottom: 1px solid var(--n-line) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) .brand,
.about-page .brand {
  gap: 7px !important;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) .brand-mark,
.about-page .brand-mark {
  width: 19px !important;
  height: 19px !important;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) .brand-wordmark,
.about-page .brand-wordmark {
  height: 18px !important;
  width: auto !important;
}

:root[data-theme="dark"] :where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .brand-wordmark,
:root[data-theme="dark"] :where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .footer-brand-wordmark {
  filter: invert(1) grayscale(1) brightness(1.45);
}

:where(.trace-brand-product, .workspace-brand-product, .services-brand-product, .learn-brand-product) {
  color: var(--n-accent) !important;
  font-family: var(--n-font-mono);
  font-size: 11px !important;
}

:where(.trace-brand-divider, .workspace-brand-divider, .services-brand-divider, .learn-brand-divider) {
  color: var(--n-quiet) !important;
  font-family: var(--n-font-mono);
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) .nav,
.about-page .nav {
  color: var(--n-muted) !important;
  font-family: var(--n-font-ui);
  font-size: 11px !important;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) .nav > a,
.about-page .nav > a {
  color: var(--n-muted) !important;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) .nav > a:hover,
.about-page .nav > a:hover {
  color: var(--n-ink) !important;
}

:where(.products-language, .trace-language, .workspace-language, .services-language, .learn-language) select {
  min-height: 30px !important;
  padding: 0 14px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--n-muted) !important;
  font-family: var(--n-font-mono) !important;
  font-size: 10px !important;
}

/* Section grammar */
:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .section-kicker {
  padding: 11px 0 12px !important;
  border-top: 1px solid var(--n-line-strong) !important;
  color: var(--n-quiet) !important;
  font-family: var(--n-font-mono);
  font-size: 9px !important;
  letter-spacing: .03em !important;
  text-transform: lowercase;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .section-kicker > span:first-child {
  color: var(--n-accent) !important;
  font-weight: 500 !important;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .eyebrow,
:where(.trace-status, .workspace-kicker, .services-kicker, .learn-v2-kicker, .mode-label, .system-key, .service-index, .process-list article > span) {
  color: var(--n-accent) !important;
  font-family: var(--n-font-mono);
  letter-spacing: .05em !important;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) :where(h1, h2),
.about-page :where(h1,h2) {
  color: var(--n-ink) !important;
  font-weight: 500 !important;
}

/* Command-like actions, not pills */
:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .button {
  min-height: auto !important;
  padding: 0 0 3px !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--n-ink) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .button:hover {
  color: var(--n-accent) !important;
  transform: none !important;
}

/* Status tokens */
:where(.product-status, .workspace-status) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--n-accent) !important;
  font-family: var(--n-font-mono);
  font-size: 9px !important;
}

:where(.product-status, .workspace-status)::before { content: "["; }
:where(.product-status, .workspace-status)::after { content: "]"; }

/* Remove decorative SaaS effects from content surfaces. Keep containers only
   where they represent a real object, preview, form or data boundary. */
:where(.trace-object, .workspace-preview, .services-brief, .assessment-shell) {
  border-color: var(--n-line) !important;
  border-radius: 2px !important;
  background: var(--n-surface-2) !important;
  box-shadow: none !important;
}

:where(.trace-cap-grid article, .trace-control-list, .workspace-principles article, .workspace-continuity) {
  border-color: var(--n-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:where(.catalog-uses span, .trace-object-meta span, .service-tags span) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--n-quiet) !important;
  font-family: var(--n-font-mono);
  font-size: 9px !important;
}

:where(.catalog-uses span, .trace-object-meta span, .service-tags span)::before {
  content: "[";
  color: var(--n-line-strong);
}
:where(.catalog-uses span, .trace-object-meta span, .service-tags span)::after {
  content: "]";
  color: var(--n-line-strong);
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) :where(.catalog-row, .learn-v2-row, .service-row, .workspace-modes article, .process-list article, .system-row) {
  border-color: var(--n-line) !important;
}

@media (hover:hover) {
  :where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) :where(a.catalog-row, a.learn-v2-row):hover {
    padding-left: 0 !important;
    background: var(--n-accent-soft) !important;
  }
}

/* Inputs / assessment retain controls because they are interactive objects. */
:where(.learn-v2 .learn-search-control, .choice span, .assessment-shell input, .assessment-shell textarea, .assessment-shell select) {
  border-color: var(--n-line) !important;
  border-radius: 2px !important;
  background: var(--n-surface-2) !important;
  color: var(--n-ink) !important;
  box-shadow: none !important;
}

.choice input:checked + span {
  border-color: var(--n-accent) !important;
  background: var(--n-accent-soft) !important;
  color: var(--n-ink) !important;
}

/* Footer */
:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .site-footer {
  margin-top: 0 !important;
  border-top: 1px solid var(--n-line-strong) !important;
  background: transparent;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .footer-columns p {
  color: var(--n-quiet) !important;
  font-family: var(--n-font-ui);
  font-size: 11px !important;
  text-transform: none;
}

:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .footer-columns a,
:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .muted,
:where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .copyright {
  color: var(--n-muted) !important;
}

/* About becomes the system manual. */
.about-page .wrap {
  width: min(calc(100% - 48px), 980px) !important;
  padding-top: 58px !important;
}

.about-page .wrap > .eyebrow:first-child::before {
  content: "Norelyn / About · ";
  color: var(--n-accent);
}

.about-page .card {
  border-color: var(--n-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.about-page .status {
  color: var(--n-accent) !important;
  font-family: var(--n-font-mono);
}

.about-page .note {
  border-left: 2px solid var(--n-accent) !important;
  background: var(--n-accent-soft) !important;
}

.about-page code {
  color: var(--n-accent);
  font-family: var(--n-font-mono);
}

@media (max-width: 900px) {
  :where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) .site-header {
    min-height: 56px !important;
  }

  :where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) .nav,
  .about-page .nav {
    top: 100% !important;
    background: var(--n-bg) !important;
    border-bottom: 1px solid var(--n-line) !important;
    box-shadow: none !important;
  }
}

@media (max-width: 620px) {
  :where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  :where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page) :where(h2) {
    font-size: clamp(27px, 8vw, 36px) !important;
  }

  .about-page .wrap {
    width: calc(100% - 32px) !important;
    padding-top: 42px !important;
  }
}


/* Shared command path on every top-level public surface. */
:where(.products-hero, .trace-hero, .workspace-hero, .services-hero, .learn-v2-hero)::before {
  display: block;
  margin: 0 0 18px;
  color: var(--n-quiet);
  font-family: var(--n-font-mono);
  font-size: 10px;
  line-height: 1.5;
}

.products-hero::before { content: "Norelyn / Products"; }
.trace-hero::before { content: "Norelyn / Trace"; }
.workspace-hero::before { content: "Norelyn / Workspace"; }
.services-hero::before { content: "Norelyn / Services"; }
.learn-v2-hero::before { content: "Norelyn / Learn"; }

/* Dark-mode cleanup for page-specific literal colors that predate System UI. */
:root[data-theme="dark"] :where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) :where(
  .catalog-tag,
  .catalog-description,
  .catalog-uses span,
  .trace-lead,
  .trace-note,
  .trace-object-summary,
  .trace-object-lines strong,
  .trace-control-list span,
  .workspace-lead,
  .workspace-note,
  .workspace-heading p,
  .workspace-modes article div > p:last-child,
  .workspace-principles p,
  .continuity-body,
  .status-body,
  .services-lead,
  .brief-body p,
  .services-heading > p,
  .boundary-body,
  .assessment-intro > div > p,
  .service-copy > p,
  .process-list p,
  .boundary-list span,
  .learn-v2-lead,
  .learn-v2-heading > p,
  .learn-principles-body,
  .learn-continuity-body,
  .learn-v2-row-body
) {
  color: var(--n-muted) !important;
}

:root[data-theme="dark"] :where(.products-page, .trace-page, .workspace-page, .services-v2, .learn-v2) :where(
  .trace-object-top,
  .trace-object-lines small,
  .catalog-index,
  .learn-v2-index,
  .workspace-modes article > span
) {
  color: var(--n-quiet) !important;
}

:root[data-theme="dark"] :where(.workspace-preview, .trace-object, .services-brief, .assessment-shell) {
  background: var(--n-surface-2) !important;
}

@media (max-width: 620px) {
  :where(.products-hero, .trace-hero, .workspace-hero, .services-hero, .learn-v2-hero)::before {
    margin-bottom: 14px;
  }
}

/* Dark mode: normalize legacy page-specific foreground literals too.
   Accent, surfaces, and border tokens remain independent. */
:root[data-theme="dark"] :where(
  .products-page, .trace-page, .workspace-page, .services-v2, .learn-v2, .about-page
) :is(
  h1, h2, h3, h4, h5, h6, p, a, span, small, strong, b, em, label,
  button, input, textarea, select, li, time, summary, code, pre, blockquote,
  dt, dd, th, td
) {
  color: #c3d2e0 !important;
}