/* ============================================================
   togo-typography.css
   Microscale typography polish — items 1061..1100
   - 1061  link underline offset + skip-ink
   - 1064  tabular-nums for prices/stats
   - 1083  font-feature-settings (ligatures, contextual)
   - 1084  letter-spacing scale per font-size
   - 1086  optical kerning
   - 1090  all-caps tracking
   - 1092  external-link icon
   - 1093  pdf-link icon
   - 1099  minus sign on negative figures (helper class)
   Additive only — no functional/layout changes.
   ============================================================ */

/* 1061 — link underlines: clean offset + skip descenders ------- */
a {
  text-underline-offset: 2px;
  text-decoration-skip-ink: auto;
}

/* In-body prose links get a subtle underline so they read as links
   (nav/footer/buttons keep their own no-underline pattern). */
.prose a:not(.btn):not(.card),
article a:not(.btn):not(.card),
.legal-content a:not(.btn):not(.card),
main p a:not(.btn):not(.card),
main li a:not(.btn):not(.card) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* 1064 — tabular-nums on price / stat / data cells ------------- */
.price,
.stat-value,
[data-tabular],
.tier-card__price,
.compound-price,
.cat-stat__value,
.checkout-summary__price,
.cart-line__price,
.cart-summary__total,
.tier-pricing,
.product-card__price,
.coa-table td,
.spec-table td,
.order-table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* 1083 — sane default OpenType features site-wide -------------- */
html {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

/* 1086 — opt-in to optical kerning on display text ------------- */
h1, h2, h3, .display, .hero__title, .section__title {
  font-kerning: normal;
}

/* 1084 — letter-spacing scale per font-size -------------------- */
h1, .h1, .display { letter-spacing: -0.018em; }
h2, .h2          { letter-spacing: -0.014em; }
h3, .h3          { letter-spacing: -0.010em; }
h4, .h4          { letter-spacing: -0.006em; }
.text-xs, small  { letter-spacing: 0.01em; }

/* 1090 — all-caps tracking ------------------------------------- */
.cat-section-head__title,
.section__eyebrow,
.eyebrow,
.cap,
.uppercase,
.btn--upper,
[data-uppercase] {
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

/* 1092 — external-link icon on body outbound links ------------- */
main a[target="_blank"]:not(.btn):not(.card):not(.nav__link):not(.footer__link)::after,
article a[target="_blank"]:not(.btn):not(.card)::after,
.prose a[target="_blank"]:not(.btn):not(.card)::after {
  content: " \2197"; /* ↗ */
  opacity: 0.6;
  font-size: 0.85em;
  margin-left: 0.15em;
  display: inline-block;
  transform: translateY(-0.05em);
}

/* 1093 — pdf-link icon on download links ----------------------- */
main a[href$=".pdf"]:not(.btn)::before,
article a[href$=".pdf"]:not(.btn)::before,
.prose a[href$=".pdf"]:not(.btn)::before {
  content: "\1F4C4\00A0"; /* 📄 + nbsp */
  opacity: 0.7;
  font-size: 0.95em;
}

/* 1099 — negative-figure helper (use class, never a hyphen) ----- */
.neg::before { content: "\2212"; } /* − */

/* ============================================================
   Cluster 33 — Additive microscale UX details
   Items: 1086, 1087, 1088, 1090(b), 1091, 1097, 1098, 1100
   All rules are additive — no existing selectors are modified.
   ============================================================ */

/* 1086 — common ligatures + contextual alts on body prose ------- */
body {
  font-feature-settings: "rlig" 1, "calt" 1, "kern" 1, "liga" 1;
}

/* 1087 — refined letter-spacing scale (display headings tighter,
          body neutral, uppercase labels looser) ----------------- */
h1, .h1 { letter-spacing: -0.02em; }
h2, .h2 { letter-spacing: -0.02em; }
h3, .h3 { letter-spacing: -0.01em; }
body, p, li { letter-spacing: 0; }

/* 1088 — strong / b should render at full 700, never 600 -------- */
strong, b {
  font-weight: 700;
}

/* 1090 (b) — extra all-caps tracking variant for label tokens --- */
.eyebrow,
.label,
[class*="--label"],
[class$="__label"] {
  letter-spacing: 0.06em;
}

/* 1091 — visited links, body-content only (no nav/header/footer) */
main .prose a:visited,
article a:visited,
.legal-content a:visited,
main p a:visited,
main li a:visited {
  color: color-mix(in oklab, currentColor 80%, var(--color-bg, #ffffff));
}

/* 1092 (b) — external-link icon, broader CSS-only fallback ------ */
main a[href^="http"]:not([href*="togopeptide.com"]):not(.btn):not(.card):not(.nav__link):not(.footer__link)::after,
article a[href^="http"]:not([href*="togopeptide.com"]):not(.btn):not(.card)::after,
.prose a[href^="http"]:not([href*="togopeptide.com"]):not(.btn):not(.card)::after {
  content: " \2197"; /* ↗ */
  opacity: 0.6;
  font-size: 0.85em;
  margin-left: 0.15em;
  display: inline-block;
}

/* 1097 — truncate utility w/ native title tooltip --------------- */
.truncate-tooltip {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  cursor: help;
}
.truncate-tooltip[title]:hover {
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
}

/* 1098 — empty table cells get a subtle em-dash placeholder ----- */
td:empty::before {
  content: "\2014"; /* — */
  opacity: 0.5;
  display: inline-block;
}

/* 1100 — loading state on submit buttons via aria-busy ---------- */
button[type="submit"][aria-busy="true"] {
  position: relative;
  pointer-events: none;
  color: transparent !important;
  cursor: progress;
}
button[type="submit"][aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-text, #ffffff);
  opacity: 0.85;
  animation: togo-typo-spin 0.7s linear infinite;
}
@keyframes togo-typo-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  button[type="submit"][aria-busy="true"]::after {
    animation: none;
    border-top-color: currentColor;
    opacity: 0.5;
  }
}

/* Reduced motion: nothing to disable, but keep parity ----------- */