/* /samples/ — four films on the light box, one beam between the key cells.
   Tokens, faces and the hero come from /site.css; everything here is sx-. */

.sx-page { background: var(--plate); }

/* ---- hero: the site's film ground, with the fund picker on it ---------- */
.sx-hero { padding-bottom: 44px; }
.sx-hero::after { display: none; }              /* the beam is drawn below, between the films */
.sx-hero .sx-standfirst { max-width: 62ch; }
.sx-follow { position: relative; z-index: 1; margin-top: 30px; max-width: 640px; }
.sx-follow-label {
  display: block;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lumen);
  margin-bottom: 10px;
}
.sx-follow-row { display: flex; gap: 8px; align-items: stretch; }
.sx-combo { position: relative; flex: 1 1 auto; min-width: 0; }
.sx-search {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.98rem;
  color: #fff;
  background: var(--film-deep);
  border: 1px solid rgba(232, 237, 238, 0.34);
  border-radius: 7px;
  padding: 12px 14px;
  outline: none;
}
.sx-search::placeholder { color: rgba(232, 237, 238, 0.5); font-family: var(--body); }
.sx-search:focus { border-color: var(--lumen); box-shadow: 0 0 0 2px rgba(95, 224, 230, 0.35); }
.sx-step {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 1rem;
  color: var(--plate);
  background: var(--film);
  border: 1px solid rgba(232, 237, 238, 0.34);
  border-radius: 7px;
  width: 44px;
  cursor: pointer;
}
.sx-step:hover, .sx-step:focus-visible { border-color: var(--lumen); color: var(--lumen); outline: none; }
.sx-step:disabled { opacity: 0.35; cursor: default; }
.sx-results {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  list-style: none;
  margin: 0; padding: 6px 0;
  background: var(--film-deep);
  border: 1px solid var(--rule-film);
  border-radius: 7px;
  max-height: 340px;
  overflow-y: auto;
  z-index: 5;
}
.sx-results li {
  display: grid;
  grid-template-columns: 7ch 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 14px;
  margin: 0;
  cursor: pointer;
  color: var(--plate);
  font-size: 0.9rem;
}
.sx-results li[aria-selected="true"], .sx-results li:hover { background: rgba(95, 224, 230, 0.12); }
.sx-results .sx-r-ticker { font-family: var(--mono); color: var(--lumen); font-weight: 500; }
.sx-results .sx-r-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-results .sx-r-aum { font-family: var(--mono); font-size: 0.8rem; color: var(--on-film-dim); }
.sx-results .sx-r-empty { grid-template-columns: 1fr; color: var(--on-film-dim); cursor: default; }
.sx-current {
  margin-top: 12px !important;
  font-size: 0.95rem !important;
  color: var(--on-film-dim) !important;
}
.sx-current strong { color: #fff; font-weight: 600; }
.sx-current code { font-family: var(--mono); color: var(--lumen); font-size: 0.9em; }

/* the whole-set archives, one row under the standfirst */
.sx-bundles { position: relative; z-index: 1; margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sx-bundles[hidden] { display: none; }          /* display: flex above would otherwise beat the hidden attribute */
.sx-bundles-label {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lumen);
}
.sx-bundles-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sx-bundles .sx-dl-btn { font-size: 0.82rem; padding: 8px 14px; }

/* ---- main column ------------------------------------------------------ */
.sx-main { max-width: 1180px; padding-top: 40px; }
.sx-main :where(h2) { margin-top: 0; }
.sx-main section + section { margin-top: 48px; }

/* downloads: the eight files as one table, rows and bytes stated */
.sx-dl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  border-top: 3px solid var(--beam);
  margin-top: 6px;
}
.sx-dl-table th, .sx-dl-table td { text-align: left; padding: 10px 14px 10px 0; vertical-align: middle; }
.sx-dl-table thead th {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.sx-dl-table tbody td { border-bottom: 1px solid var(--rule-soft); }
.sx-dl-table tbody th { border-bottom: 1px solid var(--rule-soft); font-weight: 400; }
.sx-dl-table code { font-family: var(--mono); font-size: 0.86rem; color: var(--film); background: none; border: 0; padding: 0; }
.sx-dl-table .sx-num { font-family: var(--mono); font-size: 0.84rem; white-space: nowrap; }
.sx-dl-table .sx-grain { color: rgba(18, 33, 42, 0.7); }
.sx-dl-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sx-dl-btn {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--film);
  background: var(--beam);
  border: 1px solid var(--beam);
  border-radius: 6px;
  padding: 7px 12px;
  white-space: nowrap;
}
.sx-dl-btn:hover, .sx-dl-btn:focus-visible { background: var(--lumen); border-color: var(--lumen); outline: none; }
.sx-dl-btn small { font-weight: 400; opacity: 0.8; margin-left: 6px; font-family: var(--mono); }

