/* TrendTrader UI v1. Canonical: trendtrader-ui/components/components.css.
   Local copies keep each site independently buildable. Existing foundation tokens only.
   Loaded after route styles; .ui-surface limits adoption to the three V2 pages. */
.ui-surface [data-ui-link="inline"],
.ui-surface [data-ui-link="action"],
.ui-surface [data-ui-link="metric"],
.ui-surface .fund-copy {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
}
.ui-surface [data-ui-link="inline"] { color: var(--text); }
.ui-surface [data-ui-link="action"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}
.ui-surface [data-ui-icon] {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  color: currentColor;
}
.ui-surface [data-ui-link="action"] > [data-ui-icon],
.ui-surface [data-ui-link="button"] > [data-ui-icon],
.ui-surface [data-ui-link="card"] > [data-ui-icon] { width: 18px; height: 18px; }
.ui-surface [data-ui-icon="back"] { transform: rotate(180deg); }
.ui-surface [data-ui-link="card"] { text-decoration: none; }
.ui-surface :is(.btn, .ttp-copy) { min-height: 44px; font-weight: 500; }
.ui-surface .footer__col h3,
.ui-surface .performance-feature__edition { font-size: .75rem; }
.ui-surface :is(.footer__col a, .footer__social a) { min-height: 44px; min-width: 44px; }
.ui-surface .footer__legal a {
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
}
.ui-surface :is(a, button, summary, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}
.ui-surface ::selection { color: var(--bg); background: var(--accent-2); }
.ui-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Heading roles: Vela marketing, LuxAlgo utility, document and dashboard. */
.ui-surface [data-ui-heading] { font-weight: 500; letter-spacing: -.025em; text-wrap: balance; }
.ui-surface [data-ui-heading="section"] { font-size: var(--heading-size); line-height: var(--heading-line); }
.ui-surface [data-ui-heading="utility"] { font-size: 1.875rem; line-height: 1.2; }
.ui-surface [data-ui-heading="document"] { font-size: clamp(1.875rem, 3vw, 2.75rem); line-height: 1.15; }
.ui-surface [data-ui-heading="figure"] { font-size: 1.5rem; line-height: 1.3; }
.ui-surface [data-ui-heading="subsection"] { font-size: 1.125rem; line-height: 1.4; }
.ui-surface [data-ui-heading="dashboard"] { font-size: 1.375rem; line-height: 1.3; }
@media (max-width: 700px) {
  .ui-surface [data-ui-heading="utility"] { font-size: 1.5rem; line-height: 1.333333; }
  .ui-surface [data-ui-heading="figure"] { font-size: 1.25rem; }
  .ui-surface [data-ui-heading="dashboard"] { font-size: 1.125rem; }
}
@media (hover: hover) and (pointer: fine) {
  .ui-surface :is([data-ui-link="inline"], [data-ui-link="action"], [data-ui-link="metric"], .fund-copy):hover { color: var(--accent-2); }
}