/*
 * Hux typography system v17
 * Reference rhythm: 18px reading size, 1.9 leading, 2em flow, 90ch measure.
 */

:root {
  --font-body: "Montserrat", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-heading: "Instrument Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --type-caption: 11px;
  --type-small: 12px;
  --type-ui: 14px;
  --type-content: 15px;
  --type-reading: 18px;
  --leading-tight: 1.2;
  --leading-ui: 1.5;
  --leading-content: 1.75;
  --leading-reading: 1.9;
  --flow-reading: 2em;
  --measure-reading: 90ch;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-ui);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

:where(h1, h2, h3, h4, h5, h6),
.brand-name,
.skill-owner-copy strong,
.skill-hover-title,
.portal-guide-key strong,
.workflow-step-flow strong {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
}

:where(h1, h2, h3, h4),
.dashboard-heading h2,
.portal-guide-overview h3,
.skill-owner-copy strong {
  text-wrap: balance;
}

:where(p, li, dd),
.skill-card-summary {
  text-wrap: pretty;
}

code,
pre,
.section-kicker,
.portal-section-label,
.workflow-article-type {
  font-family: var(--font-mono);
}

/* Global navigation and controls */
.brand-name {
  font-size: 20px;
  line-height: 1.2;
}

.product-name {
  font-size: var(--type-small);
  line-height: 1.45;
}

.nav-link,
.view-tab,
.pill {
  font-size: var(--type-ui);
  line-height: 1.4;
}

.nav-count,
.view-count,
.pill-count {
  font-size: var(--type-small);
  line-height: 1.25;
}

.user-copy strong {
  font-family: var(--font-heading);
  font-size: var(--type-ui);
  line-height: 1.35;
}

.user-copy small {
  font-size: var(--type-caption);
  line-height: 1.45;
}

.workspace-title h1,
.section-kicker,
.portal-section-label {
  font-size: var(--type-caption);
  line-height: 1.45;
}

.button {
  font-size: var(--type-small);
  line-height: 1.35;
}

.upload-button,
.results-meta .button {
  font-size: 13px;
}

.asset-toolbar .search-wrap input {
  font-size: 16px;
  line-height: 1.5;
}

.results-meta p {
  font-size: 13px;
  line-height: 1.55;
}

/* Home and dashboard */
.dashboard-heading h2 {
  font-family: var(--font-heading);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 520;
  line-height: 1.02;
}

.dashboard-heading p {
  max-width: 46em;
  font-size: 16px;
  line-height: var(--leading-content);
}

.dashboard-metrics span,
.dashboard-source dt {
  font-size: var(--type-small);
  line-height: var(--leading-ui);
}

.dashboard-metrics small,
.footer-column > span,
.footer-column small {
  font-size: var(--type-caption);
  line-height: var(--leading-ui);
}

.panel-heading h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.35;
}

.panel-note,
.recent-copy small,
.recent-item time,
.category-total {
  font-size: var(--type-caption);
  line-height: var(--leading-ui);
}

.recent-copy strong {
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 1.45;
}

.category-row-label strong {
  font-size: var(--type-small);
  line-height: var(--leading-ui);
}

.dashboard-panel p,
.dashboard-panel li,
.dashboard-source dd,
.footer-brand p,
.footer-column a {
  font-size: 13px;
  line-height: 1.7;
}

.footer-brand strong {
  font-family: var(--font-heading);
}

/* Asset cards */
.skill-card .badge {
  font-size: var(--type-caption);
  line-height: 20px;
}

.skill-owner-copy strong,
.skill-hover-title {
  font-size: 20px;
  line-height: 1.32;
}

.skill-owner-copy .skill-card-summary,
.asset-card .skill-owner-copy .skill-card-summary,
.asset-card:hover .skill-owner-copy .skill-card-summary,
.asset-card:focus-visible .skill-owner-copy .skill-card-summary,
.asset-card:focus-within .skill-owner-copy .skill-card-summary {
  font-size: 13px;
  line-height: 1.68;
}

.card-category-tag,
.hover-category-tag,
.skill-hover-tags .badge {
  font-size: var(--type-caption);
  line-height: 1.25;
}

.empty-state h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.35;
}

.empty-state p {
  font-size: var(--type-ui);
  line-height: 1.7;
}

/* Asset detail sheet */
.sheet-hero h2 {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1.25;
}