/* legend: the three keys, each drawn in the stroke its beam uses */
.sx-legend { list-style: none; margin: 14px 0 22px !important; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.sx-legend li { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 0.9rem; }
.sx-legend svg { width: 44px; height: 8px; flex: none; }
.sx-legend code { font-family: var(--mono); background: none; border: 0; padding: 0; color: var(--film); font-weight: 500; }

/* ---- the light box: four films, beams between them --------------------- */
.sx-lightbox { position: relative; display: flex; flex-direction: column; gap: 46px; margin-left: 60px; }
.sx-beams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
/* One colour per key ROLE — the beam, the legend swatch and the key cell's
   outline share it. Roles, not column names: the class key is "isin" in one
   cut of the files and "fund_id" in the next (app.js sets data-key-role from
   which file's key a column is). */
:root { --k-class: #00A3AD; --k-portfolio: #7FD3FF; --k-parent: #F2B84B; }
.sx-beams path { fill: none; stroke: var(--beam); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sx-beams path.sx-dash { stroke-dasharray: 10 8; }
.sx-beams path.sx-dot { stroke-dasharray: 1 8; }
.sx-beams circle { fill: var(--beam); }
/* the drawn beams sit back at a quarter strength so the cells they connect
   stay the brightest thing; the legend swatches keep full strength to read */
.sx-beams path, .sx-beams circle { opacity: 0.25; }
/* the beams carry the .sx-beams ancestor so the role colour outranks the
   plain teal default above */
.sx-k-class, .sx-beams .sx-k-class { stroke: var(--k-class); fill: var(--k-class); }
.sx-k-portfolio, .sx-beams .sx-k-portfolio { stroke: var(--k-portfolio); fill: var(--k-portfolio); }
.sx-k-parent, .sx-beams .sx-k-parent { stroke: var(--k-parent); fill: var(--k-parent); }
.sx-beams path.sx-k-class, .sx-beams path.sx-k-portfolio, .sx-beams path.sx-k-parent { fill: none; }
.sx-legend svg path { stroke-width: 4; stroke-linecap: round; fill: none; }

.sx-film {
  position: relative;
  background: var(--film);
  background-image: var(--hatch);
  color: var(--plate);
  border: 1px solid var(--rule-film);
  border-radius: 12px;
  padding: 8px;
}
.sx-film-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: 10px 12px 12px;
}
.sx-film-name {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}
.sx-film-title {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lumen);
}
.sx-film-count { font-size: 0.86rem; color: var(--on-film-dim); }
.sx-film-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.sx-toggle {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--plate);
  background: transparent;
  border: 1px solid rgba(232, 237, 238, 0.34);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.sx-toggle[aria-pressed="true"] { background: var(--beam); border-color: var(--beam); color: var(--film); }
.sx-toggle:hover, .sx-toggle:focus-visible { border-color: var(--lumen); outline: none; }
.sx-film .sx-dl-btn { padding: 6px 10px; font-size: 0.72rem; }

.sx-scroll { overflow-x: auto; overflow-y: auto; max-height: 420px; border-radius: 8px; background: var(--film-deep); }
/* room under the last row for the beams' drops (DROP in app.js, max 19px + stroke) */
.sx-table { margin-bottom: 26px; }
.sx-table { border-collapse: separate; border-spacing: 0; font-size: 0.82rem; line-height: 1.35; min-width: 100%; }
.sx-table th, .sx-table td { text-align: left; padding: 7px 12px; white-space: nowrap; border-bottom: 1px solid var(--rule-film); }
.sx-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--film-deep);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--lumen);
  border-bottom: 1px solid rgba(95, 224, 230, 0.4);
  cursor: help;
}
.sx-table thead th.sx-key::before {
  content: "";
  display: block;
  width: 26px; height: 4px;
  border-radius: 2px;
  background: var(--beam);
  margin-bottom: 5px;
}
.sx-table thead th.sx-key[data-key-role="class"]::before { background: var(--k-class); }
.sx-table thead th.sx-key[data-key-role="portfolio"]::before { background: var(--k-portfolio); }
.sx-table thead th.sx-key[data-key-role="parent"]::before { background: var(--k-parent); }
.sx-table thead th:not(.sx-key)::before { content: ""; display: block; height: 4px; margin-bottom: 5px; }
.sx-table tbody td { color: var(--on-film-dim); font-variant-numeric: tabular-nums; }
.sx-table tbody td.sx-key { font-family: var(--mono); color: var(--plate); }
/* pinned key columns: sticky left, the last one carrying the hairline that
   separates the keys from the scrolling columns */
