/* ============================================================================
   RELATED DOCUMENTS — single source of truth.
   Canonical CSS for the cross-link list (.related rows: type chip · code ·
   title · validity · animated arrow) + its container-query responsive collapse.
   Shared by comp-related.html and any future consumer. Pair with _related.js.
   Import AFTER colors_and_type.css + _chips.css. Raised surface flips via
   --color-bg-raised.
   ============================================================================ */

/* ── TABLE BEHAVIOUR — shared column tracks ──────────────────────────────
   The list is a GRID and every row subgrids its columns from it, so the five
   columns (type chip | code | title | validity | arrow) have the SAME width
   in every row — like a table. Notes:
   • column-gap is 0 ON PURPOSE — inter-column spacing is margins on the cells
     (type-cell/title/rel-sub/chip-cell/arrow), so a column that collapses at a
     breakpoint (display:none) takes its spacing with it and never leaves a
     double gap. (We also CANNOT restyle .related from its own @container
     query — size queries only match descendants — so the template must
     survive every breakpoint unchanged.)
   • The code column GROWS AND SHRINKS with its content between limits: floor
     --rel-code-min (steady column when every code is short), ceiling
     --rel-code-max (also bounded to a % of the list so wide codes can't starve
     the title in narrow containers — the template can't be changed from our
     own @container queries, so the guard must be intrinsic). Codes never
     break (nowrap); past the ceiling the edition pills WRAP to extra lines
     inside the cell instead of widening the column. The ceiling sits just
     above the longest real code (AECTP-400 ≈ 84px) ON PURPOSE — a code+pill
     pair always wraps, keeping the column tight and the title wide. */
.related {
  --rel-code-min: 64px;
  --rel-code-max: 92px;
  display: grid;
  grid-template-columns: max-content fit-content(min(var(--rel-code-max), 26%)) minmax(0, 1fr) max-content max-content;
  row-gap: 8px; column-gap: 0;
  container: rel / inline-size;
}
.related a {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  background: var(--color-bg-raised);
  text-decoration: none;
  color: var(--color-fg-default);
  font-size: 13.5px;
  cursor: pointer;
  /* Base transition covers hover snap + the focus-ring EXIT (focus→rest).
     The focus selector below overrides box-shadow to the 220ms expo-out
     bloom for the rest→focus entry. System recipe — see notes/decisions.md
     "Focus-ring bloom pattern is system-wide." */
  transition: border-color 120ms ease-out, background 120ms ease-out, box-shadow 140ms ease-out;
}
.related a:hover,
.related a[data-state="hover"] {
  border-color: var(--gov-color-primary-500);
  background: var(--gov-color-primary-50);
}
.related a:active,
.related a[data-state="pressed"] {
  border-color: var(--gov-color-primary-700);
  background: var(--gov-color-primary-100);
}
/* Unresolved refs — referenced by the register but absent from this dataset:
   non-navigable. The renderer omits the chevron; here the row keeps its rest
   look under hover/press (no pointer, no lift). Text stays selectable —
   content surfaces never suppress selection (system rule). */
.related a.is-unresolved,
.related a.is-unresolved:hover,
.related a.is-unresolved[data-state="hover"],
.related a.is-unresolved:active,
.related a.is-unresolved[data-state="pressed"] {
  cursor: default;
  border-color: var(--color-border-default);
  background: var(--color-bg-raised);
}

/* .id-cell GROUPS type chip + code in the markup — display:contents at wide
   widths so each sits on its own track; at ≤480 it becomes a real stacked
   cell (chip above code) so the pair shares one column. */
.related .id-cell { display: contents; }
/* Doc-type chip cell — column 1, vertically centred over the whole row (span
   both content rows; row 2 is empty on single-line rows, which is harmless
   because the row's own row-gap is 0). The min-width keeps a steady left
   column even when every chip in the list is narrow. */
.related .type-cell { grid-column: 1; grid-row: 1 / span 2; min-width: 72px; margin-right: 12px; display: inline-flex; align-items: center; }
/* .main only GROUPS code + title + sub-line in the markup — display:contents
   promotes its children to row cells so they sit on the shared tracks. (At the
   smallest breakpoint it becomes a real block again and they flow inline.) */
.related .main { display: contents; }
/* Code cell — column 2. Wraps: the code itself never breaks, but edition /
   amendment pills drop to extra lines when the column hits its ceiling. The
   whole cell is vertically CENTRED over the row (same as the chips/arrow). */
