/* QQQ Call + Put before the close: additions on top of backtest-strangle.css (ls-*). */
.qcp-page {
  --qcp-pos: #15803d; --qcp-neg: #dc2626; --qcp-accent: #6366f1; --qcp-accent-wash: rgba(99, 102, 241, .10);
  --qcp-card: var(--tw-card-background-color, #fff); --qcp-line: var(--tw-gray-200, #e5e7eb);
  --qcp-soft: var(--tw-gray-100, #f5f7fa); --qcp-strong-line: var(--tw-gray-300, #dbdfe9);
  --qcp-ink: var(--tw-gray-900, #071437); --qcp-muted: var(--tw-gray-600, #64748b);
}
[data-theme-mode="dark"] .qcp-page {
  --qcp-pos: #4ade80; --qcp-neg: #f87171; --qcp-accent: #818cf8; --qcp-accent-wash: rgba(129, 140, 248, .14);
}
.qcp-money, .qcp-nowrap { white-space: nowrap; }

/* side tabs are buttons that look like the site's link tabs */
.qcp-page button.tab { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.qcp-page .tabs { gap: 1.25rem; }

.qcp-risk { border-left: 4px solid #d97706; }
.qcp-risk strong { font-weight: 600; color: var(--qcp-ink); }

/* form */
.qcp-page .ls-controls .select { min-width: 150px; }
.qcp-page .ls-controls .input { width: 130px; }
.qcp-check { flex-direction: row !important; align-items: center; gap: 8px !important; height: 2rem; cursor: pointer; }
.qcp-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--tw-primary); }
.qcp-check:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.qcp-notices { display: flex; flex-direction: column; margin-top: 8px; }
.qcp-notices .ls-notice { margin: 6px 0 0; }

/* five KPI cards in one row, like the short-strangle page */
.qcp-page .ls-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
/* month-by-month P&L under the chart */
.qcp-months { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.qcp-months-title { color: var(--tw-gray-600); font-size: 11px; margin-right: 2px; }
.qcp-month { white-space: nowrap; font-weight: 600; }
.qcp-month small { font-weight: 400; color: var(--tw-gray-600); margin-right: 4px; }
@media (min-width: 1024px) and (max-width: 1639.98px) { body:not(.sidebar-collapse) .qcp-page .ls-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qcp-page .ls-kpi { padding: 12px 14px; gap: 6px; }
.qcp-page .ls-kpi > span { font-size: 11.5px; line-height: 1.3; }
.qcp-page .ls-kpi > strong { font-size: clamp(15px, 1.25vw, 19px); }
.qcp-page .ls-kpi > small { font-size: 11px; line-height: 1.4; }

/* all entry × strike combinations */
/* contain: inline-size keeps the wide grid from widening the site's flex layout on phones */
.qcp-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; contain: inline-size; }
.qcp-grid { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.qcp-grid th { font-weight: 500; font-size: 11px; color: var(--qcp-muted); text-align: left; padding: 4px 6px; white-space: nowrap; }
.qcp-grid thead th { text-align: center; }
.qcp-grid tbody th { color: var(--tw-gray-700); }
.qcp-grid .qcp-group th { padding-top: 10px; color: var(--qcp-ink); font-weight: 600; }
.qcp-grid td { padding: 0; }
.qcp-cell { width: 100%; min-height: 46px; border: 0; border-radius: 6px; padding: 6px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px; background: var(--qcp-soft);
  color: var(--qcp-ink); font-family: inherit; font-variant-numeric: tabular-nums; }
.qcp-cell b { font-size: 12.5px; font-weight: 600; }
.qcp-cell small { font-size: 10.5px; color: var(--tw-gray-700); }
.qcp-cell:hover { box-shadow: inset 0 0 0 1px var(--qcp-strong-line); }
.qcp-cell[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--qcp-accent); }
.qcp-cell:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
.qcp-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--qcp-muted); margin-top: 8px; }
.qcp-legend i { display: inline-block; width: 120px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--qcp-neg) 55%, var(--qcp-card)), var(--qcp-soft), color-mix(in srgb, var(--qcp-pos) 55%, var(--qcp-card))); }

