/* ============================================================
   Alpha Finance: ETF dashboard pages
   Page-scoped skin, loaded after alpha.css and article.css. Additive only.
   ============================================================ */

body.etf .section { padding: 34px 0 36px; }
body.etf .section-head { margin-bottom: 16px; }

/* ---------- hero ---------- */

.etfhero {
  position: relative;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 90% at 85% 10%, color-mix(in srgb, var(--lime) 4%, transparent), transparent),
    var(--bg);
  overflow: hidden;
}
.etfhero .wrap { position: relative; }
.etfhero-inner { padding: 26px 0 0; max-width: 680px; }

.etfhero h1 {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--text);
}
.etfhero .dek { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* ---------- stat rail ---------- */

.etfstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.etfstat {
  padding: 13px 15px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}
.etfstat-k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.etfstat-row { display: flex; align-items: baseline; gap: 9px; margin-top: 9px; }
.etfstat-v {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.etfstat-c {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.etfstat-c.up { color: var(--pos-text); }
.etfstat-c.down { color: var(--neg-text); }
.etfstat-s {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--faint);
}

/* ---------- share of complex ----------
   One stacked bar. Two funds hold four fifths of the money and a table buries
   that; a single bar says it before you have read a number. */

.sharepanel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 15px 18px 16px;
}
.sharehead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 13px;
}
.sharehead h2 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
}
.sharehead .note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.sharebar {
  display: flex;
  height: 26px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-2);
}
.sharebar span {
  position: relative;
  min-width: 2px;
  transition: filter 0.15s;
}
.sharebar span:hover { filter: brightness(1.25); }

.sharekey {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.sharekey b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--text-2);
}
.sharekey i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.sharekey em { font-style: normal; color: var(--faint); }

/* ---------- fund table ---------- */

.fundwrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
@media (max-width: 940px) { .fundwrap { overflow-x: auto; } }

.funds { min-width: 860px; }
/* type comes from the shared data-table scale in alpha.css */
.funds .swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* the fund cell: issuer mark on the left, ticker over issuer name beside it.
   The mark's ring carries the row's series colour, so the table still keys
   into the share bar above it the way the old swatch did. */
.funds .fund-in { display: flex; align-items: center; gap: 10px; }
.funds .fund-t { min-width: 0; }
.funds .fund-ic {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  object-fit: contain;
  background: var(--bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ring, var(--line-2)) 55%, transparent);
}
/* an issuer with no captured mark keeps the row's shape with a monogram */
.funds .fund-ic.is-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
}
/* the mark supplies the row's identity now, so the ticker line needs no swatch */
.funds .fund-in .tkr { display: block; }

/* the share column carries its own bar, sitting beside the figure rather than
   behind it, where it read as a strikethrough */
.funds .sh-in {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.funds .sh-in i {
  height: 5px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--lime) 26%, transparent);
  flex-shrink: 0;
}
.funds .sh-in span { min-width: 42px; text-align: right; }

.tbl-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 11px 16px 12px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.tbl-foot b { font-weight: 500; color: var(--muted); }

/* ---------- flows ---------- */

.flowpanel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}
.flow-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.flow-head h2 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
}
.flow-head .sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: auto;
}

/* controls, the same shape the heatmap pages use */
.pick { display: flex; align-items: center; gap: 9px; }
.pick-l {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.seg { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button {
  padding: 6px 10px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.13s, background 0.13s;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--text-2); background: var(--panel-2); }
.seg button[aria-pressed="true"] { color: #0a0b0d; background: var(--lime); }

/* ---------- sessions ---------- */

.sess-note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.funds.sess { min-width: 700px; }
.funds.sess .l { text-align: left; }
/* the flow bar is its own column, growing from the centre so a redemption
   reads as a direction rather than a smaller number */
.funds .fl { width: 26%; }
.funds .fl-in {
  display: block;
  position: relative;
  height: 6px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
}
.funds .fl-in i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-radius: 1px;
}
.funds .fl-in i.p { background: var(--pos-text); transform: scaleX(0.5); transform-origin: left; }
.funds .fl-in i.n { background: var(--neg-text); transform: scaleX(0.5); transform-origin: right; left: auto; right: 50%; }
.flow-body { position: relative; background: var(--bg-2); }
#flow-cv { display: block; width: 100%; height: 340px; }

/* ---------- feed line, shared shape with the heatmap pages ---------- */

.feed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 16px 0 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.feed b { font-weight: 500; color: var(--text-2); }
.feed .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--faint);
  vertical-align: 1px;
}
.feed.is-live .dot { background: var(--pos-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos-text) 18%, transparent); }
.feed.is-down .dot { background: var(--neg); }
.feed.is-stale .dot { background: var(--heat); }

/* ---------- responsive ---------- */

@media (max-width: 1080px) { .etfstats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .etfhero-inner { padding-top: 22px; }
  .etfhero .dek { font-size: 14px; }
  #flow-cv { height: 210px; }
  .sharehead .note { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) { .etfstats { grid-template-columns: 1fr; } }

/* the flow readout is multi-line, unlike the one-line chart tip on the home
   page, and the canvas should feel interrogable */
#flow-cv { cursor: crosshair; }


/* ============================================================
   Hero-side stats: the four headline figures moved beside the H1,
   matching the funding and blockchain dashboards. The asset rail
   spans the full grid below both columns.
   ============================================================ */

.etfhero-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 0 56px;
  align-items: center;
}
.etfhero-grid .assetrail { grid-column: 1 / -1; }
.etfhero-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 26px 0 12px;
}
.etfhero-side .etfstats { display: contents; }
.etfhero-side .etfstat { min-width: 0; overflow: hidden; }
.etfhero-side .etfstat-v { font-size: 17px; }
.etfstat-ic {
  display: inline-flex;
  width: 15px;
  height: 15px;
  align-self: center;
  color: var(--lime);
  flex: none;
}
.etfstat-ic svg { width: 100%; height: 100%; display: block; }
.etfstat-ic.is-coin { color: var(--cb); }
@media (max-width: 980px) {
  .etfhero-grid { grid-template-columns: 1fr; }
  .etfhero-side { padding-top: 4px; }
}
@media (max-width: 480px) { .etfhero-side { grid-template-columns: 1fr; } }

/* the daily-change chip is a sentence, not a unit: in the narrow hero tile
   it gets its own line under the value instead of wrapping mid-figure */
.etfhero-side .etfstat-row { flex-wrap: wrap; row-gap: 3px; }
.etfhero-side #s-cum-c { flex-basis: 100%; white-space: nowrap; margin-left: 24px; }

/* hero tiles as one board: hairlines between cells, no separate cards */
.etfhero-side { gap: 1px; }
.etfhero-side .etfstat { border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--line-2); }
.etfstat-ic:not(.is-coin) { color: var(--muted); }

/* status line: one quiet sentence in grey, not a row of mono chips.
   The dot still carries feed state; the words just read as words. */
.feed, .liqshero .feed {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  gap: 6px 0;
}
.feed > span + span::before, .liqshero .feed > span + span::before {
  content: "\00b7";
  margin: 0 9px;
  color: var(--faint);
}
.feed b, .liqshero .feed b { color: var(--text-2); font-weight: 500; }