/* FixOps Trails: front page blocks ([fx_trails_totals], [fx_trails_latest], [fx_trails_records]).
   Neutral dark defaults; a theme restyles the same classes and may set the --fxt-* variables. */
.fxt-totals, .fxt-latest, .fxt-records { --fxt-accent: #2DD9A8; --fxt-ink: #F2ECE6; --fxt-dim: #9aa39d; --fxt-panel: #141a18; --fxt-line: rgba(255, 255, 255, .10); color: var(--fxt-ink); }

.fxt-empty { color: var(--fxt-dim, #9aa39d); font-style: italic; }

.fxt-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; margin: 0; }
.fxt-totals__item { display: flex; flex-direction: column; gap: 4px; }
.fxt-totals__num { font: 700 clamp(30px, 5vw, 46px)/1 ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; color: var(--fxt-accent); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fxt-totals__label { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fxt-dim); }

.fxt-latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fxt-card { margin: 0; }
.fxt-card__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--fxt-line); border-radius: 16px; background: var(--fxt-panel); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.fxt-card__link:hover, .fxt-card__link:focus-visible { border-color: var(--fxt-accent); transform: translateY(-2px); }
.fxt-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: linear-gradient(160deg, #191f1c, #0c0e0d); }
.fxt-card__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.fxt-card__title { font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.fxt-card__date { font-size: 12.5px; color: var(--fxt-dim); }
.fxt-card__stats { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.fxt-card__stat { display: flex; align-items: center; gap: 10px; font: 600 15.5px/1.3 ui-monospace, "SF Mono", Consolas, monospace; color: var(--fxt-ink); }
.fxt-icon { flex: none; width: 20px; height: 20px; color: var(--fxt-accent); }
.fxt-card__pill { align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: rgba(45, 217, 168, .10); color: var(--fxt-accent); }
.fxt-card__pill--hard, .fxt-card__pill--expert { background: rgba(245, 166, 35, .14); color: #F5A623; }

.fxt-records { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fxt-record { display: flex; flex-direction: column; gap: 8px; padding: 26px; border: 1px solid var(--fxt-line); border-radius: 28px; background: var(--fxt-panel); color: inherit; text-decoration: none; transition: border-color .2s; }
.fxt-record:hover, .fxt-record:focus-visible { border-color: var(--fxt-accent); }
.fxt-record__label { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fxt-dim); }
.fxt-record__value { font: 700 34px/1.1 ui-monospace, "SF Mono", Consolas, monospace; color: var(--fxt-accent); }
.fxt-record__title { font-size: 15.5px; overflow-wrap: anywhere; }

/* Routes list: filter bar */
.fxt-list { --fxt-accent: #2DD9A8; --fxt-ink: #F2ECE6; --fxt-dim: #9aa39d; --fxt-panel: #141a18; --fxt-line: rgba(255, 255, 255, .10); color: var(--fxt-ink); }
.fxt-filters { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 18px; }
.fxt-filters__field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fxt-dim); }
.fxt-filters select { min-width: 170px; padding: 10px 14px; border: 1px solid var(--fxt-line); border-radius: 12px; background: var(--fxt-panel); color: var(--fxt-ink); font-family: inherit; font-size: 15.5px; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.fxt-filters select:focus-visible { outline: 2px solid var(--fxt-accent); outline-offset: 2px; }
.fxt-list__count { margin: 0 0 18px; font: 14px/1 ui-monospace, "SF Mono", Consolas, monospace; color: var(--fxt-dim); }
.fxt-list__none { color: var(--fxt-dim); font-style: italic; }
.fxt-card[hidden], .fxt-list__none[hidden] { display: none; }
.fxt-related__title { margin: 0 0 20px; }
.fxt-related { margin-top: 60px; }
.fxt-related .fxt-latest { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }