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

   The primitives this file re-declares (.feed, .pick, .seg) are the same ones
   heat.css and etf.css each carry, which is the house convention: a page skin
   is standalone so one dashboard cannot quietly restyle another.
   ============================================================ */

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

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

.trshero {
  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;
}
.trshero .wrap { position: relative; }
.trshero-inner { padding: 26px 0 0; max-width: 700px; }

.trshero 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);
}
.trshero .dek { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* ---------- feed line, shared shape with the ETF and 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); }

/* ---------- controls ---------- */

.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); }

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

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

/* ============================================================
   The chart

   A treemap of the whole complex: tile area is the holding, colour is the
   gain or loss on cost. The panel is the same shell the ETF flow chart uses
   so the two dashboards are recognisably the same instrument.
   ============================================================ */

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

.cpanel-body { position: relative; background: var(--bg-2); }
#trs-cv { display: block; width: 100%; height: 420px; cursor: default; }

/* what the colour means, beside the subtitle */
.tmleg {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.tmleg span { display: inline-flex; align-items: center; gap: 6px; }
.tmleg i { width: 10px; height: 10px; border-radius: 2px; background: var(--line-2); }
.tmleg i.is-pos { background: var(--pos); }
.tmleg i.is-neg { background: var(--neg); }
.tmleg i.is-na { background: rgba(255,255,255,0.1); }
.tmleg i.is-r0 { background: rgb(184,242,75); }
.tmleg i.is-r1 { background: rgb(48,132,96); }
.tmleg i.is-r2 { background: rgb(44,48,68); }

/* the concentration readings sit under the chart that shows them */
.sharecuts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 13px 16px 14px;
  border-top: 1px solid var(--line);
}
.sharecut { display: flex; align-items: baseline; gap: 8px; }
.sharecut b {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sharecut span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.sharecut.alt { margin-left: auto; }
.sharecut.alt b { color: var(--lime); }

.cpanel-foot,
.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);
}
.cpanel-foot b, .tbl-foot b { font-weight: 500; color: var(--muted); }

/* ---------- company table ---------- */

.coswrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.cos-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.cos-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 250px;
  min-width: 0;
  margin-right: auto;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  transition: border-color 0.15s;
}
.cos-search:focus-within { border-color: var(--lime); }
.cos-search svg { width: 13px; height: 13px; flex: none; color: var(--faint); }
.cos-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--text);
}
.cos-search input:focus { outline: none; }
.cos-search input::placeholder { color: var(--faint); }
.cos-count {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

.cos-scroll { overflow-x: auto; }

/* type comes from the shared data-table scale in alpha.css */
.cos { min-width: 880px; }

/* sortable heads come from the shared data-table rules in alpha.css */


.cos .swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
/* the ticker is the identifier, so it leads the sub-line rather than sharing
   its colour with the country beside it */
.cos .co-tk em { font-style: normal; color: var(--text-2); font-weight: 500; }

/* share of the treasury total: bar beside the figure, never behind it */
.cos .sh-in {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.cos .sh-in i {
  height: 5px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--lime) 26%, transparent);
  flex-shrink: 0;
}
.cos .sh-in span { min-width: 42px; text-align: right; }

/* P&L reads as one cell: the money above, the percentage under it */


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

@media (max-width: 1180px) { .trstats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .trstats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .trshero-inner { padding-top: 22px; }
  .trshero .dek { font-size: 14px; }
  .cos-search { flex-basis: 100%; margin-right: 0; }
  #trs-cv { height: 320px; }
  .tmleg { display: none; }
  .sharecut.alt { margin-left: 0; }
}
@media (max-width: 520px) {
  .trstats { grid-template-columns: 1fr; }
  .sharecuts { gap: 10px 18px; }
}


/* ============================================================
   Hero-side stats: the five headline figures beside the H1, matching
   the other dashboards. P&L spans the row; the asset rail spans the grid.
   ============================================================ */

.trshero-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 0 56px;
  align-items: center;
}
.trshero-grid .assetrail { grid-column: 1 / -1; }
.trshero-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 24px 0 10px;
}
.trshero-side .trstats { display: contents; }
/* grid items default to min-width:auto, so a one-line sub-label would push
   its tile past the 200px track and out of the wrap; let tiles shrink and
   clip instead; the ellipsis rule below does the rest */
.trshero-side .trstat { min-width: 0; overflow: hidden; }
/* the merged tile: entry is the headline, the P&L reading rides beneath it */
.trshero-side .trstat-row.r2 { margin-top: 6px; }
.trshero-side .trstat-row.r2 .trstat-v { font-size: 13px; }
.trshero-side .trstat-row.r2 .trstat-ic { width: 13px; height: 13px; }
.trshero-side .trstat { padding: 10px 12px 11px; }
.trshero-side .trstat-v { font-size: 16px; }
.trshero-side .trstat-row { flex-wrap: wrap; row-gap: 2px; margin-top: 7px; }
/* one line each: the tile is a headline, the prose lives below the fold */
.trshero-side .trstat-s {
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "at $77,662" is a sentence, not a unit: below the value, not beside it */
.trshero-side #s-value-c { flex-basis: 100%; white-space: nowrap; margin-left: 23px; }
.trstat-ic {
  display: inline-flex;
  width: 15px;
  height: 15px;
  align-self: center;
  color: var(--lime);
  flex: none;
}
.trstat-ic svg { width: 100%; height: 100%; display: block; }
.trstat-ic.is-coin { color: var(--cb); }
@media (max-width: 980px) {
  .trshero-grid { grid-template-columns: 1fr; }
  .trshero-side { padding-top: 4px; }
}
@media (max-width: 480px) { .trshero-side { grid-template-columns: 1fr; } }

/* hero tiles as one board: hairlines between cells, no separate cards */
.trshero-side { gap: 1px; }
.trshero-side .trstat { border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--line-2); }
.trstat-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; }

/* the company cell: mark on the left, name over ticker and country beside it.
   The mark's ring carries the row's series colour, so the table still keys
   into the holdings chart above it the way the old swatch did. */
.cos .co-in { display: flex; align-items: center; gap: 10px; }
.cos .co-t { min-width: 0; }
.cos .co-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);
}
/* a company with no captured mark keeps the row's shape with a monogram */
.cos .co-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 name line needs no swatch */
.cos .co-in .nm { display: block; }