/* chart */
.qcp-chart { position: relative; width: 100%; min-width: 0; margin-top: 8px; contain: inline-size; }
.qcp-chart svg { display: block; width: 100%; overflow: visible; }
.qcp-chart svg:focus-visible { outline: 2px solid #818cf8; outline-offset: 4px; border-radius: 4px; }
.qcp-axis text { font: 500 11px Inter, sans-serif; fill: var(--qcp-muted); font-variant-numeric: tabular-nums; }
.qcp-chart-label { font: 600 11px Inter, sans-serif; fill: var(--tw-gray-700); }
.qcp-gridline { stroke: var(--qcp-line); stroke-width: 1; shape-rendering: crispEdges; }
.qcp-zero { stroke: var(--qcp-strong-line); stroke-width: 1; shape-rendering: crispEdges; }
.qcp-line { fill: none; stroke: var(--qcp-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.qcp-area { fill: var(--qcp-accent-wash); stroke: none; }
.qcp-end, .qcp-hover-dot { fill: var(--qcp-accent); stroke: var(--qcp-card); stroke-width: 2; }
.qcp-end-label { font: 600 12px Inter, sans-serif; fill: var(--qcp-ink); }
.qcp-bar-pos { fill: var(--qcp-pos); }
.qcp-bar-neg { fill: var(--qcp-neg); }
.qcp-dim { opacity: .35; }
.qcp-report-dot { fill: var(--qcp-accent); stroke: var(--qcp-card); stroke-width: 1.5; }
.qcp-cross { stroke: var(--tw-gray-700); stroke-width: 1; opacity: .55; shape-rendering: crispEdges; }
.qcp-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 190px; max-width: 280px;
  background: var(--qcp-card); border: 1px solid var(--qcp-strong-line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(7, 20, 55, .12); padding: 9px 11px; font-size: 12px; line-height: 1.5; }
.qcp-tip[hidden] { display: none !important; }
.qcp-tip small { display: block; font-size: 11px; color: var(--qcp-muted); }
.qcp-tip-date { font-size: 11px; color: var(--qcp-muted); }
.qcp-tip-row { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.qcp-tip-row b { font-weight: 600; color: var(--qcp-ink); }
.qcp-tip-key { display: inline-block; width: 12px; height: 2px; border-radius: 1px; background: var(--qcp-accent); vertical-align: 3px; margin-right: 6px; }

/* daily table */
.qcp-days-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qcp-days-tools .select { min-width: 190px; }
.qcp-page .qcp-days th { vertical-align: bottom; }
.qcp-page .qcp-days .qcp-col-date { width: 17%; }
.qcp-page .qcp-days .qcp-col-qqq { width: 12%; }
.qcp-page .qcp-days .qcp-col-debit, .qcp-page .qcp-days .qcp-col-fees { width: 9%; }
.qcp-page .qcp-days .qcp-col-pnl { width: 13%; }
.qcp-page .qcp-days td small { display: block; }
.qcp-page .qcp-days tr.qcp-noentry td { color: var(--qcp-muted); }
.qcp-page .qcp-days small.qcp-report { display: inline-block; margin-top: 3px; padding: 0 7px; border-radius: 10px; background: var(--qcp-accent-wash); color: var(--tw-gray-800); }
.qcp-page .qcp-days tr.qcp-flash > td { background: var(--qcp-accent-wash); }
.qcp-page .ls-detail-box code { display: block; }
.qcp-page .ls-detail-box p { margin: 6px 0 0; }

/* method list: the site's Tailwind preflight removes list markers */
.qcp-method { list-style: disc; margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.6; max-width: 110ch; }
.qcp-method strong { font-weight: 600; color: var(--qcp-ink); }
.qcp-method code { font-size: 12px; }

@media (max-width: 1199px) {
  .qcp-page .ls-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .qcp-page .ls-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qcp-page .ls-controls .select, .qcp-page .ls-controls .input { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .qcp-page * { scroll-behavior: auto !important; } }

/* checks section: stability, $1000 a day, lock methods, costs, other underlyings */
.qcp-subhead { font-size: 13px; font-weight: 600; margin: 20px 0 8px; color: var(--tw-gray-900); }
.qcp-checks-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.qcp-checks-table th, .qcp-checks-table td { padding: 9px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tw-gray-200); }
.qcp-checks-table thead th { background: var(--tw-gray-100); font-size: 11px; font-weight: 500; color: var(--tw-gray-600); line-height: 1.4; }
.qcp-checks-table tbody th { font-weight: 600; color: var(--tw-gray-900); width: 34%; line-height: 1.45; }
.qcp-checks-table.qcp-short-head tbody th { width: 16%; }
.qcp-checks-table .qcp-group-row th { background: var(--tw-gray-100); color: var(--tw-gray-800); font-size: 11px; width: auto; }
.qcp-checks-table td.qcp-cell-mark { box-shadow: inset 0 0 0 2px var(--tw-primary); }   /* the default's cell in a grid */   /* years or short settings instead of rule names */
.qcp-checks-table small { display: block; margin-top: 3px; font-weight: 400; font-size: 11px; color: var(--tw-gray-600); line-height: 1.45; }
.qcp-checks-table tr:has(+ .qcp-months-row) > * { border-bottom: none; }
.qcp-checks-table .qcp-months-row td { padding-top: 0; }
.qcp-months-inline { margin-top: 0; font-size: 11.5px; }
.qcp-costs { min-width: 820px; }
.qcp-costs td { white-space: nowrap; }
.qcp-symbols { margin-top: -6px; }
/* The RSI copy of the page (/backtests/qqq/call-put-close-rsi): the traded-only switch beside the sort. */
.cpo-traded { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; color: var(--tw-gray-700); }
.cpo-traded input { width: 16px; height: 16px; margin: 0; accent-color: var(--tw-primary); }
[data-qqq-call-put-rsi] .qcp-days-tools .select { width: auto; }
[data-qqq-call-put-rsi] .qcp-days .qcp-col-rsi { width: 9%; }
[data-qqq-call-put-rsi] .ls-controls select[name="rsidir"] { min-width: 330px; }
@media (max-width: 720px) { [data-qqq-call-put-rsi] .ls-controls select[name="rsidir"] { min-width: 0; } }