.sx-table .sx-pin { position: sticky; left: 0; z-index: 1; background: var(--film-deep); }
.sx-table thead th.sx-pin { z-index: 2; }
.sx-table .sx-pin-last { border-right: 1px solid rgba(95, 224, 230, 0.4); }
.sx-table tbody tr.sx-related td.sx-pin { background: #12333d; }
.sx-table tbody tr.sx-anchor td.sx-pin { background: #163f4a; }
.sx-table tbody td.sx-name { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }
.sx-table tbody tr.sx-related td { color: var(--plate); background: rgba(95, 224, 230, 0.07); }
.sx-table tbody tr.sx-anchor td { background: rgba(95, 224, 230, 0.14); }
.sx-table tbody tr.sx-related td.sx-key, .sx-table tbody tr.sx-anchor td.sx-key {
  color: #fff; font-weight: 500;
  box-shadow: inset 0 0 0 2px var(--beam);
  border-radius: 4px;
}
.sx-table tbody tr.sx-related td.sx-key[data-key-role="class"], .sx-table tbody tr.sx-anchor td.sx-key[data-key-role="class"] { box-shadow: inset 0 0 0 2px var(--k-class); }
.sx-table tbody tr.sx-related td.sx-key[data-key-role="portfolio"], .sx-table tbody tr.sx-anchor td.sx-key[data-key-role="portfolio"] { box-shadow: inset 0 0 0 2px var(--k-portfolio); }
.sx-table tbody tr.sx-related td.sx-key[data-key-role="parent"], .sx-table tbody tr.sx-anchor td.sx-key[data-key-role="parent"] { box-shadow: inset 0 0 0 2px var(--k-parent); }
.sx-table tbody tr.sx-dim td { opacity: 0.55; }
.sx-table tbody tr.sx-anchor td.sx-key.sx-lit { background: var(--beam); color: var(--film); }
.sx-table tbody tr[data-key] { cursor: pointer; }
.sx-table tbody tr[data-key]:hover td { background: rgba(95, 224, 230, 0.12); }
.sx-empty { padding: 18px 14px; color: var(--on-film-dim); font-size: 0.9rem; }

/* The foot's height is fixed, not fitted to its text: hovering a heading
   swaps a one-line prompt for a definition that can wrap, and a film that
   grew with it would push every film below it and drag the beams along.
   The room is 2 lines (the longest dictionary description at desktop width);
   the text is clamped to that room so no description can reopen the shift. */
.sx-film-foot {
  --sx-foot-lines: 2;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 10px 12px 6px;
  font-size: 0.82rem;
  line-height: 1.66;
  color: var(--on-film-dim);
  height: calc(var(--sx-foot-lines) * 1.66em + 16px);
  box-sizing: border-box;
}
.sx-film-foot code { font-family: var(--mono); color: var(--lumen); background: none; border: 0; padding: 0; }
.sx-film-foot .sx-def {
  flex: 1 1 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--sx-foot-lines);
  line-clamp: var(--sx-foot-lines);
  overflow: hidden;
}
@media (max-width: 900px) { .sx-film-foot { --sx-foot-lines: 3; } }

.sx-foot { margin-top: 40px !important; font-size: 0.86rem; color: rgba(18, 33, 42, 0.7); }
.sx-noscript { max-width: 940px; margin: 40px auto; padding: 0 22px; }

/* ---- narrow: films stack as they already do; the beams have nothing to cross */
@media (max-width: 760px) {
  .sx-beams { display: none; }
  .sx-lightbox { gap: 22px; margin-left: 0; }
  .sx-follow-row { flex-wrap: wrap; }
  .sx-combo { flex-basis: 100%; order: -1; }
  .sx-step { flex: 1 1 auto; height: 40px; }
  .sx-film-tools { margin-left: 0; flex-basis: 100%; }
  .sx-dl-table th:nth-child(2), .sx-dl-table td:nth-child(2) { display: none; }
}
/* A phone-width table: the two .txt/.csv buttons per file do not fit beside
   the counts, so the counts move under the file name and the buttons keep one
   row each. The section, not the body, scrolls if a font makes it wider still. */
.sx-downloads { overflow-x: auto; }
@media (max-width: 520px) {
  .sx-dl-table th:nth-child(3), .sx-dl-table th:nth-child(4),
  .sx-dl-table td:nth-child(3), .sx-dl-table td:nth-child(4) { display: none; }
  .sx-dl-table tbody th::after { content: attr(data-shape); display: block; font-family: var(--sans); font-size: 0.78rem; color: rgba(18, 33, 42, 0.7); margin-top: 3px; }
  .sx-dl-links { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: no-preference) {
  .sx-beams path { transition: d 0.2s ease; }
}