/* Deep in-the-money options instead of shares: the backtest cards (backtest-strangle.css) plus tables on the
   site's Metronic tokens (--tw-*), so the page reads the same in the light and the dark theme. */
.dil-page h2 { margin-bottom: 4px; color: var(--tw-gray-900); }
.dil-page .ls-panel > p { max-width: 110ch; color: var(--tw-gray-700); }
.dil-page .ls-panel > p strong, .dil-page .ls-heading strong { font-weight: 600; color: var(--tw-gray-900); }
.dil-controls label { flex: 0 1 230px; }
.dil-controls label:nth-child(2) { flex-basis: 290px; }

.dil-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; contain: inline-size; margin-top: 12px; }
.dil-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dil-table th, .dil-table td { padding: 9px 10px; text-align: right; vertical-align: top; border-bottom: 1px solid var(--tw-gray-200); white-space: nowrap; }
.dil-table th:first-child { text-align: left; }
.dil-table thead th { background: var(--tw-gray-100); font-size: 11px; font-weight: 500; color: var(--tw-gray-600); line-height: 1.4; vertical-align: bottom; }
.dil-table thead th a { color: inherit; }
.dil-table tbody th { font-weight: 600; color: var(--tw-gray-900); }
.dil-table td { color: var(--tw-gray-800); }
.dil-table td strong { font-weight: 600; color: var(--tw-gray-900); }
.dil-page .dil-table small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--tw-gray-600); }
.dil-table tbody tr:hover > * { background: var(--tw-gray-100); }
.dil-table tr.is-selected > * { background: var(--tw-primary-light); }
.dil-table tr.is-selected > th:first-child { box-shadow: inset 3px 0 0 var(--tw-primary); }
.dil-table td.dil-none { color: var(--tw-gray-500); text-align: center; }
.dil-table td.dil-none-row { text-align: left; white-space: normal; }

/* The grid: tinted where the option moves like the shares, outlined at the least such depth per term. */
.dil-grid { min-width: 820px; }
.dil-grid td { width: 12%; }
.dil-grid td.is-stocklike { background: var(--tw-success-light); }
.dil-grid tbody tr:hover > td.is-stocklike { background: var(--tw-success-light); }
.dil-grid td.is-answer { box-shadow: inset 0 0 0 2px var(--tw-success); }

.dil-notes { list-style: disc; margin: 14px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.6; max-width: 110ch; color: var(--tw-gray-800); }
.dil-notes strong { font-weight: 600; color: var(--tw-gray-900); }
.dil-notes code { font-size: 12px; overflow-wrap: anywhere; }
.dil-page .ls-method .dil-notes { font-size: 12.5px; }

@media (max-width: 540px) {
  .dil-table th, .dil-table td { padding: 8px 7px; }
  .dil-notes { font-size: 12.5px; }
}