/* Learn, Options Module 6: Where the liquidity is (web/learn/liquidity.js). Tokens only; class names start with ln-liqu-. */

/* the heat-map tables (built on learn.css's .ln-surface) */
.ln-liqu-map td { min-width: 2.6rem; }
.ln-liqu-map th.ln-liqu-atm, .ln-liqu-map td.ln-liqu-atm { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--gold-deep) 55%, transparent), inset -1px 0 0 color-mix(in srgb, var(--gold-deep) 55%, transparent); }
.ln-liqu-map tr.is-pick th { color: var(--arcade-accent); }
.ln-liqu-map tr.is-pick th::before { content: ""; display: inline-block; width: .3rem; height: .9rem; border-radius: 2px; margin-right: .35rem;
  vertical-align: -2px; background: var(--arcade-accent); }
.ln-liqu-click td[data-k] { cursor: pointer; }
.ln-liqu-click td[data-k]:hover, .ln-liqu-click td[data-k]:focus-visible { outline: 2px solid var(--arcade-accent); outline-offset: -2px; }
.ln-liqu-click td.is-sel { outline: 2px solid var(--arcade-accent); outline-offset: -2px; font-weight: 700; }
.ln-liqu-map td.ln-liqu-all { font-weight: 600; border-left: 1px solid rgb(var(--line-rgb) / .2); }
.ln-liqu-lots { margin-top: .8rem; }
.ln-liqu-lots > .muted { font-size: .9rem; }

/* through the day: one line per day; the CPI day thicker */
.ln-svg path.ln-liqu-d0 { stroke: var(--arcade-soft); stroke-width: 1.5; }
.ln-svg path.ln-liqu-d1 { stroke: var(--arcade-close); }
.ln-svg path.ln-liqu-d2 { stroke: var(--qt-teal); }
.ln-svg path.ln-liqu-d3 { stroke: var(--arcade-accent); }
.ln-svg path.is-cpi { stroke-width: 3; }
.ln-legend .ln-liqu-d0 i { color: var(--arcade-soft); } .ln-legend .ln-liqu-d1 i { color: var(--arcade-close); height: .4rem; }
.ln-legend .ln-liqu-d2 i { color: var(--qt-teal); } .ln-legend .ln-liqu-d3 i { color: var(--arcade-accent); }
.ln-svg path.ln-liqu-win { fill: rgb(var(--hl) / .06); stroke: none; }
line.ln-liqu-mark { stroke: rgb(var(--line-rgb) / .3); stroke-width: 1; }
.ln-svg text.ln-liqu-mark-t { fill: var(--arcade-muted); font-weight: 600; }

/* trades by strike */
rect.ln-liqu-buy { fill: color-mix(in srgb, var(--arcade-good) 70%, transparent); }
rect.ln-liqu-sell { fill: color-mix(in srgb, var(--arcade-miss) 65%, transparent); }

/* strategy cards */
.ln-liqu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .8rem; margin: .8rem 0; }
.ln-liqu-card { padding: .9rem 1rem; border-radius: 12px; border: 1px solid rgb(var(--line-rgb) / .22); background: rgb(var(--hl) / .02); }
.ln-section .ln-liqu-card h3 { margin: 0 0 .25rem; font-size: 1rem; color: var(--head); }
.ln-liqu-card > p { margin: 0 0 .6rem; font-size: .84rem; line-height: 1.45; }
.ln-liqu-card dl { margin: 0; display: grid; gap: .3rem; }
.ln-liqu-card dl > div { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; font-size: .88rem; }
.ln-liqu-card dt { color: var(--arcade-muted); }
.ln-liqu-card dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--head); text-align: right; }
.ln-liqu-card dd small { font-weight: 400; color: var(--arcade-faint); }
.ln-liqu-card dd.ln-liqu-big { font-size: 1.15rem; color: var(--arcade-close); }