.sheet-hero p {
  max-width: 42em;
  font-size: var(--type-content);
  line-height: var(--leading-content);
}

.sheet-taxonomy,
.sheet-block-heading .section-kicker,
.compact-meta > div > span {
  font-size: var(--type-caption);
  line-height: var(--leading-ui);
}

.sheet-block h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.35;
}

.sheet-block p,
.quickstart li {
  font-size: var(--type-content);
  line-height: var(--leading-content);
}

.tag-label,
.meta-list dt,
.meta-list dd,
.compact-meta strong,
.tag-list span {
  font-size: var(--type-small);
  line-height: 1.6;
}

.meta-list code {
  font-size: var(--type-caption);
  line-height: 1.65;
}

.sheet-block-heading {
  margin-bottom: 18px;
}

.sheet-block {
  padding-block: 28px;
}

/* Unified operating guide */
.portal-dialog-header h2 {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1.2;
}

.portal-guide-overview h3 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.12;
}

.portal-guide-overview p,
.portal-guide-overview-copy p {
  font-size: var(--type-content);
  line-height: var(--leading-content);
}

.portal-guide-heading h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.3;
}

.portal-guide-heading p,
.portal-system-flow p,
.portal-contribute-flow p,
.portal-responsibility-grid p {
  font-size: 13px;
  line-height: 1.72;
}

.portal-guide-key span,
.portal-guide-overview-copy > span,
.portal-use-check > span,
.portal-responsibility-grid section > span,
.portal-system-flow li > span,
.portal-contribute-flow li > span {
  font-size: var(--type-caption);
  line-height: var(--leading-ui);
}

.portal-guide-key strong,
.portal-system-flow strong,
.portal-contribute-flow strong,
.portal-responsibility-grid strong {
  font-size: var(--type-content);
  line-height: 1.4;
}

.portal-use-check h4 {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.35;
}

.portal-use-check li {
  font-size: 13px;
  line-height: 1.7;
}

.portal-use-check small {
  font-size: var(--type-caption);
  line-height: 1.65;
}

.portal-guide-section {
  padding-top: 48px;
}

.portal-guide-heading {
  margin-bottom: 22px;
}

/* Article and rendered Markdown */
.workflow-article {
  width: min(1180px, calc(100% - 64px));
  padding-block: 60px 96px;
}

.workflow-article-markdown {
  width: min(1240px, calc(100% - 64px));
}

.workflow-article-hero {
  padding: 52px 56px;
}

.workflow-article-hero-main {
  max-width: 900px;
  gap: 18px;
}

.workflow-article-hero h1 {
  max-width: 20em;
  font-family: var(--font-heading);
  font-size: clamp(38px, 3.2vw, 46px);
  line-height: 1.14;
}

.workflow-article-hero p {
  max-width: 46em;
  font-size: var(--type-reading);
  line-height: 1.8;
}

.workflow-article-meta,
.workflow-article-facts dt {
  font-size: var(--type-caption);
  line-height: var(--leading-ui);
}

.workflow-article-facts dd {
  font-size: var(--type-small);
  line-height: var(--leading-ui);
}

.workflow-quick-flow {
  padding-block: 42px 48px;
}

.workflow-section-heading h2,
.workflow-block h2 {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.3;
}

.workflow-section-heading p {
  font-size: 13px;
  line-height: 1.7;
}

.workflow-step-flow strong {
  font-size: var(--type-content);
  line-height: 1.4;
}

.workflow-step-flow small {
  font-size: var(--type-small);
  line-height: 1.65;
}

.workflow-step-number,
.workflow-rail-index,
.workflow-toc-number,
.workflow-rail-title > span,
.workflow-rail-footer span,
.workflow-article-footer span,
.vertical-process-label,
.workflow-article-footer code {
  font-size: var(--type-caption);
  line-height: var(--leading-ui);
}

.workflow-article-body {
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 56px;
  padding-top: 52px;
}

.markdown-article-body {
  grid-template-columns: minmax(0, var(--measure-reading)) 250px;
  justify-content: space-between;
}

.workflow-article-main,
.markdown-article {
  min-width: 0;
  max-width: var(--measure-reading);
  color: #c8c8c8;
  font-family: var(--font-body);
  font-size: var(--type-reading);
  line-height: var(--leading-reading);
}

