/* Learn, Options Module 4: Your portfolio's Greeks (web/learn/portfolio.js). Tokens only; class names start with ln-port-. */

.ln-port-small { font-size: .82rem; }
.ln-port-tl { min-width: 4.2rem; font-size: .88rem; }

/* presets and the expiry they're built on */
.ln-port-presets { margin: .8rem 0 .5rem; }
.ln-port-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ln-port-chips button { padding: .38rem .8rem; border-radius: 99px; border: 1px solid rgb(var(--line-rgb) / .3); background: transparent;
  color: var(--study-ink); font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; }
.ln-port-chips button:hover { border-color: var(--arcade-accent); }
.ln-port-chips button[aria-pressed="true"] { background: var(--arcade-accent); border-color: var(--arcade-accent); color: var(--accent-ink); }
.ln-port-pexp { display: flex; flex-direction: column; gap: .3rem; margin: .4rem 0 .8rem; }
.ln-port-pexp > span { font-size: .82rem; }

/* the legs */
.ln-port-legs { display: flex; flex-direction: column; gap: .45rem; margin: .6rem 0 .8rem; }
.ln-port-leg { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; padding: .5rem .6rem; border-radius: 10px;
  border: 1px solid rgb(var(--line-rgb) / .2); background: rgb(var(--hl) / .02); }
.ln-port-leg.is-bad { border-color: color-mix(in srgb, var(--arcade-close) 60%, transparent); }
.ln-port-leg select, .ln-port-leg input { font: inherit; font-size: .9rem; padding: .3rem .45rem; border-radius: 8px;
  border: 1px solid rgb(var(--line-rgb) / .3); background: var(--study); color: var(--study-ink); min-width: 0; }
.ln-port-leg input[type=number] { width: 4.2rem; font-variant-numeric: tabular-nums; }
.ln-port-fill { font-size: .84rem; color: var(--arcade-muted); font-variant-numeric: tabular-nums; flex: 1 1 9rem; }
.ln-port-leg.is-bad .ln-port-fill { color: var(--arcade-close); }
.ln-port-del { margin-left: auto; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgb(var(--line-rgb) / .3);
  background: transparent; color: var(--arcade-muted); font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer; flex: none; }
.ln-port-del:hover:not([disabled]) { border-color: var(--arcade-miss); color: var(--arcade-miss); }
.ln-port-del[disabled] { opacity: .35; cursor: default; }
.ln-port-legbar { display: flex; align-items: center; gap: .8rem; }
.ln-port-legbar .ln-close { margin-left: 0; }
.ln-port-legbar .ln-close[disabled] { opacity: .45; cursor: default; }

/* the dashboard */
.ln-port-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: .5rem; margin: .8rem 0 .4rem; }
.ln-port-card { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; border-radius: 10px;
  border: 1px solid rgb(var(--line-rgb) / .18); background: rgb(var(--hl) / .02); min-width: 0; }
.ln-port-card > span { font-size: .78rem; }
.ln-port-card strong { font-size: 1.12rem; color: var(--head); font-variant-numeric: tabular-nums; }
.ln-port-card small { font-size: .74rem; line-height: 1.35; }
.ln-port-u { font-size: .74rem; font-weight: 400; color: var(--arcade-muted); }

/* chart lines */
.ln-svg path.ln-port-mid { stroke: var(--arcade-accent); stroke-width: 2.2; }
.ln-svg path.ln-port-close { stroke: var(--arcade-close); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ln-svg path.ln-port-exp { stroke: var(--gold-deep); stroke-width: 2.2; }
.ln-svg path.ln-port-now { stroke: var(--arcade-accent); stroke-width: 1.8; stroke-dasharray: 5 3; }
.ln-svg line.ln-port-entry { stroke: rgb(var(--line-rgb) / .45); stroke-width: 1; stroke-dasharray: 2 3; }
.ln-svg text.ln-port-entry-t { fill: var(--arcade-muted); font-weight: 600; }
.ln-svg path.ln-port-delta { stroke: var(--arcade-accent); }
.ln-svg path.ln-port-gamma { stroke: var(--qt-teal); }
.ln-svg path.ln-port-theta { stroke: var(--arcade-close); }
.ln-svg path.ln-port-vega { stroke: var(--gold-deep); }
.ln-svg path.ln-port-real { stroke: var(--head); stroke-width: 1.4; stroke-dasharray: 4 3; }
.ln-svg path.ln-port-a { stroke: var(--arcade-accent); stroke-width: 2.2; }
.ln-svg path.ln-port-b { stroke: var(--qt-teal); stroke-width: 2.2; }
rect.ln-port-spread { fill: color-mix(in srgb, var(--arcade-close) 75%, transparent); }

.ln-legend .ln-port-k-mid, .ln-legend .ln-port-k-now, .ln-legend .ln-port-k-delta, .ln-legend .ln-port-k-a { color: var(--arcade-accent); }
.ln-legend .ln-port-k-close { color: var(--arcade-close); }
.ln-legend .ln-port-k-exp, .ln-legend .ln-port-k-vega { color: var(--gold-deep); }
.ln-legend .ln-port-k-gamma, .ln-legend .ln-port-k-b { color: var(--qt-teal); }
.ln-legend .ln-port-k-theta { color: var(--arcade-close); }
.ln-legend .ln-port-k-real { color: var(--head); height: .15rem; }

/* section 4's comparison table */
.ln-port-table { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.ln-port-table th, .ln-port-table td { padding: .38rem .6rem; text-align: right; border-bottom: 1px solid rgb(var(--line-rgb) / .1); }
.ln-port-table thead th { font-size: .78rem; font-weight: 600; color: var(--arcade-muted); background: rgb(var(--hl) / .03); text-align: right; }
.ln-port-table tbody th { text-align: left; font-weight: 600; color: var(--head); white-space: nowrap; }
.ln-port-table td { color: var(--study-ink); white-space: nowrap; }
.ln-port-table td strong { color: var(--head); }
.ln-port-table tr.ln-port-sub th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--arcade-muted); padding-top: .7rem; }
.ln-port-pick { margin: .4rem 0 .7rem; }
@media (max-width: 520px) {
  .ln-port-table th, .ln-port-table td { padding: .32rem .4rem; }
  .ln-port-table tbody th { white-space: normal; }
}
.ln-port-tw { max-width: 42rem; }
/* Where the index is, above the legs, so every strike has a reference. */
.ln-port-ref { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 0 0 .6rem; font-variant-numeric: tabular-nums; }
.ln-port-ref strong { font-size: 1.05rem; }
.ln-port-ref .muted { font-size: .84rem; }