/* Institutional activity panel (static/js/institutional-activity.js), drawn inside the
   currency page and the pair page. The section frame (`.sh`) is each board's own; this
   styles only the panel's insides, with the app's global tokens so it follows every
   palette and both modes. */

.ia .ia-empty, .ia .ia-more {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.ia .ia-k {
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ia .ia-d { color: var(--text-faint); }
.ia .ia-empty, .ia .ia-more { color: var(--text-faint); }

/* The section (owner's design, 2026-10-09, "Institutional Activity.html"): where the banks
   stand, what drives the views, the common ground, the positioning they report, and one row
   per bank. The design's hex values are the slate/light values of the app's own tokens
   (bull and bear dot, tint and text; warn; the hairline), named once here as roles so every
   palette and both modes follow. Colour is direction, never "good". */
section.ia {
  --ia-up: var(--bull-dot); --ia-up-fg: var(--bull-text); --ia-up-bg: var(--bull-tint);
  --ia-up-t: color-mix(in srgb, var(--bull-dot) 8%, var(--surface));
  --ia-dn: var(--bear-dot); --ia-dn-fg: var(--bear-text); --ia-dn-bg: var(--bear-tint);
  --ia-dn-t: color-mix(in srgb, var(--bear-dot) 8%, var(--surface));
  --ia-nt: color-mix(in oklab, var(--text-faint) 70%, var(--surface));
  --ia-nt-bg: rgba(var(--hairline-rgb), .45);
  --ia-line: rgba(var(--hairline-rgb), .75);
  --ia-rule: rgba(var(--hairline-rgb), .6);
  --ia-track: rgba(var(--hairline-rgb), .55);
  --ia-off: rgba(var(--hairline-rgb), .7);
  --ia-edge: color-mix(in srgb, var(--text-faint) 40%, transparent);
  font-variant-numeric: tabular-nums;
}
.ia .ia-sub { margin-left: 10px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-faint); }
.ia .ia-top { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.ia .ia-mid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; margin-top: 12px; }
.ia .ia-card {
  background: var(--surface); border: 1px solid var(--ia-line); border-radius: 13px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.ia .ia-stand { flex: 1 1 320px; }
.ia .ia-drivers { flex: 2 1 480px; }
.ia .ia-eb { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.ia .ia-card-h { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ia .ia-hint, .ia .ia-faint { font-size: 12px; color: var(--text-faint); }

/* direction */
.ia .ia-fg-up { color: var(--ia-up-fg); }
.ia .ia-fg-dn { color: var(--ia-dn-fg); }
.ia .ia-fg-nt { color: var(--text-2); }
.ia .ia-bg-up { background: var(--ia-up); }
.ia .ia-bg-dn { background: var(--ia-dn); }
.ia .ia-bg-nt { background: var(--ia-nt); }
.ia .ia-tint-up { background: var(--ia-up-bg); color: var(--ia-up-fg); }
.ia .ia-tint-dn { background: var(--ia-dn-bg); color: var(--ia-dn-fg); }
.ia .ia-tint-nt { background: var(--ia-nt-bg); color: var(--text-2); }
.ia .ia-tint2-up { background: var(--ia-up-t); color: var(--ia-up-fg); }
.ia .ia-tint2-dn { background: var(--ia-dn-t); color: var(--ia-dn-fg); }

/* where the banks stand */
.ia .ia-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ia .ia-num { font-size: 40px; font-weight: 600; line-height: 1; color: var(--text); }
.ia .ia-num.ia-fg-up { color: var(--ia-up); }
.ia .ia-num.ia-fg-dn { color: var(--ia-dn); }
.ia .ia-word { font-size: 14px; color: var(--text-2); }
.ia .ia-div { position: relative; height: 8px; border-radius: 3px; background: var(--ia-track); }
.ia .ia-div > i { position: absolute; display: block; }
.ia .ia-zero { left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--text-faint); }
.ia .ia-fill { top: 0; bottom: 0; border-radius: 3px; }
.ia .ia-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: -6px; font-size: 11px; color: var(--text-faint); }
/* A house's mark before its name or code (js/bank-logos.js), sized by the text beside it, on a
   white square in both themes because the marks were drawn for white. */
.ia .bk-ic {
  display: inline-block; flex: none; width: 1.2em; height: 1.2em; margin-right: .35em;
  border-radius: .22em; vertical-align: -.24em; object-fit: contain; background: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}
.ia .bk-ic-x { background: none; box-shadow: none; opacity: .6; }
.ia .bk-ic-x > svg { display: block; width: 100%; height: 100%; }
/* At least 50px a cell, so the mark and a four-letter code both fit: more banks than fit take a second
   row rather than lose their codes. */
.ia .ia-strip { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.ia .ia-sb .bk-ic { width: 14px; height: 14px; margin-right: 3px; }
.ia .ia-sb {
  flex: 1 1 50px; min-width: 0; height: 30px; padding: 0 1px; border-radius: 5px; cursor: help;
  display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
  font-size: 10px; font-weight: 700;
}
.ia .ia-sb > span { overflow: hidden; text-overflow: ellipsis; }
.ia .ia-sb.up { background: var(--ia-up); color: var(--surface); }
.ia .ia-sb.dn { background: var(--ia-dn); color: var(--surface); }
.ia .ia-sb.nt { background: var(--ia-nt-bg); color: var(--text-2); }
.ia .ia-sb.no { border: 1px dashed var(--ia-edge); color: var(--text-2); }
.ia .ia-counts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.ia .ia-counts > span { white-space: nowrap; }

/* what drives the views: a tap narrows the table to the banks citing the driver */
.ia .ia-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px 22px; }
.ia .ia-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ia .ia-side-t { font-size: 12.5px; font-weight: 600; }
/* Scoped to both hosts, whose own button reset is an id rule. */
:is(#view-pairs, #view-currencies) .ia .ia-drv {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--ia-rule); background: transparent; text-align: left; font: inherit; color: var(--text);
}
:is(#view-pairs, #view-currencies) .ia .ia-drv:hover { background: var(--surface-row-active); }
.ia .ia-drv-n { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; }
.ia .ia-drv.ia-sel .ia-drv-n { font-weight: 700; }
:is(#view-pairs, #view-currencies) .ia .ia-drv-up.ia-sel { background: var(--ia-up-bg); border-color: var(--ia-up); }
:is(#view-pairs, #view-currencies) .ia .ia-drv-dn.ia-sel { background: var(--ia-dn-bg); border-color: var(--ia-dn); }
.ia .ia-segs { flex: 0 0 auto; display: flex; gap: 2px; }
.ia .ia-segs > i { display: block; width: 7px; height: 12px; border-radius: 2px; }
.ia .ia-drv-c { flex: 0 0 14px; text-align: right; font-size: 12.5px; font-weight: 600; }

/* common ground */
.ia .ia-cg { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ia .ia-cg-t { flex: 1 1 200px; font-size: 15px; font-weight: 600; color: var(--text); }
.ia .ia-cg-s { display: flex; gap: 2px; }
.ia .ia-cg-s > i { display: block; width: 9px; height: 14px; border-radius: 2px; background: var(--ia-off); }
.ia .ia-cg-s > i.ia-on { background: var(--text); }
.ia .ia-cg-n { font-size: 13px; font-weight: 600; white-space: nowrap; }
.ia .ia-tl-l { font-size: 12px; color: var(--text-faint); }
.ia .ia-tl { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
.ia .ia-tlg { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 9px; background: var(--surface-sunken); }
.ia .ia-tlg > span { font-size: 12px; font-weight: 600; color: var(--text-2); }
.ia .ia-tlg.ia-w1 { background: color-mix(in srgb, var(--ia-up) 14%, var(--surface)); }
.ia .ia-tlg.ia-w2 { background: var(--ia-up-t); }
.ia .ia-tlg.ia-w1 > span, .ia .ia-tlg.ia-w2 > span { color: var(--ia-up-fg); }
.ia .ia-pills { display: flex; flex-wrap: wrap; gap: 3px; }
.ia .ia-pill { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: var(--surface); color: var(--text-2); white-space: nowrap; }
.ia .ia-cg-note { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }

/* the positioning the banks report */
.ia .ia-pos { gap: 10px; }
.ia .ia-p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--ia-track); }
.ia .ia-p.ia-p1 { border-top: 0; }
.ia .ia-arrow { flex: 0 0 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.ia .ia-p-w { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ia .ia-p-w > b { font-size: 14px; font-weight: 600; color: var(--text); }
.ia .ia-p-w > span { font-size: 12.5px; }
.ia .ia-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.ia .ia-tag.ia-warn { border: 1.5px solid var(--warn-edge); color: var(--warn-text); }
.ia .ia-tag.ia-plain { border: 1px solid var(--ia-edge); color: var(--text-2); font-weight: 600; }
.ia .ia-via-b { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: var(--surface-sunken); color: var(--text-2); white-space: nowrap; }

/* one row per bank: bank and latest call, view, a square per day, the headline and drivers */
.ia .ia-tbl { margin-top: 12px; background: var(--surface); border: 1px solid var(--ia-line); border-radius: 13px; overflow: hidden; }
.ia .ia-th {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px;
  background: var(--surface-sunken); border-bottom: 1px solid var(--ia-rule); font-size: 11.5px; color: var(--text-faint);
}
.ia .ia-r-b { flex: 0 0 150px; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ia .ia-r-v { flex: 0 0 84px; }
.ia .ia-r-h { flex: 0 0 70px; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.ia .ia-r-l { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ia .ia-th > .ia-r-l { display: block; }
:is(#view-pairs, #view-currencies) .ia .ia-chip { border: 0; border-radius: 999px; padding: 3px 10px; background: var(--text); color: var(--surface); font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap; }
.ia .ia-chip[hidden] { display: none; }
.ia .ia-r + .ia-r { border-top: 1px solid var(--ia-rule); }
.ia .ia-r > summary { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 11px 16px; cursor: pointer; list-style: none; }
.ia .ia-r > summary::-webkit-details-marker { display: none; }
.ia .ia-r > summary:hover { background: var(--surface-row-active); }
.ia .ia-r.ia-dim { opacity: .35; }
.ia .ia-chev::before { content: "\25B8"; font-size: 10px; color: var(--text-faint); }
.ia .ia-r[open] .ia-chev::before { content: "\25BE"; }
.ia .ia-r-b > b { font-size: 14px; color: var(--text); }
.ia .ia-r-d { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.ia .ia-vp { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 7px; white-space: nowrap; }
.ia .ia-vp-up { background: var(--ia-up-bg); color: var(--ia-up-fg); }
.ia .ia-vp-dn { background: var(--ia-dn-bg); color: var(--ia-dn-fg); }
.ia .ia-vp-nt { background: var(--ia-nt-bg); color: var(--text-2); }
.ia .ia-vp-no { border: 1px solid var(--ia-edge); color: var(--text-faint); }
.ia .ia-vp-out { border: 1px dashed var(--ia-edge); color: var(--text-2); cursor: help; }
.ia .ia-dot { flex: none; display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--ia-nt); cursor: help; }
.ia .ia-dot.up { background: var(--ia-up); }
.ia .ia-dot.dn { background: var(--ia-dn); }
.ia .ia-r-t { font-size: 13.5px; line-height: 1.4; color: var(--text); }
.ia .ia-tg { font-size: 11px; padding: 1px 7px; border-radius: 5px; white-space: nowrap; }
.ia .ia-hit { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--ia-edge); color: var(--text-2); white-space: nowrap; }
.ia .ia-thesis { margin: 0 0 8px; max-width: 980px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.ia .ia-tbl .ia-body { padding: 0 16px 14px 182px; }
.ia .ia-tbl .ia-more { margin: 0; padding: 10px 16px; }

.ia .ia-dir {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* A pair call on a currency page: what the bank said ("Short AUD/NZD") over what it
   means for the page's currency (the chip). A central-bank path: its steps under it. */
.ia .ia-via { display: block; font-size: 12px; line-height: 1.3; color: var(--text-2); }
.ia .ia-path { display: block; font-size: 11.5px; line-height: 1.3; color: var(--text-faint); }
.ia .ia-dir.up { color: var(--bull-dot); }
.ia .ia-dir.dn { color: var(--bear-dot); }
.ia .ia-dir.nt { color: var(--text-muted); }
.ia .ia-dir.mx { color: var(--mixed-dot); }
.ia .ia-body {
  padding: 4px 14px 12px 78px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.ia .ia-body p { margin: 6px 0; }
.ia .ia-body ul { margin: 6px 0 6px 18px; padding: 0; }
.ia .ia-body a { color: var(--accent); }
.ia .ia-nt b { color: var(--text); }
/* An opened bank row: each call, then the notes behind them, once each. */
.ia .ia-call { padding: 6px 0; border-top: 1px dashed rgba(var(--hairline-rgb), .5); }
.ia .ia-call:first-child { border-top: 0; }
.ia .ia-call .ia-via, .ia .ia-call .ia-path { display: inline; margin-left: 6px; }
.ia .ia-call .ia-via + .ia-dir { margin-left: 6px; }
.ia .ia-meta { color: var(--text-faint); font-size: 12.5px; }
.ia .ia-nh { display: block; margin-top: 12px; }
.ia .ia-note { margin-top: 6px; }

/* A narrow section (the page beside the rail, the pair page's column, a phone): the table
   drops its head, each row's headline takes a line of its own, and an opened row's thesis
   starts at the left. */
section.ia { container: iapanel / inline-size; }
@container iapanel (max-width: 700px) {
  .ia .ia-th > span, .ia .ia-th > .ia-r-l { display: none; }
  .ia .ia-th { padding: 0; border: 0; }
  .ia .ia-th > .ia-chip:not([hidden]) { margin: 8px 16px; }
  .ia .ia-r-b { flex: 1 1 auto; }
  .ia .ia-r-l { flex-basis: 100%; }
  .ia .ia-tbl .ia-body { padding-left: 16px; }
  .ia .ia-sub { display: block; margin: 4px 0 0; }
}
/* ── The institutions score (owner, 2026-10-07) ──────────────────────────────
   The banks' lean on a currency or a pair from -100 to +100 (js/institutional-activity.js:
   `head`, `meter`, `cell`), drawn beside trade quality. It uses each host's own tokens
   (--up, --dn, --sunk2, --rule2, --ink, --soft, --faint, --fmono), the ones the trade
   quality meter uses, so the two read alike: the colour is the side the banks lean. */
.iab {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 84px;
  height: 6px;
  border-radius: 999px;
  background: var(--sunk2);
  vertical-align: middle;
}
.iab em {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--rule2);
}
.iab i { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.iab i.up { background: var(--up); }
.iab i.dn { background: var(--dn); }
.iav { font-family: var(--fmono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.iav.up { color: var(--up); }
.iav.dn { color: var(--dn); }
.ian { font-size: 11px; font-weight: 400; color: var(--faint); white-space: nowrap; }

/* Inline, in a page header beside the call or our bias, and on a Dashboard Alignment row. */
.iah {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--rule2);
  border-radius: 999px;
  white-space: nowrap;
  cursor: help;
}
.iah .iahl { font-size: 11.5px; color: var(--soft); }
.iah .iav { font-size: 13px; }
.iah .iab { width: 64px; }

/* The Top 5 card's meter is the trade quality meter's own grid (`.tqm`); the bar spans it. */
.tqm.iam { cursor: help; }
.tqm.iam .iab { grid-column: 1 / -1; width: 100%; margin-top: 4px; }

/* A table cell: the score and the bank count over the bar. */
.iac {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
  column-gap: 6px;
  row-gap: 5px;
  cursor: help;
}
.iac .iav { font-size: 13px; }
.iac .iab { grid-column: 1 / -1; justify-self: center; width: 72px; }
.iahcol { cursor: help; text-decoration: underline dotted var(--faint); text-underline-offset: 4px; }
/* Where a table row stacks (a narrow card or a phone), the cell takes a line of its own
   under the pair or the currency, named "Institutions" since the head is hidden there, and
   an empty one takes no line at all: the rules for that sit with each table below. */
.iacol { display: flex; justify-content: center; }

/* ── The pairs table ("Our biases", Table view) with the institutions column ──
   `.ia` is drawn on the card, the head and every row only for an account with the panel's
   grant once its document is in; without it the table is exactly what it was. The column
   sits between Trade quality and Priced in (or Why we lean this way). */

/* Without the narratives scorecard: the ported table, one 92px column wider. */
@media (min-width: 901px) {
  #view-pairs .pbhead.ia:not(.nb), #view-pairs .pbrow.ia:not(.nb) {
    grid-template-columns: 40px 150px 86px 118px 92px minmax(0, 1fr) 20px;
  }
}
@media (max-width: 900px) {
  #view-pairs .pbrow.ia:not(.nb) .iacol { grid-column: 2 / -1; justify-content: flex-start; }
  #view-pairs .pbrow.ia:not(.nb) .iacol:empty { display: none; }
  #view-pairs .pbrow.ia:not(.nb) .iac { display: inline-flex; align-items: center; gap: 7px; }
  #view-pairs .pbrow.ia:not(.nb) .iac::before { content: "Institutions"; font-size: 11.5px; color: var(--soft); }
}

/* With the scorecard: its table starts at an 800px card with the prose at 182px or more
   (pairs-narratives.css); the column and its gap take 106px, so with it the table starts at
   a 906px card. Narrower than that, an `.ia` row takes the scorecard's own stacked layout. */
@container nbboard (min-width: 906px) {
  #view-pairs .pbhead.nb.ia, #view-pairs .pbrow.nb.ia {
    grid-template-columns: 40px 140px 86px 112px 92px 104px minmax(0, 1fr) 20px;
  }
}
@container nbboard (min-width: 800px) and (max-width: 905.98px) {
  #view-pairs .pbrow.nb.ia {
    grid-template-columns: 24px minmax(0, 1fr) auto auto 16px;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #view-pairs .pbrow.nb.ia > span { justify-self: normal; text-align: left; }
  #view-pairs .pbrow.nb.ia .pbwhy, #view-pairs .pbrow.nb.ia .nbpin { grid-column: 2 / -1; }
  #view-pairs .pbrow.nb.ia .nbpin:empty { display: none; }
  #view-pairs .nbboard.ia .pbexp { grid-template-columns: 1fr; padding-left: 16px; }
}
@container nbboard (max-width: 905.98px) {
  #view-pairs .pbrow.nb.ia .iacol { grid-column: 2 / -1; justify-content: flex-start; }
  #view-pairs .pbrow.nb.ia .iacol:empty { display: none; }
  #view-pairs .pbrow.nb.ia .iac { display: inline-flex; align-items: center; gap: 7px; }
  #view-pairs .pbrow.nb.ia .iac::before { content: "Institutions"; font-size: 11.5px; color: var(--soft); }
  #view-pairs .pbhead.nb.ia > .iahcol { display: none; }
}
@media (min-width: 901px) {
  @container nbboard (min-width: 800px) and (max-width: 905.98px) {
    #view-pairs .pbhead.nb.ia { display: flex; flex-wrap: wrap; gap: 6px 24px; }
    #view-pairs .pbhead.nb.ia > span { justify-self: normal; text-align: left; }
    #view-pairs .pbhead.nb.ia > span:nth-child(3), #view-pairs .pbhead.nb.ia > .nbpinh,
    #view-pairs .pbhead.nb.ia > .nbwhyh, #view-pairs .pbhead.nb.ia > span:last-child { display: none; }
  }
}

/* ── The board of ten with the institutions column ───────────────────────────
   The same rule: `.ia` only with the grant and the document. The column sits between the
   read and the 2Y yield. On the call board (`.ck`) the read keeps its 200px floor
   (currency-board.css, 2026-09-25): the other columns now take 596px, so the read moves
   under the currency below a 796px card rather than 690px. Where the row stacks, the
   score takes the line under the call word. */
#view-currencies .cbhead.ia:not(.ck), #view-currencies .cbrow.ia:not(.ck) {
  grid-template-columns: 42px 132px 96px minmax(0, 2.6fr) 92px 62px 24px;
}
#view-currencies .cbhead.ck.ia, #view-currencies .cbrow.ck.ia {
  grid-template-columns: 42px 132px 128px minmax(0, 2.6fr) 92px 62px 24px;
}
#view-currencies .cbhead.ia > .iahcol, #view-currencies .cbhead.ck.ia > span:nth-child(6) { text-align: center; }
@container (width < 796px) {
  #view-currencies .cbrow.ck.ia { row-gap: 6px; }
  #view-currencies .cbrow.ck.ia .chps { grid-column: 2 / -1; }
  #view-currencies .cbrow.ck.ia .iacol { grid-column: -4; grid-row: 1; }
  #view-currencies .cbrow.ck.ia .y { grid-column: -3; grid-row: 1; }
  #view-currencies .cbrow.ck.ia .ex { grid-column: -2; grid-row: 1; }
}
@media (max-width: 900px) {
  #view-currencies .cbrow.ck.ia { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 6px 10px; }
  #view-currencies .cbrow.ck.ia > span:nth-child(3) { grid-column: 2 / -1; grid-row: 2; }
  #view-currencies .cbrow.ck.ia .iacol { grid-column: 2 / -1; grid-row: 3; }
  #view-currencies .cbrow.ck.ia .chps { grid-column: 2 / -1; grid-row: 4; }
  #view-currencies .cbrow.ck.ia .y { display: none; }
  #view-currencies .cbrow.ck.ia .ex { grid-column: 3; grid-row: 1; }
}
@container (width < 490px) {
  #view-currencies .cbrow.ck.ia { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 6px 10px; }
  #view-currencies .cbrow.ck.ia > span:nth-child(3) { grid-column: 2 / -1; grid-row: 2; }
  #view-currencies .cbrow.ck.ia .iacol { grid-column: 2 / -1; grid-row: 3; }
  #view-currencies .cbrow.ck.ia .chps { grid-column: 2 / -1; grid-row: 4; }
  #view-currencies .cbrow.ck.ia .y { display: none; }
  #view-currencies .cbrow.ck.ia .ex { grid-column: 3; grid-row: 1; }
}
@container (width < 276px) {
  #view-currencies .cbrow.ck.ia .chps { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  #view-currencies .cbrow.ck.ia .iacol { justify-content: flex-start; }
  #view-currencies .cbrow.ck.ia .iacol:empty { display: none; }
  #view-currencies .cbrow.ck.ia .iac { display: inline-flex; align-items: center; gap: 7px; }
  #view-currencies .cbrow.ck.ia .iac::before { content: "Institutions"; font-size: 11.5px; color: var(--soft); }
}
@container (width < 490px) {
  #view-currencies .cbrow.ck.ia .iacol { justify-content: flex-start; }
  #view-currencies .cbrow.ck.ia .iacol:empty { display: none; }
  #view-currencies .cbrow.ck.ia .iac { display: inline-flex; align-items: center; gap: 7px; }
  #view-currencies .cbrow.ck.ia .iac::before { content: "Institutions"; font-size: 11.5px; color: var(--soft); }
}