/* /instiv2/compare/ page styles: the side by side table with its picker (cxt-*), the duo, head to head (h2h-*),
   strategy pairs (pair-*) and the key number. */

/* ---------- the full table ---------- */
.cxt-wrap { color: var(--page-text); }
.cxt-in { max-width: 1400px; margin: 0 auto; padding: clamp(70px, 11vh, 130px) var(--pad); }
.cxt-head { margin-bottom: 30px; }
.cxt-head .kicker { color: var(--page-muted); }
.cxt-head .kicker .num { color: var(--page-text); border-color: var(--page-line); }
.cxt { border-radius: 24px; overflow: hidden; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line), 0 40px 90px -60px rgba(5,8,15,.5); }
.cxt-r { display: grid; grid-template-columns: 1fr repeat(5, 1.25fr); }
.cxt-r > span { padding: 14px 16px; font-size: 14px; line-height: 1.45; color: var(--page-muted); border-top: 1px solid var(--page-line); }
.cxt-r > span:first-child { font-weight: 600; color: var(--page-text); }
.cxt-r > .rc { color: var(--page-text); font-weight: 500; background: color-mix(in srgb, var(--gain) 9%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--gain) 40%, transparent), inset -1px 0 0 color-mix(in srgb, var(--gain) 40%, transparent); }
.cxt-hd > span { border-top: 0; font: 600 11.5px/1.3 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--page-faint); padding-top: 18px; }
.cxt-hd > .rc { color: #087553; }
html[data-theme="dark"] .cxt-hd > .rc { color: var(--gain); }
.cxt-r:not(.cxt-hd):hover > span { background-color: color-mix(in srgb, var(--page-text) 3%, transparent); }
.cxt-fine, .h2h-fine { margin: 16px 0 0; max-width: 110ch; font: 400 11.5px/1.5 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-faint); }
.h2h-all { margin: 22px 0 0; max-width: 72ch; font-size: 15px; line-height: 1.7; color: var(--page-muted); }
.h2h-all a { color: var(--page-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 720px) {
  .cxt { background: none; box-shadow: none; display: grid; gap: 10px; border-radius: 0; overflow: visible; }
  .cxt-hd { display: none; }
  .cxt-r { grid-template-columns: 1fr; border-radius: 18px; overflow: hidden; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
  .cxt-r > span { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 14px; font-size: 13px; }
  .cxt-r > span:first-child { display: block; border-top: 0; font-size: 15px; padding-top: 14px; }
  .cxt-r > span[data-c]::before { content: attr(data-c); font: 600 11px/1.5 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--page-faint); }
  .cxt-r > .rc { box-shadow: none; }
  .cxt-r > .rc::before { color: #087553 !important; }
  html[data-theme="dark"] .cxt-r > .rc::before { color: var(--gain) !important; }
}

/* ---------- duo ---------- */
.cx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; background: var(--page); }
.cx-duo-card { position: relative; min-height: min(82vh, 760px); border-radius: 24px; overflow: hidden; color: var(--text); background: var(--ink); }
.cx-duo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cx-duo-card:hover img { transform: scale(1.05); }
.cx-duo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,8,15,.95), rgba(5,8,15,.35) 60%, rgba(5,8,15,.15)); }
.cx-duo-card.lose::after { background: linear-gradient(to top, rgba(5,8,15,.95), rgba(5,8,15,.5) 60%, rgba(5,8,15,.35)); }
.cx-duo-in { position: absolute; z-index: 2; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(24px, 4vw, 48px); }
.cx-duo-in p:not(.kicker) { margin: 16px 0 0; max-width: 29.02em; color: var(--muted); }
.cx-duo-card.win .kicker .num { border-color: rgba(61,220,151,.6); color: var(--gain); }

/* ---------- the path ---------- */

