/* Section 04 Sources. OWNER: rails/sources/review worker. */
/* Bank colours: BCA #0060AF, Jenius #20A4DC (tests match these), Manual slate. */
.bank-bca { --c: #0060AF; }
.bank-jenius { --c: #20A4DC; }
.bank-manual { --c: #405b65; }
.bank { white-space: nowrap; }
.bank .mk { color: var(--c); }

/* Segments are full-width boxes placed by translateX(--x) and sized by scaleX(--w): no layout movement on change. */
.srcbar { height: 14px; margin-top: 44px; position: relative; background: linear-gradient(var(--hair), var(--hair)) 0 50% / 100% 1px no-repeat; }
.srcbar .seg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0;
  transform-origin: 0 50%; transform: translateX(calc(var(--x, 0) * 100%)) scaleX(var(--w, 0));
  transition: transform 1s var(--expo);
}
.seg-fill { position: absolute; inset: 0; background: var(--c); border-right: 2px solid var(--paper); transform-origin: 0 50%; transition: transform 1.1s var(--expo) var(--sd, 0ms), filter .2s; }
.srcbar .seg:last-of-type .seg-fill { border-right: 0; }
html.js[data-motion="on"] .srcbar:not(.grown) .seg-fill { transform: scaleX(0); }
.srcbar .seg:hover .seg-fill, .srcbar .seg:focus-visible .seg-fill { filter: brightness(1.15); }
.seg-mk {
  position: absolute; left: 0; bottom: calc(100% + 8px); width: 100%; height: 14px; pointer-events: none;
  transform: translateX(calc(var(--x, 0) * 100%)); transition: transform 1s var(--expo), opacity .3s;
}
.seg-mk i { position: absolute; left: 0; bottom: 0; font-style: normal; font-size: 14px; line-height: 1; color: var(--c); }
.seg-mk.off { opacity: 0; }
html[data-motion="off"] .srcbar .seg, html[data-motion="off"] .seg-mk, html[data-motion="off"] .seg-fill { transition: none; }

.srclegend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; border-top: 1px solid var(--ink); }
.src-item { display: block; width: 100%; text-align: left; padding: 16px 0 0; min-width: 0; }
.src-item:hover .src-name .bank { text-decoration: underline; text-decoration-color: var(--mute); text-underline-offset: 3px; }
.src-name { display: block; font: 400 var(--t-xs) var(--f-mono); line-height: 16px; }
.src-name .mk { font-size: 13px; }
.src-amt { display: block; font-size: var(--t-2xl); font-weight: 680; font-stretch: 70%; line-height: 1; height: 1em; margin-top: 12px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.src-share { display: block; font: 400 var(--t-xs) var(--f-mono); line-height: 16px; color: var(--grey-t); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.outside { color: var(--grey-t); margin: 36px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); }
.out-k { margin: 0; }
.out-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 12px 0 0; }
.out-item { min-width: 0; }
.out-item dt { font: 400 var(--t-xs) var(--f-mono); line-height: 16px; color: var(--grey-t); white-space: nowrap; }
.out-item dd { margin: 6px 0 0; font: 500 var(--t-md) var(--f-display); line-height: 22px; height: 22px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.out-net dd { font-weight: 650; }
.out-net dd.neg { color: var(--red-t); }
.src-foot { margin: 14px 0 0; font: 400 var(--t-xs) var(--f-mono); line-height: 16px; color: var(--grey-t); }

/* Clip the off-bar part of the translated marker rows here (not on .sec-body: a clipped reveal target never intersects). */
.srcbar { overflow-x: clip; overflow-y: visible; }
@media (max-width: 760px) {
  .srclegend { grid-template-columns: 1fr; gap: 0; }
  .src-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .src-amt { font-size: 28px; margin: 0; grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .src-share { margin-top: 4px; }
  .out-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .src-foot { min-height: 48px; }
}