.related .rel-code {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  min-width: var(--rel-code-min);
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 6px; row-gap: 3px;
}
.related .code {
  font-family: var(--font-mono); color: var(--color-fg-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 500; white-space: nowrap;
}
/* Dimmed edition / amendment pill beside the code — mirrors comp-doc-card's
   .pill (mono, tight tracking, token tint so it flips in dark). */
.related .rel-pill {
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: -0.02em; line-height: 1.4;
  color: var(--color-fg-secondary); background: var(--gov-color-neutral-100);
  padding: 1px 5px; border-radius: 3px;
}
.related .rel-pill .abbr { color: var(--gov-color-neutral-500); font-weight: 400; }
.related .rel-pill--am { background: var(--gov-color-warning-50); color: var(--gov-color-warning-700); }
.related .rel-pill--am .abbr { color: var(--gov-color-warning-700); opacity: 0.65; }
.related .title { grid-column: 3; grid-row: 1; align-self: baseline; margin-left: 12px; min-width: 0; text-wrap: pretty; }
/* Sub-line UNDER the title (same column, own row): a small relation BADGE
   (Souvisí / Přejímá / Zavádí / Nahrazeno) and/or the source descriptor, in
   smaller muted type — off the code column, so codes stay code-only and
   aligned. Optional: rows without it stay single-line. */
.related .rel-sub { grid-column: 3; grid-row: 2; margin: 2px 0 0 12px; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11.5px; color: var(--color-fg-tertiary); line-height: 1.3; }
.related .rel-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.related .rel-tag {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1.5px 6px; border-radius: 3px;
  background: var(--gov-color-neutral-100); color: var(--color-fg-secondary);
}
.related .rel-tag--adopt { background: var(--gov-color-primary-50); color: var(--gov-color-primary-700); }
.related .rel-tag--replace { background: var(--gov-color-neutral-100); color: var(--gov-color-warning-700); }
/* Validity — column 4, right-aligned against the arrow. The shared track is
   sized by the widest chip in the list, narrower chips align right inside it. */
.related .chip-cell { grid-column: 4; grid-row: 1 / span 2; margin-left: 12px; display: inline-flex; justify-content: flex-end; }

/* The doc-type chip carries the dot/full/short spans (like comp-doc-card / table)
   so the combined Tweaks panel's "Type chip" treatment (filled / outlined / dot)
   and the responsive short form both work without per-row markup changes. */
.related .dc-chip__short { display: none; }

/* ── Arrow — grows + brightens + thickens on hover AND focus, animated ─────
   Rest: muted, default size. Active (hover / keyboard focus / forced): scales
   up, nudges right, recolours to primary-600, gains stroke weight so it reads
   as the row's clear CTA. transform (GPU) + color animate; system reduced-motion
   collapses them. transform-origin right so growth pushes toward the row edge. */
.related .arrow {
  grid-column: 5; grid-row: 1 / span 2; margin-left: 12px;
  color: var(--color-fg-tertiary);
  font-size: 14px;
  -webkit-text-stroke: 0 currentColor;
  transform: translateX(0) scale(1);
  transform-origin: right center;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              color 140ms ease-out,
              -webkit-text-stroke-width 180ms ease-out;
}
.related a:hover .arrow,
.related a[data-state="hover"] .arrow,
.related a:focus-visible .arrow,
.related a.is-focus .arrow {
  color: var(--gov-color-primary-600);
  transform: translateX(3px) scale(1.4);
  -webkit-text-stroke-width: 0.6px;
}

/* Focus ring — :focus-visible for real keyboard nav (the global a:focus-visible
   already paints a ring; restated here to attach z-index + keep the 4px radius)
   plus .is-focus, which the playground stamps on every link at once. Links are
   grid siblings; z-index:1 keeps the ring above neighbours and the truly-focused
   link goes to 2 so it sits above forced-focus siblings. */
.related a:focus-visible,
.related a.is-focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 4px;
  position: relative;
  z-index: 1;
  /* Two-tier bloom: 220ms expo-out on entry; the 140ms base covers exit. */
  transition: box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 140ms ease-out, background 120ms ease-out;
}
.related a:focus-visible { z-index: 2; }

/* ── Responsive collapse (container queries) ──────────────────────────────
   As the list narrows: validity → icon-only (it collapses EARLY since it's
   least critical); doc-type chip → short form; type + code MERGE into one
   stacked cell (chip above code); validity dropped; finally — when low on
   space — all chips are gone and code + title flow inline as running text.
   Short-form swap mirrors comp-table; validity icon-only mirrors comp-doc-card. */
@container rel (max-width: 680px) {
  /* Validity collapses to its icon EARLY (it's the least critical column); the
     tooltip preserves the full label. */
  .related .vchip { padding: 0; gap: 0; justify-content: center; width: 22px; height: 22px; box-sizing: border-box; }
  .related .vchip .chip-label { display: none; }
  .related .vchip i { margin: 0; top: 0; }
}
@container rel (max-width: 540px) {
  .related .dc-chip__full  { display: none; }
  .related .dc-chip__short { display: inline; }
  .related .type-cell { min-width: 58px; }
}
@container rel (max-width: 480px) {
  /* Merge type + code into ONE stacked cell (chip above code), centred over
     the row — frees a whole column for the title. .id-cell stops being
     display:contents and becomes the real cell spanning both tracks (the
     emptied code track collapses to 0). */
  .related .id-cell {
    display: inline-flex; flex-direction: column; align-items: flex-start; row-gap: 5px;
    grid-column: 1 / 3; grid-row: 1 / span 2; align-self: center;
    margin-right: 12px; max-width: 96px;
  }
  .related .type-cell { min-width: 0; margin-right: 0; }
  /* align-self: flex-start overrides the base `center` (grid block-axis), which
     in this column flex context would horizontally CENTRE short codes. */
  .related .rel-code { min-width: 0; align-self: flex-start; }
}
@container rel (max-width: 400px) {
  /* Validity is secondary — drop it early. Its column track collapses to 0 and
     its margin goes with it (spacing is margins, not column-gap). */
  .related .chip-cell { display: none; }
}
@container rel (max-width: 340px) {
  /* Low on space: drop ALL chips and flow code (+ pills) + title inline as one
     running line. The anchor leaves the grid (block flow): .id-cell/.main go
     inline, the sub-line keeps display:flex so it stays a line of its own, and
     the arrow pins to the right edge, vertically centred. */
  .related a { display: block; position: relative; padding-right: 38px; }
  .related .type-cell { display: none; }
  .related .id-cell { display: inline; margin-right: 0; max-width: none; }
  .related .rel-code { display: inline; }
  .related .code { margin-right: 7px; }
  .related .rel-pill { margin-right: 7px; }
  .related .main { display: inline; }
  .related .title { display: inline; margin-left: 0; }
  .related .rel-sub { margin-left: 0; }
  .related .arrow { position: absolute; right: 14px; top: 50%; margin: -7px 0 0; }
}