/* ---------- head to head and pairs ---------- */
.h2h, .pair-sec { color: var(--page-text); }
.pair-sec { background: var(--frame-glow); }
.h2h-in { max-width: 1400px; margin: 0 auto; padding: clamp(70px, 11vh, 130px) var(--pad); }
.h2h-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 70px); align-items: end; margin-bottom: 26px; }
.h2h-head .kicker { color: var(--page-muted); }
.h2h-head .kicker .num { color: var(--page-text); border-color: var(--page-line); }
.h2h-pick, .pair-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.h2h-pick button, .pair-chips button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.h2h-pick button[aria-pressed="true"], .pair-chips button[aria-pressed="true"] { background: var(--page-text); color: var(--page); border-color: var(--page-text); }
.h2h-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: stretch; }
.h2h-card { display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--iv2-r, 14px); background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
.h2h-names { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.h2h-names span { font-weight: 650; font-size: 17px; letter-spacing: -0.015em; line-height: 1.2; }
.h2h-names .b { text-align: right; }
.h2h-names small { display: block; margin-top: 4px; font: 500 11px/1.2 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); }
.h2h-names em { font-style: normal; font: 500 12px/1.6 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-faint); }
.h2h-names .a { color: var(--iv2-strat); }
.h2h-bars { display: grid; gap: 14px; }
.hb { display: grid; gap: 6px; }
.hb-l { display: flex; justify-content: space-between; font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); }
.hb-t { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.hb-t > div { position: relative; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--page-text) 5%, transparent); overflow: hidden; }
.hb-t > div:first-child i { right: 0; transform-origin: 100% 50%; background: linear-gradient(270deg, var(--iv2-strat), color-mix(in srgb, var(--iv2-strat) 40%, transparent)); }
.hb-t > div:last-child i { left: 0; transform-origin: 0 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--page-text) 55%, transparent), color-mix(in srgb, var(--page-text) 15%, transparent)); }
.hb-t i { position: absolute; top: 0; bottom: 0; width: var(--w); transform: scaleX(var(--s, 0)); transition: transform .9s cubic-bezier(.2,.7,.1,1), width .7s cubic-bezier(.2,.7,.1,1); }
.hb-t b { position: absolute; top: 50%; transform: translateY(-50%); font: 600 12.5px/1 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-text); z-index: 1; }
.hb-t > div:first-child b { left: 8px; } .hb-t > div:last-child b { right: 8px; }
.h2h-dl { display: grid; grid-template-columns: auto 1fr 1fr; gap: 0; margin: 0; font-size: 13.5px; }
.h2h-dl dt, .h2h-dl dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--page-line); }
.h2h-dl dt { padding-right: 14px; font: 500 11px/1.6 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--page-faint); }
.h2h-dl dd { color: var(--page-muted); padding-right: 10px; }
.h2h-dl dd.a { color: var(--page-text); font-weight: 600; }
.h2h-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 14px; border: 1px solid var(--page-line); background: var(--page-glass); }
.h2h-link::after { content: ""; width: 8px; height: 8px; margin-left: 10px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); }
.h2h-link:hover { border-color: var(--page-text); }

