/* Learn · Line movement (/learn/line-movement/). Loaded after content.css. Prefix: mv- */

/* ---------- 72h chart figure ---------- */
.pg-prose .mv-fig { margin: 24px 0 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.pg-prose .mv-fig + p { margin-top: 24px; }
.mv-fig__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.mv-fig__title { margin-top: 6px; font: 400 19px/1.2 var(--f-display); color: var(--ink); }
.pg-prose a.mv-fig__open { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--bg-btn); border: 2px solid var(--line-3); box-shadow: 0 3px 0 #03060b; font-size: 13.5px; font-weight: 700; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; }
.pg-prose a.mv-fig__open:hover { color: #fff; border-color: var(--line-4); }

.mv-chart { position: relative; margin: 4px 0 6px; }
.mv-chart svg { display: block; width: 100%; height: auto; aspect-ratio: 780 / 270; overflow: visible; }
.mv-chart path, .mv-chart rect { vector-effect: non-scaling-stroke; }
.mv-chart path { fill: none; }
.mv-ch-grid { stroke: #1f2d40; stroke-width: 1; }
.mv-chart .mv-ch-window { fill: rgba(57, 217, 138, .14); stroke: none; }
.mv-ch-gap { fill: rgba(57, 217, 138, .26); stroke: #39d98a; stroke-width: 1; }
.mv-ch-steam { stroke: #ff4d4d; stroke-width: 1.5; stroke-dasharray: 3 4; }
.mv-ch-fair { stroke: #eef2f7; stroke-width: 2; stroke-dasharray: 5 5; opacity: .9; }
.mv-ch-DK { stroke: var(--dk); stroke-width: 2; opacity: .8; }
.mv-ch-FD { stroke: var(--fd); stroke-width: 2; opacity: .8; }
.mv-ch-MGM { stroke: var(--mgm-line); stroke-width: 3; stroke-linejoin: round; }
.mv-ch-PIN { stroke: var(--pin); stroke-width: 2.75; stroke-linejoin: round; }

.mv-lbl { position: absolute; transform: translate(0, -50%); font: 400 11px/1 var(--f-mono); color: var(--ink-3); white-space: nowrap; pointer-events: none; }
.mv-lbl--x { transform: translate(-50%, -50%); }
.mv-lbl--now { color: var(--ink-2); }
.mv-lbl--left { transform: translate(-100%, -50%); }
.mv-lbl--steam { padding: 3px 6px; border-radius: 6px; background: rgba(255, 77, 77, .12); color: var(--red-soft); letter-spacing: .04em; }
.mv-lbl--gap { padding: 3px 6px; border-radius: 6px; background: rgba(11, 18, 28, .88); border: 1px solid rgba(57, 217, 138, .45); color: var(--green); }
.mv-lbl--end { font-weight: 700; }
.mv-c-PIN { color: var(--pin); } .mv-c-DK { color: var(--dk); } .mv-c-FD { color: var(--fd); } .mv-c-MGM { color: var(--mgm-line); }

/* legend: now / open per book */
.pg-prose .mv-legend { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.pg-prose .mv-legend li + li { margin-top: 0; }
.mv-legend__item { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 10px 11px 11px; border-radius: 12px; background: var(--bg-inset); border: 2px solid var(--line-2); }
.mv-legend__item.is-best { border-color: rgba(245, 179, 1, .6); box-shadow: 0 0 18px rgba(245, 179, 1, .12); }
.mv-legend__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mv-legend__top .book { flex: none; }
.mv-legend__fair { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--line-3); background: linear-gradient(90deg, #eef2f7 0 4px, transparent 4px 7px, #eef2f7 7px 11px, transparent 11px 14px, #eef2f7 14px) center / 16px 2px no-repeat; }
.mv-legend__name { font: 400 10.5px/1.1 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-legend__now { font: 400 17px/1 var(--f-mono); color: var(--ink); white-space: nowrap; }
.mv-legend__item.is-best .mv-legend__now { color: var(--gold-soft); }
.mv-legend__now i { font-style: normal; font-size: 12px; margin-left: 4px; color: var(--ink-3); }
.mv-legend__now i.is-down { color: var(--red-soft); }
.mv-legend__now i.is-up { color: var(--green); }
.mv-legend__open { font: 400 11.5px/1 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.mv-legend__open em { font-style: normal; color: var(--gold-soft); }
.mv-fig__cap { font-size: 13px; line-height: 1.5; color: var(--ink-3); }

@media (max-width: 560px) {
  .pg-prose .mv-fig { padding: 16px 14px; }
  .mv-chart svg { aspect-ratio: auto; height: 230px; }
  .mv-lbl { font-size: 10px; }
  .mv-lbl--steam, .mv-lbl--gap { padding: 2px 5px; }
  .pg-prose .mv-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-legend__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- steam / lock example heads ---------- */
.mv-steam__head, .mv-lock { display: flex; align-items: center; gap: 14px; }
.mv-steam__what { flex: 1; min-width: 0; }
.mv-steam__title { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.mv-steam__sub { margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.mv-steam__val { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font: 400 26px/1 var(--f-display); color: var(--red); }
.mv-steam__val span { font: 400 10px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink-3); }
@media (max-width: 560px) {
  .mv-steam__head { flex-wrap: wrap; }
  .mv-steam__what { flex-basis: calc(100% - 60px); }
  .mv-steam__val { flex-direction: row; align-items: baseline; gap: 8px; font-size: 22px; padding-left: 58px; }
}

/* current quotes on the steamed side */
.mv-quotes { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-quote { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 11px; background: var(--bg-inset); border: 2px solid var(--line-2); font: 400 14px/1 var(--f-mono); color: var(--ink-2); }
.mv-quote b { font-weight: 400; color: var(--ink); }
.mv-quote small { font-size: 9.5px; letter-spacing: .12em; color: var(--ink-3); }
.mv-quote--best { border-color: rgba(245, 179, 1, .6); box-shadow: 0 0 18px rgba(245, 179, 1, .14); }
.mv-quote--best b { color: var(--gold-soft); }
.mv-quote .grade--xs { width: 24px; height: 24px; border-radius: 7px; font-size: 13px; }

/* ---------- tables ---------- */
.mv-table td { vertical-align: middle; }
.mv-sub { display: block; margin-top: 4px; font: 400 12px/1.3 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.mv-num, .mv-table td.mv-num { font-family: var(--f-mono); font-size: 14px; white-space: nowrap; color: var(--ink); }
.mv-red { font-weight: 400; color: var(--red-soft); }
.mv-sub--stale { color: var(--gold-soft); }
.mv-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.mv-cell .grade--xs { width: 24px; height: 24px; border-radius: 7px; font-size: 13px; }
.mv-ev { font: 400 13px/1 var(--f-mono); color: var(--green); }
.mv-followed { font: 400 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.mv-cell--ghost { opacity: .6; }
.mv-cell--ghost .mv-num { color: var(--ink-2); }
.mv-table td.mv-frozen { color: var(--gold-soft); }
.pg-example .pg-table-wrap { background: var(--bg-inset); }

/* phones: rows become small cards, header labels move into the cells */
@media (max-width: 560px) {
  .mv-stack thead { display: none; }
  .mv-stack, .mv-stack tbody { display: block; }
  .mv-stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; border-top: 2px solid var(--line-1); }
  .mv-stack tr:first-child { border-top: 0; }
  .mv-stack td { padding: 0; border-top: 0; min-width: 0; }
  .mv-stack td:first-child { grid-column: 1 / -1; }
  .mv-stack--3 tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mv-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 6px; font: 400 10px/1.2 var(--f-mono); letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }
}

/* ---------- tickets vs handle ---------- */
.mv-splits { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.mv-split { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--bg-inset); border: 2px solid var(--line-2); }
.mv-split.is-sharp { border-color: rgba(255, 77, 77, .35); }
.mv-split__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.mv-split__teams { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 400 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); }
.mv-split .duo-head .a, .mv-split .duo-head .b { color: var(--ink-2); }
.mv-split__calc { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.mv-split__calc b { color: var(--ink); font-family: var(--f-mono); font-weight: 400; }
.mv-split.is-sharp .mv-split__calc b { color: var(--red-soft); }

/* ---------- keep going ---------- */
.mv-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pg-prose a.mv-next__card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 16px; background: var(--card); border: 2px solid var(--line-3); box-shadow: var(--sh-panel); color: var(--ink-2); text-decoration: none; transition: border-color .15s, transform .15s; }
.pg-prose a.mv-next__card:hover { border-color: var(--steel); color: var(--ink-2); transform: translateY(-2px); }
.mv-next__card strong { font: 400 18px/1.2 var(--f-display); color: var(--ink); }
.mv-next__card span:last-child { font-size: 14.5px; line-height: 1.5; }