/* Learn, Options Module 5: Same trade, different expiry (web/learn/expiry.js). Tokens only; class names start with ln-expi-. */

/* which expiry is which: same day indigo, about a week teal, about a month slate (as in module 3) */
.ln-expi-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem; vertical-align: 1px; flex: none; }
.ln-expi-dot.is-0 { background: var(--arcade-accent); }
.ln-expi-dot.is-1 { background: var(--qt-teal); }
.ln-expi-dot.is-2 { background: var(--arcade-soft); }
.ln-expi-chains { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .85rem; }
.ln-expi-chains span { white-space: nowrap; }

/* section 1: one card per expiry */
.ln-expi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .6rem; margin: .8rem 0; }
.ln-expi-card { border: 1px solid rgb(var(--line-rgb) / .22); border-radius: 12px; padding: .7rem .85rem; background: rgb(var(--hl) / .02); }
.ln-expi-card p { margin: .15rem 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; font-size: .88rem; }
.ln-expi-card p > span { flex: 1 1 auto; }
.ln-expi-card strong { font-variant-numeric: tabular-nums; color: var(--head); }
.ln-expi-card small { flex-basis: 100%; text-align: right; font-size: .76rem; }
.ln-expi-card .ln-expi-card-h { font-weight: 700; color: var(--head); margin-bottom: .35rem; }
.ln-expi-card-h .muted { font-weight: 400; }
.ln-expi-up { color: var(--arcade-good) !important; }
.ln-expi-down { color: var(--arcade-miss) !important; }

/* tables */
.ln-expi-tablewrap { overflow-x: auto; border: 1px solid rgb(var(--line-rgb) / .2); border-radius: 12px; margin: .6rem 0; }
.ln-expi-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .85rem; }
.ln-expi-table th, .ln-expi-table td { padding: .4rem .6rem; text-align: right; border-bottom: 1px solid rgb(var(--line-rgb) / .1); white-space: nowrap; }
.ln-expi-table thead th { font-size: .76rem; font-weight: 600; color: var(--arcade-muted); background: rgb(var(--hl) / .03); vertical-align: bottom; }
.ln-expi-table thead th small { display: block; font-weight: 400; color: var(--arcade-faint); }
.ln-expi-table tbody th { text-align: left; font-weight: 600; color: var(--head); white-space: normal; min-width: 9rem; }
.ln-expi-table tbody th small { display: block; font-weight: 400; font-size: .74rem; color: var(--arcade-faint); }
.ln-expi-table td { color: var(--study-ink); }
.ln-expi-table td small { font-size: .74rem; }
.ln-expi-table tr.is-now th, .ln-expi-table tr.is-now td { background: color-mix(in srgb, var(--arcade-accent) 9%, transparent); }
.ln-expi-pin tbody th { min-width: 6.5rem; }

.ln-expi-table thead th { white-space: normal; min-width: 4.5rem; }
.ln-expi-table thead th:first-child { text-align: left; }

/* chart marks */
rect.ln-expi-move { fill: rgb(var(--line-rgb) / .3); }
.ln-svg path.ln-expi-model { stroke: var(--gold-deep); stroke-width: 2; stroke-dasharray: 6 4; }
circle.ln-expi-am { fill: var(--study); stroke: var(--gold-deep); stroke-width: 2; }
circle.ln-expi-fut-d { fill: var(--arcade-soft); }
line.ln-expi-kline { stroke: rgb(var(--line-rgb) / .4); stroke-dasharray: 3 3; }
line.ln-expi-kline.is-near { stroke: var(--gold-deep); stroke-dasharray: 4 3; stroke-width: 1.5; }

/* legend swatches for those marks */
.ln-legend .ln-expi-k-move { color: rgb(var(--line-rgb) / .45); height: .6rem; }
.ln-legend .ln-expi-k-model { height: 0; border-top: 2px dashed var(--gold-deep); background: none; }
.ln-legend .ln-expi-k-am { width: .5rem; height: .5rem; border-radius: 50%; background: none; border: 2px solid var(--gold-deep); }
.ln-legend .ln-expi-k-strike { height: 0; border-top: 2px dashed var(--gold-deep); background: none; }

.ln-expi-sub { display: block; }
@media (max-width: 520px) {
  .ln-expi-table { font-size: .78rem; }
  .ln-expi-table th, .ln-expi-table td { padding: .35rem .35rem; }
  .ln-expi-table tbody th { min-width: 6rem; }
  .ln-expi-table thead th { min-width: 3.5rem; }
}
.ln-expi-note { margin: 0; font-size: .82rem; }