.pair-ctl { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.pair-ctl label { display: grid; gap: 6px; font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); }
.pair-ctl select { min-height: 46px; min-width: 230px; padding: 0 38px 0 14px; border-radius: 14px; border: 1px solid var(--page-line); background: var(--page-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/></svg>") right 14px center / 12px no-repeat; color: var(--page-text); font: 600 14px Inter, "Inter Fallback", sans-serif; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pair-chips { justify-content: flex-start; margin-bottom: 18px; }
.pair-chips button { font-size: 12.5px; min-height: 36px; }
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair-grid .iv2 { animation: pairIn .7s cubic-bezier(.2,.7,.1,1) both; }
.pair-grid .iv2:nth-child(2) { animation-delay: .08s; }
@keyframes pairIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.pair-diff { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 16px 0 18px; }
.pd { padding: 14px; border-radius: 16px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
.pd span { display: block; font: 500 11px/1.2 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); }
.pd b { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; font: 600 14px/1.25 "JetBrains Mono", "JBM Fallback", monospace; }
.pd b i { font-style: normal; } .pd b i + i { color: var(--page-muted); text-align: right; }
.pd b i.w { color: #087553; }
html[data-theme="dark"] .pd b i.w { color: var(--gain); }

/* ---------- key insight ---------- */
.cx-key { position: relative; color: var(--text); background: var(--ink); }
.cx-key > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 62%; filter: brightness(.38) saturate(.8); }
.cx-key::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5,8,15,.92), rgba(5,8,15,.4) 70%); }
.cx-key-in { position: relative; z-index: 2; max-width: 1400px; min-height: 84vh; margin: 0 auto; padding: clamp(80px, 12vh, 140px) var(--pad); display: flex; flex-direction: column; justify-content: center; }
.cx-key .kicker { color: var(--muted); }
.cx-key-big { margin: 0; font-size: clamp(40px, 5vw, 76px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.cx-key-big b { font: 700 1.6em/1 Inter, "Inter Fallback", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; color: var(--gain); text-shadow: 0 0 60px rgba(61,220,151,.35); }
.cx-key-sub { margin: 22px 0 0; max-width: 36.59em; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }

@media (max-width: 1100px) {
  .h2h-grid, .pair-grid { grid-template-columns: 1fr; }
  .pair-diff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cx-duo { grid-template-columns: 1fr; }
  .cx-duo-card { min-height: 70vh; }
  .h2h-head { grid-template-columns: 1fr; }
  .h2h-pick, .pair-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); scrollbar-width: none; }
  .h2h-pick::-webkit-scrollbar, .pair-chips::-webkit-scrollbar { display: none; }
  .h2h-pick button, .pair-chips button { flex: none; }
  .pair-ctl { justify-content: stretch; }
  .pair-ctl label { flex: 1 1 140px; }
  .pair-ctl select { min-width: 0; width: 100%; }
  .pair-diff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h2h-dl { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pair-grid .iv2 { animation: none; }
}

@media (min-width: 861px) { .layer .copy-right { padding-right: calc(var(--pad) + 70px); } }

/* picker: the same strategy picked twice */
.pair-msg { flex-basis: 100%; margin: 0; min-height: 0; text-align: right; font-size: 13px; font-weight: 600; color: var(--page-text); opacity: 0; transition: opacity .25s; }
.pair-msg.is-on { opacity: 1; }

/* ---------- the picker: RupeeCase against one, or all four ---------- */
.cxt-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 22px 40px; }
.cxt-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
.cxt-pick > span { padding: 0 10px 0 12px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-muted); }
.cxt-pick button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; font: 600 14px/1 Inter, "Inter Fallback", sans-serif; color: var(--page-muted); background: transparent; cursor: pointer; transition: background .3s var(--ease), color .3s; }
.cxt-pick button:hover { color: var(--page-text); }
.cxt-pick button[aria-pressed="true"] { color: var(--page); background: var(--page-text); }
.cxt-r > span { transition: opacity .35s var(--ease), background-color .3s; }
.cxt.is-two .cxt-r { grid-template-columns: minmax(150px, .7fr) 1.4fr 1.4fr; }
.cxt.is-two .cxt-r > .off { display: none; }
.cxt.is-two .cxt-r > span { font-size: 15px; padding: 16px 20px; }
.cxt.is-two .cxt-hd > span { font-size: 12px; }
.cxt.is-two .cxt-r > .vs { color: var(--page-text); }
.cxt.flash .cxt-r > span:not(:first-child) { animation: cxtIn .5s var(--ease) both; }
@keyframes cxtIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .cxt-pick { border-radius: 18px; width: 100%; }
  .cxt-pick > span { flex-basis: 100%; padding: 6px 8px 2px; }
  .cxt-pick button { flex: 1 1 auto; min-height: 44px; padding: 0 12px; font-size: 13.5px; }
  /* P1: 44 px picker chips on phones */
  .h2h-pick button, .pair-chips button { min-height: 44px; }
  /* two columns read as a real table on a phone */
  .cxt.is-two { display: block; border-radius: 20px; overflow: hidden; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
  .cxt.is-two .cxt-hd { display: grid; }
  .cxt.is-two .cxt-r { grid-template-columns: 30% 1fr 1fr; border-radius: 0; box-shadow: none; background: none; }
  .cxt.is-two .cxt-r > span, .cxt.is-two .cxt-r > span:first-child { display: block; padding: 11px 10px; font-size: 13px; line-height: 1.4; border-top: 1px solid var(--page-line); }
  .cxt.is-two .cxt-hd > span { border-top: 0; font-size: 12px; letter-spacing: .04em; padding-top: 14px; }
  .cxt.is-two .cxt-r > span:first-child { font-size: 13px; }
  .cxt.is-two .cxt-r > span[data-c]::before { content: none; }
}
@media (prefers-reduced-motion: reduce) { .cxt.flash .cxt-r > span { animation: none; } }

/* phone legibility: nothing under 12px, including the shared chart labels inside this page's sections */
@media (max-width: 860px) {
  .cxt-fine, .h2h-fine { font-size: 12px; }
  .h2h .iv2-eyebrow, .h2h .iv2-cap, .h2h .iv2-stats dt, .h2h .iv2-legend, .pair-sec .iv2-eyebrow, .pair-sec .iv2-cap, .pair-sec .iv2-stats dt, .pair-sec .iv2-legend { font-size: 12px; }
  .hb-l, .h2h-names small, .h2h-dl dt, .pair-ctl label, .pd span { font-size: 12px; }
  .cx-duo-card { min-height: 60vh; }
  .pg-media .tag-live { font-size: 12px; }
}