/* Open market operation lesson. All rules scoped under .omo-* */
.omo-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.omo-sc > svg { display: block; width: 100%; max-width: 370px; height: auto; overflow: visible; }
.omo-hero img { width: min(300px, 100%); max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.omo-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the Fed and a bank */
.omo-roof { fill: rgba(169,155,255,.25); stroke: var(--violet-bright); stroke-width: 2; stroke-linejoin: round; }
.omo-body { fill: rgba(123,92,253,.12); stroke: var(--violet-bright); stroke-width: 2; }
.omo-roof.b, .omo-body.b { stroke: var(--dim); fill: rgba(234,227,215,.07); }
.omo-bname { font: 800 14px var(--sans); fill: var(--text); text-anchor: middle; }
.omo-acct { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.5; transition: stroke .3s; }
.omo-acct.up { stroke: var(--mint); }
.omo-acct.down { stroke: var(--red); }
.omo-al { font: 600 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.omo-av { font: 800 20px var(--sans); fill: var(--mint); text-anchor: middle; }
.omo-bonds { font: 800 17px var(--sans); fill: var(--gold); text-anchor: middle; }
.omo-chip rect { fill: var(--gold); }
.omo-chip text { font: 800 13px var(--sans); fill: #2A1F08; text-anchor: middle; }
.omo-flow { font: 800 14px var(--sans); fill: var(--mint); text-anchor: middle; }

/* reserves and the rate */
.omo-gh { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.omo-tank { fill: rgba(123,92,253,.06); stroke: rgba(169,155,255,.5); stroke-width: 2; }
.omo-water { fill: rgba(63,214,154,.55); transition: y .35s, height .35s; }
.omo-gauge.flood .omo-water { fill: rgba(63,214,154,.75); }
.omo-tv { font: 800 16px var(--sans); fill: var(--text); text-anchor: middle; }
.omo-rail { stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.omo-tk { stroke: var(--line-strong); stroke-width: 1.5; }
.omo-tkl { font: 600 13px var(--sans); fill: var(--dim); }
.omo-band { fill: rgba(252,192,80,.28); stroke: var(--gold); stroke-width: 1.5; transition: y .25s; }
.omo-bandl { font: 700 12px var(--sans); fill: var(--gold); text-anchor: end; }
.omo-mk { fill: var(--mint); stroke: var(--bg); stroke-width: 3; transition: cy .3s; }
.omo-gauge.off .omo-mk { fill: var(--red); }
.omo-mkl { font: 800 15px var(--sans); fill: var(--text); text-anchor: end; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; transition: y .3s; }
.omo-floor { display: none; }
.omo-gauge.ample .omo-floor { display: inline; }
.omo-gauge.ample .omo-bandl { display: none; }
.omo-iorb { stroke: var(--gold); stroke-width: 3; }
.omo-rrp { stroke: var(--violet-bright); stroke-width: 3; }
.omo-iorbl, .omo-rrpl { font: 800 12.5px var(--sans); text-anchor: end; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.omo-iorbl { fill: var(--gold); }
.omo-rrpl { fill: var(--violet-bright); }
.omo-gauge.ample .omo-mkl { display: none; }

/* holdings bars */
.omo-bars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.omo-bh { font: 700 13px var(--sans); color: var(--dim); text-align: center; }
.omo-br { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; font: 700 13px var(--sans); color: var(--text); }
.omo-br i { height: 22px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.omo-br b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), var(--violet-bright)); border-radius: 6px; transition: width .9s ease-out; }
.omo-bars.on .omo-br b { width: var(--w); }
.omo-br em { grid-column: 2; font-style: normal; font-size: 12.5px; color: var(--gold); font-weight: 800; }

@media (max-height: 700px) {
  .omo-sc > svg { max-width: 340px; }
  .omo-hero img { max-height: 28vh; }
}
.omo-gauge.ample .omo-band { display: none; }