.workflow-article-main {
  gap: var(--flow-reading);
}

.workflow-text p,
.workflow-instructions li p,
.workflow-checklist li,
.workflow-callout p,
.markdown-article p,
.markdown-article li {
  font-size: 1em;
  line-height: inherit;
}

.workflow-text p {
  margin-bottom: var(--flow-reading);
}

.markdown-article > * + * {
  margin-block-start: var(--flow-reading);
}

.markdown-article .markdown-section + .markdown-section {
  margin-block-start: 3em;
}

.markdown-article h2,
.markdown-article h3 {
  font-family: var(--font-heading);
  line-height: 1.3;
}

.markdown-article h2 {
  margin-block-start: 0;
  font-size: 30px;
}

.markdown-article h3 {
  margin-block-start: 2em;
  font-size: 22px;
}

.markdown-article p,
.markdown-article ul,
.markdown-article ol {
  max-width: var(--measure-reading);
}

.markdown-article ul,
.markdown-article ol {
  gap: 0.65em;
  margin-block: var(--flow-reading) 0;
  padding-left: 1.4em;
}

.markdown-article pre {
  margin-block: var(--flow-reading);
  padding: 20px 22px;
  font-size: 14px;
  line-height: 1.75;
}

.markdown-media,
.markdown-video-figure {
  margin-block: var(--flow-reading);
}

.workflow-media figcaption,
.markdown-media figcaption,
.markdown-video-figure figcaption {
  font-size: var(--type-small);
  line-height: 1.65;
}

.workflow-platform-grid p,
.workflow-callout p {
  font-size: 14px;
  line-height: var(--leading-content);
}

.workflow-platform-grid h3,
.workflow-callout > span {
  font-family: var(--font-heading);
  font-size: var(--type-content);
  line-height: 1.4;
}

.workflow-toc button,
.workflow-source-content,
.workflow-source-link,
.workflow-rail-footer {
  font-size: var(--type-small);
  line-height: 1.6;
}

/* The identity selector keeps its compact component-local typography. */

@media (max-width: 860px) {
  .dashboard-heading p {
    font-size: var(--type-content);
  }

  .portal-guide-overview-copy p,
  .portal-guide-heading p {
    font-size: var(--type-ui);
  }

  .workflow-article,
  .workflow-article-markdown {
    width: min(100% - 28px, 760px);
    padding-block: 32px 64px;
  }

  .workflow-article-hero {
    padding: 34px 28px;
  }

  .workflow-article-hero h1 {
    font-size: clamp(32px, 8vw, 40px);
  }

  .workflow-article-hero p,
  .workflow-article-main,
  .markdown-article {
    font-size: 18px;
    line-height: 1.85;
  }

  .workflow-article-body,
  .markdown-article-body {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 38px;
  }

  .workflow-article-main,
  .markdown-article {
    max-width: none;
  }

  .markdown-article > * + * {
    margin-block-start: 1.75em;
  }

  .markdown-article .markdown-section + .markdown-section {
    margin-block-start: 2.5em;
  }

  .portal-guide-section {
    padding-top: 40px;
  }
}

@media (max-width: 560px) {
  .brand-name {
    font-size: 15px;
  }

  .product-name {
    font-size: 10px;
  }

  .view-tab,
  .pill {
    font-size: 13px;
  }

  .reader-action {
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }

  .reader-action .icon {
    color: var(--primary-foreground);
  }

  .skill-owner-copy strong,
  .skill-hover-title {
    font-size: 19px;
  }

  .sheet-hero h2 {
    font-size: 27px;
  }

  .sheet-hero p,
  .sheet-block p,
  .quickstart li {
    font-size: var(--type-ui);
  }

  .portal-dialog-header h2 {
    font-size: 26px;
  }

  .portal-guide-overview h3 {
    font-size: 30px;
  }

  .portal-guide-heading h3 {
    font-size: 22px;
  }

  .workflow-article-hero {
    padding: 28px 22px;
  }

  .workflow-article-hero h1 {
    font-size: 30px;
    line-height: 1.18;
  }

  .workflow-article-hero p,
  .workflow-article-main,
  .markdown-article {
    font-size: 17px;
    line-height: 1.85;
  }

  .markdown-article h2 {
    font-size: 26px;
  }

  .markdown-article h3 {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}