/* Registry presentation and shared release controls. */
/* version 17.09.2026 by Shiyun Liu */
:root {
  --max-width: 1184px;
  --nav-height: 72px;
  --color-bg-secondary: #f8f9fb;
  --color-bg-tertiary: #f3f4f6;
  --color-bg-hover: #e9ebef;
  --color-text-primary: #191b20;
  --color-text-secondary: #596374;
  --color-text-tertiary: #687180;
  --color-border: #e2e6ed;
  --color-accent-link: var(--color-accent-primary);
  --color-accent-soft: rgb(30 64 175 / .09);
  --color-accent-soft-hover: rgb(30 64 175 / .16);
  --color-accent-wash: linear-gradient(135deg, rgb(30 64 175 / .08) 0%, rgb(245 158 11 / .11) 55%, rgb(234 88 12 / .13) 100%);
  --shadow-accent: 0 2px 10px rgb(234 88 12 / .22);
  --shadow-accent-hover: 0 6px 18px rgb(234 88 12 / .3);
}
[data-theme="dark"] {
  --color-bg-primary: #131518;
  --color-bg-secondary: #1c1f24;
  --color-bg-tertiary: #252930;
  --color-bg-hover: #30353e;
  --color-text-primary: #f4f5f7;
  --color-text-secondary: #b6becb;
  --color-text-tertiary: #9ba5b5;
  --color-border: #343a45;
  /* Lighter ramp so gradient text and icons keep contrast on dark surfaces. */
  --color-accent-gradient: linear-gradient(135deg, #60a5fa 0%, #fbbf24 55%, #fb923c 100%);
  --color-accent-link: #93b4fd;
  --color-accent-soft: rgb(96 165 250 / .16);
  --color-accent-soft-hover: rgb(96 165 250 / .26);
  --color-accent-wash: linear-gradient(135deg, rgb(96 165 250 / .12) 0%, rgb(251 191 36 / .12) 55%, rgb(251 146 60 / .14) 100%);
  --shadow-accent: 0 2px 10px rgb(0 0 0 / .45);
  --shadow-accent-hover: 0 6px 18px rgb(0 0 0 / .55);
}
[hidden] { display: none !important; }
.nav { background: var(--color-bg-primary); }
[data-theme="dark"] .nav { background: var(--color-bg-primary); }
.nav-inner { gap: 28px; }
.nav-logo { font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.nav-logo-icon { flex-shrink: 0; width: 34px; height: 34px; color: #fff; background: var(--color-accent-gradient); border-radius: var(--radius-md); box-shadow: var(--shadow-accent); }
.nav-logo-icon svg { width: 21px; height: 21px; stroke: currentColor; }
.nav-links { gap: 26px; }
.nav-links li { margin: 0; }
.nav-links a { font-size: 13px; }
.nav-links a::after { background: var(--color-accent-gradient); height: 2px; border-radius: 2px; }
.nav-actions { gap: 8px; }
.theme-toggle, .icon-link { width: 36px; height: 36px; background: var(--color-bg-secondary); }
.nav-toggle { color: var(--color-text-primary); }
.catalogue-primary, .catalogue-secondary, .catalogue-paper {
  min-height: 48px;
  padding: 0 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-position 220ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.catalogue-primary { background: var(--color-accent-gradient); background-size: 180% 180%; background-position: 0% 0%; color: #fff; box-shadow: var(--shadow-accent); }
.catalogue-primary:hover { background-position: 100% 100%; color: #fff; box-shadow: var(--shadow-accent-hover); transform: translateY(-1px); }
/* The dark-mode ramp is light, so the label flips to dark for contrast. */
[data-theme="dark"] .catalogue-primary,
[data-theme="dark"] .catalogue-primary:hover { color: #131518; }
.catalogue-secondary { background: var(--color-accent-soft); color: var(--color-accent-link); }
.catalogue-secondary:hover { background: var(--color-accent-soft-hover); color: var(--color-accent-link); }
.catalogue-paper { color: var(--color-text-primary); border-color: var(--color-border); background: var(--color-bg-primary); }
.catalogue-paper:hover { background: var(--color-bg-secondary); border-color: var(--color-accent-link); color: var(--color-accent-link); }
/* Icon paths live here so they resolve against this stylesheet, not the page. */
.icon-mask { display: inline-block; flex-shrink: 0; background: var(--color-accent-gradient); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.icon-arrow { -webkit-mask-image: url('icons/arrow-up-right.svg'); mask-image: url('icons/arrow-up-right.svg'); }
.icon-performance { -webkit-mask-image: url('icons/waveform-thin.svg'); mask-image: url('icons/waveform-thin.svg'); }
.icon-durability { -webkit-mask-image: url('icons/stack-thin.svg'); mask-image: url('icons/stack-thin.svg'); }
.icon-modelling { -webkit-mask-image: url('icons/cube-thin.svg'); mask-image: url('icons/cube-thin.svg'); }
.icon-field { -webkit-mask-image: url('icons/globe-hemisphere-west-thin.svg'); mask-image: url('icons/globe-hemisphere-west-thin.svg'); }
.icon-safety { -webkit-mask-image: url('icons/shield-check-thin.svg'); mask-image: url('icons/shield-check-thin.svg'); }
.icon-tools { -webkit-mask-image: url('icons/code-thin.svg'); mask-image: url('icons/code-thin.svg'); }
.action-arrow { width: 14px; height: 14px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent-link); outline-offset: 4px; }
.release-line { display: flex; justify-content: center; font-size: 12px; color: var(--color-text-secondary); }
.release-line .version-badge { background: var(--color-accent-soft); border-radius: 999px; padding: 7px 16px; font: inherit; color: var(--color-accent-link); font-weight: 500; letter-spacing: .02em; }
.version-badge::before { display: none; }
/* The source action rests level with its siblings and only fills on hover. */
.detail-action-primary { background: var(--color-bg-primary); border-color: var(--color-border); color: var(--color-text-primary); }
.detail-action-primary:hover { background: var(--color-accent-gradient); border-color: transparent; color: #fff; }
[data-theme="dark"] .detail-action-primary:hover { color: #131518; }
.record-nav-link:hover { border-color: var(--color-accent-link); background: var(--color-bg-secondary); box-shadow: 0 4px 18px rgb(30 64 175 / .1); color: var(--color-accent-link); }
.results-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.results-header { flex-wrap: wrap; gap: 12px; }
.home-page .hero { background: var(--color-bg-primary); padding: 104px 0 68px; }
.home-page .hero::before { display: none; }
.home-page .hero-content { max-width: 900px; display: grid; justify-items: center; row-gap: 28px; }
.home-page .release-line { position: static; margin: 0; }
.home-page .hero h1 { background: var(--color-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: clamp(36px, 4vw, 50px); font-weight: 600; letter-spacing: -.045em; line-height: 1.12; margin: 0; padding-bottom: 2px; }
.home-page .hero .hero-description { max-width: 690px; margin: 0 auto; font-size: 17px; line-height: 1.75; letter-spacing: -.012em; }
.home-page .hero-description span { display: block; }
.home-page .hero-actions { width: 100%; align-items: center; gap: 12px; margin-top: 8px; }
.home-page .stats-section { padding: 0 0 76px; }
.home-page #stats-grid { grid-template-columns: repeat(4, 1fr); gap: 0; border: 0; border-block: 1px solid var(--color-border); border-radius: 0; padding: 32px 12px; }
.home-page .stat-card { padding: 0 16px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.home-page .stat-value { background: var(--color-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; }
.home-page .stat-label { margin-top: 8px; font-size: 12px; color: var(--color-text-secondary); }
.home-page .category-section { padding: 0 0 92px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.home-page .category-section h2, .home-page .principles-section h2 { font-size: 22px; font-weight: 500; letter-spacing: -.035em; }
.section-link { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-secondary); font-size: 13px; padding: 10px 0 10px 12px; }
.section-link:hover { color: var(--color-accent-link); }
.home-page #categories-grid { gap: 28px; }
.home-page .category-link { display: flex; flex-direction: column; padding: 16px; border-radius: 12px; box-shadow: none; background: var(--color-bg-primary); border: 1px solid var(--color-border); text-decoration: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
.home-page .category-link:hover { transform: none; border-color: var(--color-accent-link); box-shadow: 0 6px 22px rgb(30 64 175 / .12); }
.category-visual { display: flex; align-items: center; justify-content: center; height: 160px; border-radius: 8px; background: var(--color-accent-wash); }
.category-visual .category-icon { width: 98px; height: 98px; }
.category-copy { flex: 1; display: flex; flex-direction: column; padding: 24px 8px 10px; }
.home-page .category-copy .card-title { font-size: 17px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 12px; }
.home-page .category-copy p { font-size: 14px; line-height: 1.7; margin: 0 0 24px; }
.category-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.home-page .category-count { font-size: 13px; color: var(--color-text-secondary); }
.category-meta .icon-mask { width: 16px; height: 16px; }
.home-page .principles-section { padding: 0 0 96px; background: var(--color-bg-primary); }
.home-page .principles-section h2 { text-align: left; margin-bottom: 30px; }
.home-page .principles-section .card { padding: 26px; border: 1px solid var(--color-border); border-radius: 22px; box-shadow: none; background: var(--color-bg-primary); transition: border-color 160ms ease; }
.home-page .principles-section .card:hover { transform: none; border-color: var(--color-accent-link); }
.home-page .principles-section .card-header { padding: 0; margin-bottom: 10px; }
.home-page .principles-section .card-header::before { content: ''; display: block; width: 30px; height: 3px; border-radius: 3px; background: var(--color-accent-gradient); margin-bottom: 14px; }
.home-page .principles-section .card-title { font-size: 15px; font-weight: 500; }
.home-page .principles-section .card-body p { font-size: 13px; line-height: 1.65; margin: 0; }
.home-page .footer { background: var(--color-bg-secondary); padding-top: 56px; }
.submission-page .contribute-step::before { background: var(--color-accent-gradient); color: #fff; border: 0; }
.submission-page .submission-form-link,
.submission-page .submission-form-link:hover { background: var(--color-accent-soft); color: var(--color-accent-link); border: 1px solid transparent; box-shadow: none; }
.submission-page .submission-form-link { min-height: 40px; font-size: 13px; }
.submission-page .submission-form-link:hover { background: var(--color-accent-soft-hover); }
#tools-grid .tool-link,
#tools-grid .tool-link:hover { background: transparent; color: var(--color-accent-link); border: 1px solid currentColor; box-shadow: none; }
#tools-grid .tool-link:hover { background: var(--color-accent-soft); }
@media (max-width: 1000px) {
  .nav-toggle { display: flex; }
  .nav-links { position: absolute; top: var(--nav-height); left: 0; right: 0; display: none; flex-direction: column; background: var(--color-bg-primary); border-bottom: 1px solid var(--color-border); gap: 16px; padding: 24px; transform: none; opacity: 1; transition: none; }
  .nav-links.open { display: flex; }
  .nav-logo { font-size: 16px; }
}
@media (max-width: 640px) {
  :root { --nav-height: 64px; }
  .nav-inner { padding-inline: 18px; gap: 12px; }
  .nav-logo { font-size: 14px; gap: 8px; }
  .nav-actions { gap: 4px; flex-shrink: 0; }
  .theme-toggle, .icon-link { width: 32px; height: 32px; }
  .nav-toggle { padding: 6px; }
  .home-page .hero { padding: 62px 0 42px; }
  .home-page .hero-content { row-gap: 24px; }
  .home-page .hero h1 { font-size: 36px; letter-spacing: -.04em; }
  .home-page .hero .hero-description { font-size: 15px; line-height: 1.75; margin-bottom: 0; }
  .home-page .hero-description span { display: inline; }
  .home-page .hero-actions { gap: 10px; }
  .catalogue-primary, .catalogue-secondary, .catalogue-paper { padding-inline: 18px; font-size: 13px; min-height: 46px; }
  .home-page .stats-section { padding-bottom: 52px; }
  .home-page #stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 24px 8px; }
  .home-page .stat-value { font-size: 26px; }
  .home-page .category-section { padding-bottom: 56px; }
  .home-page .category-section h2, .home-page .principles-section h2 { font-size: 20px; }
  .section-heading { gap: 12px; margin-bottom: 24px; }
  .home-page #categories-grid { gap: 24px; }
  .category-visual { height: 158px; }
  .home-page .principles-section { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalogue-primary, .catalogue-secondary, .catalogue-paper, .home-page .category-link { transition: none; }
}