/* Shared visual rhythm — Nano Genetics Sweden AB */
:root {
  --ng-rule: rgba(142, 181, 163, .34);
  --ng-rule-soft: rgba(142, 181, 163, .22);
  --ng-dash: 10px;
  --ng-corner: 8px;
}

::selection { background: #dcfa87; color: #102620; }

:where(.eyebrow, .atlas-eyebrow, .site-nav-kicker, .mono, .tag, .level, .step-number, .atlas-number, .site-nav-index) {
  font-variant-numeric: tabular-nums;
}

/* A single measured marker for section labels. Prose punctuation remains untouched. */
:where(.section-heading > div > .eyebrow, .frontier-next > .eyebrow, .section > .eyebrow, .atlas-intro .atlas-eyebrow, .atlas-chapter-head > .atlas-eyebrow, .atlas-closing > .atlas-eyebrow, .site-nav-kicker) {
  display: flex;
  align-items: center;
  gap: 10px;
}

:where(.section-heading > div > .eyebrow, .frontier-next > .eyebrow, .section > .eyebrow, .atlas-intro .atlas-eyebrow, .atlas-chapter-head > .atlas-eyebrow, .atlas-closing > .atlas-eyebrow, .site-nav-kicker)::before {
  content: "";
  width: var(--ng-dash);
  min-width: var(--ng-dash);
  height: 1px;
  background: currentColor;
  opacity: .72;
  transform: translateY(1px);
}

/* Borders use the same quiet weight across chapters, cards and navigation. */
:where(.site-header, .frontier-next, .research-tools a, .atlas-directory, .atlas-chapter, .atlas-detail, .atlas-development-link, .atlas-glossary details, .atlas-source, .atlas-closing, .chapter, .fact, .prototype-result, .milestones article, blockquote, .footer, .faq details) { border-color: var(--ng-rule); }

:where(.frontier-card, .research-tile, .signal-lab, .lab, .sensor-card, .chapter-art, .evidence-card, .prototype-flow, .atlas-art, .atlas-result, .atlas-experiment, .atlas-builder-box, .atlas-roadmap article, .cards article, .report, .bank-card, .notice, .hero-art) { border-radius: var(--ng-corner); }

:where(.frontier-card, .research-tile, .signal-lab, .lab, .sensor-card, .chapter-art, .evidence-card, .prototype-flow, .atlas-art, .atlas-experiment, .atlas-builder-box, .atlas-roadmap article, .cards article, .report, .bank-card) { border-color: var(--ng-rule); }

:where(.button, .atlas-button, .site-nav-support) { border-radius: 6px; }

:where(.button, .site-nav-support) > [aria-hidden="true"] { display: inline-grid; width: 1.1em; place-items: center; line-height: 1; }

:where(.site-nav-arrow, .atlas-directory b, .chapter-nav b) { display: inline-grid; width: 1.1em; place-items: center; line-height: 1; font-size: 16px; }

:where(.text-link, .atlas-textlink) { border-color: var(--ng-rule); text-underline-offset: 5px; }

/* The open/closed glossary state uses a precise 16 px sign in both states. */
.atlas-glossary summary::after,
.atlas-glossary details[open] summary::after { content: ""; width: 16px; height: 1px; right: 0; top: 50%; background: var(--atlas-gold); transform: translateY(-50%); }
.atlas-glossary summary::before { content: ""; position: absolute; width: 1px; height: 16px; right: 7.5px; top: 50%; background: var(--atlas-gold); transform: translateY(-50%); transition: transform .16s ease; }
.atlas-glossary details[open] summary::before { transform: translateY(-50%) scaleY(0); }

.faq summary { position: relative; padding-right: 34px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq details[open] summary::after { content: ""; position: absolute; width: 16px; height: 1px; right: 0; top: 50%; background: var(--lime); transform: translateY(-50%); }
.faq summary::before { content: ""; position: absolute; width: 1px; height: 16px; right: 7.5px; top: 50%; background: var(--lime); transform: translateY(-50%); transition: transform .16s ease; }
.faq details[open] summary::before { transform: translateY(-50%) scaleY(0); }

@media (max-width: 760px) {
  :root { --ng-dash: 8px; }
  :where(.section-heading > div > .eyebrow, .frontier-next > .eyebrow, .section > .eyebrow, .atlas-intro .atlas-eyebrow, .atlas-chapter-head > .atlas-eyebrow, .atlas-closing > .atlas-eyebrow, .site-nav-kicker) { gap: 8px; }
}