/* ═══════════════════════════════════════════════════════════════════════════
   Components — cards, media, badges, buttons, forms, pagination, panels.
   Every colour comes from a token; every category accent reads var(--cat).
   ═══════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── Figure ──────────────────────────────────────────────────────────────
     The box is normalised here, not by the image file. The small/medium/large
     variants are *fit* (not crop), so their intrinsic ratios vary per upload;
     aspect-ratio + object-fit:cover is what makes a feed of mixed uploads sit
     on one grid.
     ────────────────────────────────────────────────────────────────────── */
  .tr-figure {
    position: relative;
    overflow: hidden;
    background: var(--surface-inset);
    border-radius: var(--radius-media);
    aspect-ratio: var(--tr-ratio, 3 / 2);
  }
  .tr-figure__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: var(--transition-photo);
  }
  /* Never text on a photograph without one of these. */
  .tr-figure__scrim {
    position: absolute; inset: 0;
    background: var(--scrim-photo);
    pointer-events: none;
  }

  /* Glass capsule marking post format — one of the two places blur is used. */
  .tr-fmt {
    position: absolute; inset: auto auto var(--space-3) var(--space-3);
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding-inline: 10px;
    background: var(--surface-glass-dark);
    -webkit-backdrop-filter: var(--blur-capsule);
    backdrop-filter: var(--blur-capsule);
    color: var(--text-inverse);
    font-size: var(--text-3xs); font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label); text-transform: uppercase;
    border-radius: var(--radius-pill);
  }

  /* ── Card ────────────────────────────────────────────────────────────────
     Five variants driven by three custom properties, not five rule blocks.
     ────────────────────────────────────────────────────────────────────── */
  .tr-card {
    --tr-ratio: 3 / 2;
    --tr-title: var(--text-md);
    --tr-cols: 1fr;
    --tr-pad: var(--card-pad-tight);
    position: relative;
    display: grid;
    grid-template-columns: var(--tr-cols);
    background: var(--surface-card);
    border: var(--border-w-hair) solid var(--border-hairline);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: var(--transition-card);
  }
  .tr-card__body { display: grid; gap: var(--space-3); align-content: start; padding: var(--tr-pad); }
  /* Grid children stretch by default, which would blow the pill out to the
     full card width. Only the inline-level chips need pinning back. */
  .tr-card__body > .tr-cat,
  .tr-card__body > .tr-meta { justify-self: start; }
  .tr-card__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--tr-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    text-wrap: pretty;
  }
  .tr-card__title a { color: inherit; }
  .tr-card__excerpt {
    margin: 0;
    font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden;
  }
  /* Clamp rather than truncate in Go: the core's `truncate` slices BYTES and
     cuts Cyrillic mid-rune, emitting a replacement character. */

  /* Stretched link — whole card clickable, accessible name stays on the title,
     and the category chip remains independently clickable above it. */
  .tr-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .tr-card .tr-cat, .tr-card .tr-fmt { position: relative; z-index: 1; }
  /* Scoped to match the specificity of the .tr-card .tr-cat rule above —
     unscoped, (0,1,0) loses to (0,2,0) and the chip drops back into flow
     inside the figure, where overflow:hidden clips it out of sight. */
  .tr-card .tr-card__cat { position: absolute; inset: var(--space-3) auto auto var(--space-3); z-index: 1; }

  .tr-card__link:focus-visible { outline: none; box-shadow: none; }
  .tr-card:has(.tr-card__link:focus-visible) { box-shadow: var(--ring-focus); }
  @supports not selector(:has(*)) {
    .tr-card__link:focus-visible { box-shadow: var(--ring-focus); border-radius: var(--radius-card); }
  }

  @media (hover: hover) {
    .tr-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(var(--hover-lift)); }
    .tr-card:hover .tr-figure__img { transform: scale(var(--hover-photo-scale)); }
  }
  .tr-card:active { transform: translateY(var(--press-sink)); box-shadow: var(--shadow-card); }

  /* — variants — */
  .tr-card--feature { --tr-ratio: 16 / 9; --tr-title: var(--text-xl); --tr-pad: var(--card-pad); }

  .tr-card--lead,
  .tr-card--hero {
    --tr-ratio: 16 / 9;
    --tr-title: var(--text-3xl);
    border: 0; background: var(--cobalt-900);
    min-height: 320px;
  }
  .tr-card--lead .tr-card__media,
  .tr-card--hero .tr-card__media {
    position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0;
  }
  .tr-card--lead .tr-card__body,
  .tr-card--hero .tr-card__body {
    position: relative; align-self: end;
    gap: var(--space-4); padding: var(--space-8);
    max-width: 700px;
  }
  .tr-card--hero { min-height: 200px; --tr-title: var(--text-lg); }
  .tr-card--hero .tr-card__body { padding: var(--space-5); gap: var(--space-3); }

  .tr-card--list {
    --tr-cols: 96px 1fr;
    --tr-ratio: 4 / 3;
    --tr-title: var(--text-sm);
    --tr-pad: 0;
    gap: var(--space-4);
    align-items: start;
    border: 0; background: none; border-radius: 0;
  }
  .tr-card--list:hover { box-shadow: none; transform: none; }
  .tr-card--list .tr-card__media { border-radius: var(--radius-media); }
  .tr-card--list .tr-card__body { gap: var(--space-2); }

  .tr-card--text {
    --tr-cols: 32px 1fr;
    --tr-title: var(--text-sm);
    --tr-pad: 0;
    gap: var(--space-4);
    align-items: start;
    padding-bottom: var(--space-4);
    border: 0; border-bottom: var(--border-w-hair) solid var(--border-hairline);
    background: none; border-radius: 0;
  }
  .tr-card--text:hover { box-shadow: none; transform: none; }
  .tr-card--text:last-child { border-bottom: 0; padding-bottom: 0; }
  .tr-card--text .tr-card__body { gap: var(--space-2); }
  .tr-card__rank {
    font-family: var(--font-display);
    font-size: var(--text-2xl); font-weight: var(--fw-bold);
    line-height: 1; letter-spacing: var(--ls-display);
    color: var(--wash-300);
    transition: var(--transition-color);
  }
  .tr-card--text:hover .tr-card__rank { color: var(--cat); }
  .tr-card--text:hover .tr-card__title { color: var(--text-link); }

  /* ── Category chip ───────────────────────────────────────────────────────
     Three skins, all reading var(--cat), which the data-cat map sets.
     ────────────────────────────────────────────────────────────────────── */
  .tr-cat {
    display: inline-flex; align-items: center;
    font-family: var(--font-sans);
    font-size: var(--text-3xs); font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label); text-transform: uppercase;
    line-height: 1; white-space: nowrap;
    color: var(--cat);
  }
  .tr-cat--solid {
    height: 22px; padding-inline: 9px;
    background: var(--cat); color: var(--text-inverse);
    border-radius: var(--radius-badge);
  }
  .tr-cat--solid:hover { filter: brightness(.92); color: var(--text-inverse); }
  .tr-cat--bar { gap: 8px; color: var(--text-muted); }
  .tr-cat--bar::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--cat); }
  a.tr-cat--bar:hover { color: var(--cat); }

  /* ── Meta row ────────────────────────────────────────────────────────── */
  .tr-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    font-family: var(--type-meta-family);
    font-size: var(--type-meta-size);
    font-weight: var(--type-meta-weight);
    line-height: var(--type-meta-lh);
    color: var(--text-muted);
  }
  .tr-meta__item { display: inline-flex; align-items: center; gap: 5px; }
  .tr-meta__item + .tr-meta__item::before { content: "·"; margin-inline-end: 5px; color: var(--text-faint); }
  .tr-on-dark .tr-meta { color: var(--text-inverse-muted); }

  /* ── Section header — the 3px accent rule is the brand signature ─────── */
  .tr-sechead {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-6); margin-bottom: var(--space-6);
  }
  .tr-sechead__text { display: grid; gap: var(--space-2); justify-items: start; }
  .tr-sechead__title {
    margin: 0; font-size: var(--text-2xl); font-weight: var(--fw-bold);
    line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
  }
  .tr-sechead__rule {
    width: 40px; height: var(--border-w-rule);
    background: var(--cat); border-radius: 2px; margin-top: 2px;
  }
  .tr-sechead--lg .tr-sechead__title { font-size: var(--text-3xl); }
  .tr-sechead--lg .tr-sechead__rule { width: 56px; }
  .tr-sechead__action {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding-bottom: 4px; min-height: var(--tap-min);
    font-size: var(--text-sm); font-weight: var(--fw-semibold);
  }

  /* ── Buttons ─────────────────────────────────────────────────────────── */
  .tr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--tap-min); padding: 0 var(--space-6);
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-semibold);
    border: var(--border-w-hair) solid transparent;
    border-radius: var(--radius-button);
    background: var(--cobalt-600); color: var(--text-inverse);
    cursor: pointer;
    transition: var(--transition-color), box-shadow var(--dur-base), transform var(--dur-base);
  }
  .tr-btn:hover { background: var(--cobalt-700); color: var(--text-inverse); }
  .tr-btn:active { transform: translateY(var(--press-sink)); box-shadow: none; }
  .tr-btn[disabled], .tr-btn[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; }

  .tr-btn--ghost {
    background: transparent; color: var(--text-link);
    border-color: var(--border-strong);
  }
  .tr-btn--ghost:hover { background: var(--surface-brand-soft); color: var(--cobalt-700); border-color: var(--cobalt-600); }
  .tr-btn--sun { background: var(--sun-500); color: var(--wash-900); }
  .tr-btn--sun:hover { background: var(--sun-600); color: var(--wash-900); }
  .tr-btn--block { width: 100%; }

  /* htmx sets .htmx-request on the requesting element for the request's life. */
  .tr-btn__spin {
    width: 14px; height: 14px; border-radius: var(--radius-round);
    border: 2px solid currentColor; border-top-color: transparent;
    display: none;
  }
  .tr-btn.htmx-request .tr-btn__label { opacity: .45; }
  .tr-btn.htmx-request .tr-btn__spin { display: block; animation: tr-spin .7s linear infinite; }
  @keyframes tr-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .tr-btn.htmx-request .tr-btn__spin { animation-duration: 2s; }
  }

  /* ── Tags ────────────────────────────────────────────────────────────── */
  .tr-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .tr-tag {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding-inline: 11px;
    background: var(--surface-sunken); color: var(--text-body);
    font-size: var(--text-2xs); font-weight: var(--fw-medium);
    border-radius: var(--radius-pill);
    transition: var(--transition-color);
  }
  /* Keeps the visual pill small while giving it a 44px hit area. */
  .tr-tag::before {
    content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%;
    translate: 0 -50%; block-size: var(--tap-min);
  }
  .tr-tag:hover { background: var(--cobalt-600); color: var(--text-inverse); }
  .tr-tag__count { font-family: var(--font-mono); font-size: var(--text-3xs); opacity: .6; }

  /* ── Panels (sidebar blocks) ─────────────────────────────────────────── */
  .tr-aside { display: grid; gap: var(--block-gap); align-content: start; }
  .tr-panel {
    display: grid; gap: var(--space-3); align-content: start;
    padding: var(--card-pad);
    background: var(--surface-card);
    border: var(--border-w-hair) solid var(--border-hairline);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }
  .tr-panel__title { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-bold); }
  .tr-panel__body { margin-top: var(--space-2); }
  .tr-stack { display: grid; gap: var(--space-4); }

  .tr-catlist { margin: 0; padding: 0; list-style: none; display: grid; }
  .tr-catlist__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin: 0; min-height: var(--tap-min);
    border-bottom: var(--border-w-hair) solid var(--border-hairline);
  }
  .tr-catlist__item:last-child { border-bottom: 0; }
  .tr-catlist__item a { flex: 1; padding-block: var(--space-2); font-size: var(--text-sm); color: var(--text-body); }
  .tr-catlist__item:hover a { color: var(--cat); }
  .tr-catlist__count { color: var(--text-faint); font-size: var(--text-2xs); }

  /* ── Breadcrumb ──────────────────────────────────────────────────────── */
  .tr-crumbs__list {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    margin: 0; padding: 0; list-style: none;
    font-size: var(--text-xs); color: var(--text-muted);
  }
  .tr-crumbs__list li { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); }
  .tr-crumbs__list li + li::before { content: "›"; color: var(--text-faint); }
  .tr-crumbs__list a { color: var(--text-muted); }
  .tr-crumbs__list a:hover { color: var(--cat); }
  .tr-crumbs__list [aria-current] { color: var(--text-body); }

  /* ── Pagination ──────────────────────────────────────────────────────── */
  .tr-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .tr-pager__link {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: var(--tap-min); min-height: var(--tap-min); padding-inline: var(--space-3);
    font-size: var(--text-sm); font-weight: var(--fw-semibold);
    color: var(--text-body);
    border: var(--border-w-hair) solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    transition: var(--transition-color);
  }
  .tr-pager__link:hover { border-color: var(--cobalt-600); color: var(--cobalt-700); }
  .tr-pager__link[aria-current] { background: var(--cobalt-600); border-color: var(--cobalt-600); color: var(--text-inverse); }
  .tr-pager__gap { padding-inline: var(--space-2); color: var(--text-faint); }

  /* ── Results wrapper ─────────────────────────────────────────────────── */
  .tr-feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
  .tr-feed--single { grid-template-columns: 1fr; }
  .tr-feed--3up { grid-template-columns: repeat(3, 1fr); }
  .tr-results__foot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-9);
  }
  .tr-results.htmx-request { opacity: .55; transition: opacity var(--dur-fast); }

  .tr-empty {
    padding: var(--space-10) var(--space-6);
    text-align: center;
    background: var(--surface-card);
    border: var(--border-w-hair) solid var(--border-hairline);
    border-radius: var(--radius-card);
  }
  .tr-empty__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
  .tr-empty__hint { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

  /* ── Search field ────────────────────────────────────────────────────── */
  .tr-search { position: relative; display: flex; align-items: center; width: 100%; }
  .tr-search__input {
    flex: 1; min-width: 0;
    height: 40px; padding: 0 var(--space-10) 0 var(--space-4);
    font: inherit; font-size: var(--text-sm); color: var(--text-body);
    background: var(--surface-card);
    border: var(--border-w-hair) solid var(--border-hairline);
    border-radius: var(--radius-pill);
    transition: var(--transition-color);
  }
  .tr-search__input:hover { border-color: var(--border-strong); }
  .tr-search__submit {
    position: absolute; inset-inline-end: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: none; border: 0; cursor: pointer; color: var(--text-muted);
    border-radius: var(--radius-round);
  }
  .tr-search__submit:hover { color: var(--cobalt-600); }

  .tr-search--topbar .tr-search__input {
    height: 26px; padding-inline: 11px 30px;
    font-size: var(--text-2xs);
    background: rgba(255,255,255,.12);
    border-color: transparent; color: var(--wash-0);
  }
  .tr-search--topbar .tr-search__input::placeholder { color: rgba(255,255,255,.6); }
  .tr-search--topbar .tr-search__submit { width: 26px; height: 26px; color: rgba(255,255,255,.75); }
  .tr-search--topbar .tr-search__submit:hover { color: var(--wash-0); }

  .tr-search--page .tr-search__input { height: 52px; font-size: var(--text-md); padding-inline: var(--space-6) var(--space-11); }
  .tr-search--page .tr-search__submit { width: 42px; height: 42px; inset-inline-end: 5px; }

  /* ── Form controls (pages/form.html) ─────────────────────────────────── */
  .tr-field { display: grid; gap: var(--space-2); }
  .tr-field__label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
  .tr-field__req { color: var(--state-danger); }
  .tr-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
  .tr-field__error { font-size: var(--text-xs); color: var(--state-danger); }
  .tr-input, .tr-select, .tr-textarea {
    width: 100%; min-height: var(--tap-min); padding: var(--space-3) var(--space-4);
    font: inherit; font-size: var(--text-sm); color: var(--text-body);
    background: var(--surface-card);
    border: var(--border-w-hair) solid var(--border-hairline);
    border-radius: var(--radius-input);
    transition: var(--transition-color);
  }
  .tr-textarea { min-height: 120px; resize: vertical; }
  .tr-input:hover, .tr-select:hover, .tr-textarea:hover { border-color: var(--border-strong); }
  .tr-field--error :is(.tr-input,.tr-select,.tr-textarea) { border-color: var(--state-danger); }
  .tr-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); font-size: var(--text-sm); }
  .tr-check input { width: 18px; height: 18px; accent-color: var(--cobalt-600); }

  /* ── Alert — 3px accent rule on the leading edge ─────────────────────── */
  .tr-alert {
    display: grid; gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-md);
    border-inline-start: var(--border-w-rule) solid var(--state-info);
    background: var(--state-info-soft);
    color: var(--text-body);
  }
  .tr-alert__title { font-weight: var(--fw-semibold); color: var(--text-strong); }
  .tr-alert--success { border-inline-start-color: var(--state-success); background: var(--state-success-soft); }
  .tr-alert--warning { border-inline-start-color: var(--state-warning); background: var(--state-warning-soft); }
  .tr-alert--danger  { border-inline-start-color: var(--state-danger);  background: var(--state-danger-soft); }

  /* ── Byline / share ──────────────────────────────────────────────────── */
  .tr-byline { display: flex; align-items: center; gap: var(--space-3); }
  .tr-byline__avatar { width: 40px; height: 40px; border-radius: var(--radius-avatar); object-fit: cover; }
  .tr-byline__name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
  .tr-byline__role { font-size: var(--text-xs); color: var(--text-muted); }
  .tr-share { display: flex; align-items: center; gap: var(--space-3); }
  .tr-share__label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
  .tr-share__link {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: var(--radius-round);
    border: var(--border-w-hair) solid var(--border-hairline);
    background: var(--surface-card); color: var(--text-muted);
  }
  .tr-share__link:hover { border-color: var(--cobalt-600); color: var(--cobalt-600); }

  /* ── Stat counter — editorial figures inside authored bodies ─────────── */
  .tr-stats { display: flex; flex-wrap: wrap; gap: var(--space-9); }
  .tr-stat { display: grid; gap: var(--space-1); }
  .tr-stat__value {
    font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-bold);
    line-height: 1; letter-spacing: var(--ls-display); color: var(--cat);
  }
  .tr-stat__unit { font-size: var(--text-lg); font-weight: var(--fw-semibold); }
  .tr-stat__label { font-size: var(--text-xs); color: var(--text-muted); }

  /* ── Pull quote ──────────────────────────────────────────────────────── */
  .tr-quote {
    display: grid; gap: var(--space-3);
    margin: var(--space-8) 0; padding-inline-start: var(--space-6);
    border-inline-start: var(--border-w-rule) solid var(--sun-500);
  }
  .tr-quote__text { font-size: var(--text-xl); line-height: var(--lh-normal); color: var(--text-strong); }
  .tr-quote__by { font-size: var(--text-xs); color: var(--text-muted); }

  /* ── Comment (CSS only — oCMS has no comments module; ships so authored
        content and any future module can use it) ───────────────────────── */
  .tr-comment {
    display: grid; gap: var(--space-2);
    padding: var(--space-5);
    background: var(--surface-card);
    border: var(--border-w-hair) solid var(--border-hairline);
    border-radius: var(--radius-card);
  }
  .tr-comment--reply { margin-inline-start: var(--space-9); background: var(--surface-sunken); }
  .tr-comment__head { display: flex; align-items: center; gap: var(--space-3); }
  .tr-comment__author { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
  .tr-comment__date { font-size: var(--text-xs); color: var(--text-muted); }

  /* ── Responsive ──────────────────────────────────────────────────────── */
  @media (max-width: 767px) {
    .tr-feed, .tr-feed--3up { grid-template-columns: 1fr; }
    .tr-card--lead .tr-card__body { padding: var(--space-5); }
    .tr-card--lead { --tr-title: var(--text-xl); min-height: 260px; }
    .tr-sechead { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .tr-results__foot { flex-direction: column; align-items: stretch; }
    .tr-stats { gap: var(--space-6); }
  }
}