/*
 * tux canonical classes — VERBATIM PORTS from tti-ux@v2.0.0.
 *
 * Companion to tux-tokens.css (the generated kit file, vendored verbatim).
 * Each block below is copied from the tti-ux source named in its comment,
 * per the kit README's guidance for Forgejo overlay pages: reference the
 * canonical names, never invent private aliases. Re-vendor both files
 * together when bumping the tti-ux pin. Do not restyle here — divergence
 * is the drift class this file exists to end.
 *
 * Contents: @font-face (four-family rule; Public Sans deprecated and
 * omitted), heading--display, heading--bold, eyebrow/subhead,
 * card-static/card-linked (corner-drop), link-tti, tux-table,
 * tux-big-stat (BEM markup port, same classes as the Vue/React kit).
 */

/* ── @font-face — from app/assets/css/fonts.css, URLs re-based to ./fonts/ ── */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/oswald/oswald-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/oswald/oswald-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/oswald/oswald-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/work-sans/work-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/work-sans/work-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/work-sans/work-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url("/assets/fonts/work-sans/work-sans-latin-800-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans/open-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/open-sans/open-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/open-sans/open-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/open-sans/open-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* ── base — body rides the token layer (tux.md: Open Sans is the body lane) ── */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── heading--display — from app/assets/css/tux.css ── */
.heading--display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  position: relative;
  padding-bottom: 0.625rem;
}
.heading--display::after {
  content: "";
  display: block;
  width: 88px;
  height: 3px;
  background: var(--brand-accent);
  border-radius: 1.5px;
  margin-top: 0.75rem;
}

/* ── heading--bold + gold rule — from app/assets/css/globals.css ── */
.heading--bold {
  position: relative;
  padding-bottom: 0.5rem;
}
.heading--bold::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--brand-accent);
  border-radius: 1.5px;
  margin-top: 0.625rem;
}

/* ── eyebrow / subhead — from app/assets/css/globals.css ── */
.eyebrow,
.subhead {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  line-height: 1.4;
}
.eyebrow { margin-bottom: 0.25rem; }
.subhead { margin-top: 0.25rem; }

/* ── cards + corner-drop — from app/assets/css/tux.css (TuxCard chrome) ── */
.card-static,
.card-linked {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-lg);
}
.card-linked {
  position: relative;
  text-decoration: none;
  box-shadow: 0 0 0 0 rgba(92, 0, 37, 0);
  transition:
    transform 0.25s ease,
    box-shadow 0.35s ease-out,
    background 0.25s ease-out;
}
.card-linked:hover,
.card-linked:focus-visible {
  transform: translate(6px, -6px);
  box-shadow: -6px 6px 0 0 var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 3%, var(--surface-raised));
  outline: none;
}
.card-linked__arrow {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  color: var(--brand-primary);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate(4px, -4px);
  transition:
    opacity 0.2s ease-out,
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1.2);
}
.card-linked:hover .card-linked__arrow,
.card-linked:focus-visible .card-linked__arrow {
  opacity: 1;
  transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .card-linked, .card-linked__arrow { transition: none; }
  .card-linked:hover, .card-linked:focus-visible { transform: none; }
}

/* ── link-tti — from app/assets/css/tux.css ── */
.link-tti {
  color: var(--brand-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--brand-secondary) 35%, transparent);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.link-tti:hover,
.link-tti:focus-visible {
  color: color-mix(in srgb, var(--brand-secondary) 80%, black);
  text-decoration-color: currentColor;
}

/* ── tux-table frame — from app/assets/css/tux.css ── */
.tux-table {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  overflow: hidden;
}
.tux-table table { margin: 0; }

/* ── tux-big-stat — BEM port of TuxBigStat.vue (same classes as the React
      kit port; size tier `sm` inlined, tone via modifier) ── */
.tux-big-stat { display: flex; flex-direction: column; }
.tux-big-stat__value {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
  line-height: 0.95;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 4rem;
  color: var(--brand-primary);
}
.tux-big-stat--gold .tux-big-stat__value { color: var(--brand-accent); }
.tux-big-stat--neutral .tux-big-stat__value { color: var(--text-primary); }
.tux-big-stat__suffix {
  font-family: var(--font-bold);
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: inherit;
  margin-left: 0.25rem;
  opacity: 0.85;
  white-space: nowrap;
  font-size: 1.5rem;
}
.tux-big-stat__label {
  margin: 0.875rem 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-secondary);
  line-height: 1.4;
}
.tux-big-stat__source {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--text-muted);
  font-style: italic;
}

/* ── .style--bold — from app/assets/css/tux.css @v2.0.0 (global variant
   switch: Work Sans display, mixed-case, 800). Ported for methods.html. ── */
.style--bold {
  --font-display: var(--font-bold);
}
.style--bold h1,
.style--bold h2,
.style--bold h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}
.style--bold h1 { font-size: 2.75rem; line-height: 1.05; }
.style--bold h2 { font-size: 2.125rem; line-height: 1.1; }
.style--bold h3 { font-size: 1.625rem; line-height: 1.15; }