/* Betting App — custom CSS additions on top of Tailwind CDN */

/* Recovery sequence analysis */
.recovery-analysis { display: grid; gap: 1rem; color: #cbd5e1; }
.recovery-note { color: #94a3b8; font-size: .75rem; line-height: 1.6; margin: 0; }
.recovery-cards, .recovery-comparison-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.recovery-cards > div { border: 1px solid #334155; background: #1e293b; border-radius: .75rem; padding: 1rem; }
.recovery-cards span, .recovery-comparison-grid span { display: block; font-size: .75rem; color: #cbd5e1; }
.recovery-cards b, .recovery-comparison-grid b { display: block; font-size: 1.75rem; line-height: 1.2; margin: .5rem 0; font-variant-numeric: tabular-nums; }
.recovery-cards small, .recovery-comparison-grid small { display: block; font-size: .75rem; color: #94a3b8; line-height: 1.6; }
.recovery-positive, .recovery-cards .recovery-positive, .recovery-comparison-grid .recovery-positive { color: #6ee7b7; }
.recovery-negative, .recovery-cards .recovery-negative, .recovery-comparison-grid .recovery-negative { color: #fda4af; }
.recovery-cutoff { border: 1px solid #475569; border-radius: .75rem; padding: 1rem; background: #0f172a; }
.recovery-cutoff label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .5rem; }
.recovery-cutoff input { width: 4.5rem; margin: 0 .25rem; padding: .5rem; background: #1e293b; color: #f8fafc; border: 1px solid #64748b; border-radius: .375rem; }
.recovery-cutoff input:focus-visible, .recovery-detail summary:focus-visible { outline: 2px solid #34d399; outline-offset: 3px; }
.recovery-cutoff input:invalid { border-color: #fb7185; }
.recovery-takeaway { font-size: 1rem; line-height: 1.5; color: #e2e8f0; margin: 1rem 0; }
.recovery-takeaway strong { color: #6ee7b7; }
.recovery-comparison-grid { margin-bottom: 1rem; }
.recovery-comparison-grid > div { border-left: 2px solid #334155; padding-left: .75rem; }
.recovery-subtitle { font-size: .875rem; font-weight: 600; color: #e2e8f0; margin: 0 0 .75rem; }
.recovery-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .75rem; margin-bottom: 1rem; }
.recovery-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.recovery-legend i { width: .6rem; height: .6rem; border-radius: 2px; }
.recovery-chart { display: grid; gap: .625rem; max-height: 26rem; overflow-y: auto; padding-right: .25rem; }
.recovery-chart-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 4rem; align-items: center; gap: .75rem; font-size: .8rem; font-variant-numeric: tabular-nums; }
.recovery-chart-row b { text-align: right; font-weight: 500; }
.recovery-depth small { color: #94a3b8; }
.recovery-bar-track { background: #1e293b; height: 1.1rem; border-radius: .25rem; overflow: hidden; }
.recovery-bar { display: flex; height: 100%; min-width: 3px; }
.recovery-bar span { display: block; height: 100%; }
.recovery-detail { border-top: 1px solid #334155; padding-top: .75rem; }
.recovery-detail summary { cursor: pointer; font-size: .8rem; color: #cbd5e1; padding: .25rem 0; }
.recovery-table-scroll { overflow-x: auto; }
.recovery-table { width: 100%; border-collapse: collapse; font-size: .75rem; font-variant-numeric: tabular-nums; }
.recovery-table caption { text-align: left; color: #94a3b8; padding: .75rem 0; }
.recovery-table th, .recovery-table td { text-align: right; padding: .65rem .75rem; border-bottom: 1px solid #334155; white-space: nowrap; }
.recovery-table th { color: #cbd5e1; font-weight: 500; }
.recovery-table th:first-child { text-align: left; }
.recovery-method { display: grid; gap: .75rem; font-size: .75rem; color: #94a3b8; line-height: 1.6; margin-top: .75rem; }
.recovery-method p { margin: 0; }
@media (max-width: 600px) {
  .recovery-cards, .recovery-comparison-grid { grid-template-columns: 1fr; gap: .625rem; }
  .recovery-cards > div { padding: .75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; align-items: center; }
  .recovery-cards b { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .recovery-cards small { grid-column: 1; }
  .recovery-comparison-grid > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem; }
  .recovery-comparison-grid b { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .recovery-comparison-grid small { grid-column: 1; }
  .recovery-chart-row { grid-template-columns: 3.5rem minmax(0, 1fr) 3rem; gap: .5rem; }
}

/* ── Safe-area insets ───────────────────────────────────────────────────────────
   index.html sets viewport-fit=cover and apple-mobile-web-app-status-bar-style
   black-translucent, so when installed to the iOS Home Screen the web view
   extends underneath the status bar and into the rounded corners. Every edge
   needs its inset applied or content collides with system UI.                  */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Header must clear the status bar, or the clock overlaps the page title. */
#app-header {
  padding-top: max(0.75rem, var(--safe-top));
  padding-left: max(1rem, var(--safe-left));
  padding-right: max(1rem, var(--safe-right));
}

/* Back button.
   iOS reserves roughly the leftmost 15-20px of the screen for its own
   edge-swipe gesture and swallows taps there, so the control must be held clear
   of the edge rather than tucked into it. 44x44 is the Apple HIG minimum tap
   target; the icon inside stays 20px. */
#back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: 0;
  padding: 0;
}

/* Bottom nav respects iPhone home-bar, and the corners in landscape. */
#bottom-nav {
  padding-bottom: max(8px, var(--safe-bottom));
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Main content gets enough padding so content isn't hidden behind the nav */
#page-content {
  padding-bottom: calc(4rem + max(8px, var(--safe-bottom)));
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* ── Scrollbar styling (WebKit) ─────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #334155; /* slate-700 */
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569; /* slate-600 */
}

/* ── Prevent text size adjustment on orientation change ─────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
}

/* ── Tap highlight colour ───────────────────────────────────────────────────── */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── Filter pills (bets page) ───────────────────────────────────────────────── */
.filter-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: #1e293b;     /* slate-800 */
  color: #94a3b8;          /* slate-400 */
  border: 1px solid #334155; /* slate-700 */
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-pill.active {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;          /* emerald-400 */
  border-color: rgba(16, 185, 129, 0.35);
}

/* ── Hide scrollbar (filter rows) ──────────────────────────────────────────── */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ── Spinner ────────────────────────────────────────────────────────────────── */
.spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #1e293b;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Research workspace stays within the existing responsive app shell. */
.research-page { padding: 1rem; max-width: 90rem; margin: auto; color: #cbd5e1; }
.research-page h2 { font-size: 1.4rem; font-weight: 650; color: #f1f5f9; margin-bottom: .5rem; }
.research-page h3 { font-size: 1.1rem; font-weight: 600; color: #f1f5f9; margin: 1rem 0 .6rem; }
.research-page h4 { font-weight: 600; margin: .7rem 0; }
.research-page p { margin: .5rem 0; line-height: 1.6; }
.research-page form { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; padding: 1rem 0; }
.research-page label { display: flex; flex-direction: column; gap: .3rem; min-width: 8rem; }
.research-page fieldset { width: 100%; border: 1px solid #334155; padding: .8rem; border-radius: .6rem; }
.research-page [data-catalogue] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.research-page [data-catalogue] label { flex-direction: row; align-items: start; gap: .5rem; min-width: 0; padding: .3rem 0; }
.research-page [data-catalogue] label span { display: block; }
.research-page [data-catalogue] small { display: block; color: #94a3b8; margin-top: .3rem; line-height: 1.5; }
.research-page input:not([type=checkbox]), .research-page textarea, .research-page select { background: #0f172a; border: 1px solid #475569; border-radius: .4rem; padding: .5rem; color: #e2e8f0; max-width: 100%; }
.research-page input[type=checkbox] { accent-color: #34d399; margin: .3rem; }
.research-page input[type=checkbox] { flex: 0 0 auto; width: 1rem; height: 1rem; }
.research-page [data-history] label { flex-direction: row; align-items: center; min-width: 0; }
.research-page button { border: 1px solid #475569; border-radius: .4rem; padding: .4rem .7rem; margin: .2rem; color: #d1fae5; background: #1e293b; cursor: pointer; }
.research-page button:hover, .research-page button[aria-selected=true] { background: #134e4a; border-color: #34d399; }
.research-page button:focus-visible, .research-page a:focus-visible { outline: 2px solid #34d399; outline-offset: 3px; }
.research-page input:focus-visible, .research-page textarea:focus-visible, .research-page select:focus-visible { outline: 2px solid #34d399; outline-offset: 2px; }
.research-page details, .research-page article { border: 1px solid #334155; border-radius: .6rem; padding: .8rem; margin: .8rem 0; }
.research-page summary { cursor: pointer; font-weight: 600; }
.research-page [data-history], .research-page [data-results], .research-page [data-compare-result] { overflow-x: auto; }
.research-page table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.research-page th, .research-page td { padding: .7rem; border-bottom: 1px solid #334155; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.research-page th { color: #94a3b8; min-width: 8rem; }
.research-page pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; max-height: 32rem; overflow-y: auto; background: #0f172a; padding: .7rem; }
.research-page [data-downloads] { display: flex; gap: .7rem; flex-wrap: wrap; padding: .7rem 0; }
.research-page a { color: #6ee7b7; text-decoration: underline; }
.research-page [role=status] { color: #a7f3d0; }
@media (max-width: 600px) {
  .research-page form > label { flex: 1 1 100%; min-width: 0; }
  .research-page [data-catalogue] { grid-template-columns: minmax(0, 1fr); }
  .research-page button { min-height: 44px; }
  .research-page fieldset { min-width: 0; }
}
/* Performance filters share one selection across overview, chart and market cohorts. */
.performance-page { display: grid; gap: 1.4rem; padding: 1rem; min-width: 0; }
.performance-page > *, .performance-page section { min-width: 0; }
.performance-page h2 { color: #94a3b8; text-transform: uppercase; font-size: .8rem; font-weight: 600; letter-spacing: .06em; margin-bottom: .65rem; }
.performance-note { color: #94a3b8; font-size: .8rem; line-height: 1.5; margin: .5rem 0; }
.performance-filter-group { border: 1px solid #334155; border-radius: .65rem; padding: .6rem .75rem; margin-bottom: .65rem; min-width: 0; }
.performance-filter-group legend { color: #cbd5e1; font-size: .85rem; padding: 0 .3rem; }
.performance-filter-options { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.performance-filter-options label { display: flex; align-items: center; gap: .45rem; min-height: 44px; font-size: .85rem; overflow-wrap: anywhere; }
.performance-filter-options input { accent-color: #34d399; width: 1rem; height: 1rem; flex-shrink: 0; }
.performance-page button, .performance-page select { min-height: 44px; border: 1px solid #475569; border-radius: .5rem; padding: .4rem .65rem; background: #1e293b; color: #e2e8f0; font-size: .85rem; }
.performance-page button:disabled { opacity: .4; }
.performance-page button[aria-pressed=true] { background: #064e3b; border-color: #34d399; color: #a7f3d0; }
.performance-page button:focus-visible, .performance-page select:focus-visible, .performance-page input:focus-visible { outline: 2px solid #34d399; outline-offset: 2px; }
.performance-chart-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.performance-periods { display: flex; gap: .3rem; flex-wrap: wrap; }
.performance-chart-filter { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .85rem; margin: .6rem 0; }
.performance-chart-filter select { max-width: 100%; min-width: 0; }
.performance-ug { display: grid; gap: .5rem; }
.performance-ug h2:not(:first-child) { margin-top: 1rem; }
.performance-table-scroll { overflow-x: auto; max-width: 100%; border: 1px solid #334155; border-radius: .6rem; }
.performance-table { border-collapse: collapse; width: 100%; font-size: .8rem; text-align: left; }
.performance-table th, .performance-table td { padding: .7rem .65rem; border-bottom: 1px solid #334155; white-space: nowrap; }
.performance-table th { color: #94a3b8; font-weight: 500; }
.performance-table td { color: #e2e8f0; }
.performance-table tr:last-child td { border-bottom: 0; }
.performance-page [role=alert] { color: #fca5a5; }
.performance-page [role=alert]:empty, .performance-scroll-note { display: none; }
@media (max-width: 640px) {
  .performance-scroll-note { display: block; }
  .performance-table td[data-mode]::after { content: attr(data-mode); display: block; color: #94a3b8; font-size: .75rem; text-transform: capitalize; margin-top: .2rem; }
}
.performance-method { border-top: 1px solid #334155; padding-top: .75rem; margin-top: .5rem; }
.performance-method summary { color: #94a3b8; cursor: pointer; font-size: .8rem; }
.performance-page [data-perf-overview] .flex.gap-4 { flex-wrap: wrap; }
/* Under Goals groups each entry and its hedge legs into one market position. */
.ug-page { padding: 1rem; display: grid; gap: 1rem; }
.ug-page > *, .ug-config-section { min-width: 0; }
.ug-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.ug-toolbar label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.ug-page a, .ug-expand { color: #6ee7b7; }
.ug-input { background: #334155; border: 1px solid #475569; border-radius: .5rem; padding: .55rem; color: #e2e8f0; width: 100%; min-width: 6rem; }
.ug-toolbar .ug-input { width: auto; }
.ug-toolbar [data-ug-competition], .ug-toolbar [data-ug-analysis-filter="competition"] { max-width: min(25rem, calc(100vw - 8rem)); }
.ug-toolbar [data-ug-analysis-view] { max-width: calc(100vw - 6rem); }
.ug-input:focus, .ug-button:focus-visible, .ug-expand:focus-visible { outline: 2px solid #34d399; outline-offset: 2px; }
.ug-button { border: 1px solid #475569; border-radius: .5rem; padding: .6rem .8rem; background: #334155; color: #e2e8f0; }
.ug-button:disabled { opacity: .4; cursor: not-allowed; }
.ug-save { background: #047857; }
.ug-config-section, .ug-summary { background: #1e293b; border: 1px solid #334155; border-radius: .75rem; padding: 1rem; }
.ug-config-section h3 { font-weight: 600; margin-bottom: .75rem; }
.ug-stage-preview { margin-top: 1.25rem; border-top: 1px solid #475569; padding-top: 1rem; }
.ug-stage-preview h4 { font-weight: 600; margin: 0 0 .5rem; }
.ug-preview-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin: .75rem 0; }
.ug-preview-controls [hidden] { display: none; }
.ug-preview-controls .ug-field { min-width: 0; align-content: start; }
.ug-stage-preview [data-ug-preview-results] { margin-top: .75rem; font-size: .85rem; }
.ug-preview-table { margin-top: .5rem; }
.ug-preview-table th, .ug-stage-table th { white-space: normal; }
.ug-preview-warning { color: #fcd34d; border-left: 2px solid #fbbf24; padding-left: .5rem; margin-top: .5rem; font-size: .8rem; }
.ug-stage-table [hidden] { display: none; }
.ug-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.ug-field { display: grid; gap: .35rem; font-size: .875rem; }
.ug-field small, .ug-note, .ug-detail p { color: #94a3b8; font-size: .8rem; line-height: 1.5; }
.ug-scroll { overflow-x: auto; max-width: 100%; }
.ug-table { width: 100%; border-collapse: collapse; font-size: .8rem; text-align: left; }
.ug-table th { color: #94a3b8; font-weight: 500; white-space: nowrap; }
.ug-table th, .ug-table td { padding: .75rem .6rem; border-bottom: 1px solid #334155; vertical-align: top; }
.ug-table td { min-width: 5rem; }
.ug-table td small { display: block; color: #94a3b8; margin-top: .3rem; }
.ug-table td:first-child { min-width: 14rem; }
.ug-expand { text-align: left; min-height: 2rem; }
.ug-market-description { display: flex; align-items: center; gap: .35rem; }
.ug-market-description .ug-expand { flex: 0 0 44px; text-align: center; }
.ug-market-link { min-width: 0; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: .2em; }
.ug-market-link:hover { color: #a7f3d0; }
.ug-market-link:focus-visible { outline: 2px solid #34d399; outline-offset: 2px; border-radius: 2px; }
.ug-detail { padding: .5rem; background: #0f172a; }
.ug-summaries { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.ug-analysis > h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
.ug-analysis > .ug-note { margin: .75rem 0; }
.ug-analysis-table th:first-child { min-width: 7rem; }
.ug-analysis-table tfoot { font-weight: 600; background: #1e293b; }
.ug-stage-mode { min-width: 0; margin-top: 1rem; border: 1px solid #475569; border-radius: .75rem; padding: 1rem; }
.ug-stage-mode h3, .ug-stage-settings h4 { font-weight: 600; }
.ug-stage-analysis-table th:first-child { min-width: 5rem; }
.ug-stage-analysis-table tfoot { font-weight: 600; background: #1e293b; }
.ug-stage-settings { margin-top: 1rem; }
.ug-stage-mode > .ug-note, .ug-stage-settings .ug-note { margin-top: .5rem; }
.ug-stage-settings ul { margin-top: .5rem; padding-left: 1.25rem; list-style: disc; font-size: .85rem; }
.ug-stage-settings li { margin-top: .35rem; }
.ug-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; width: 100%; font-size: .85rem; }
.ug-summary strong { text-transform: capitalize; }
.ug-period-group, .ug-market-group { min-width: 0; margin-top: 1rem; border: 1px solid #475569; border-radius: .75rem; overflow: hidden; }
.ug-group-summary { padding: .85rem; cursor: pointer; list-style: none; background: #1e293b; }
.ug-group-summary::-webkit-details-marker { display: none; }
.ug-group-summary:focus-visible { outline: 2px solid #34d399; outline-offset: -3px; }
.ug-group-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; overflow-wrap: anywhere; }
.ug-group-title { font-size: 1rem; font-weight: 600; color: #e2e8f0; }
.ug-group-title::before { content: '›'; display: inline-block; margin-right: .5rem; transition: transform .15s; }
details[open] > .ug-group-summary .ug-group-title::before { transform: rotate(90deg); }
.ug-group-heading p { margin: 0; }
.ug-group-summary .ug-summaries { margin: .65rem 0 0; gap: .5rem; }
.ug-group-summary .ug-summaries:empty { display: none; }
.ug-group-summary .ug-summary { padding: .55rem .65rem; gap: .45rem .85rem; border: 0; background: #0f172a; }
.ug-group-body { min-width: 0; padding: .5rem; border-top: 1px solid #334155; }
.ug-group-body > .ug-market-group:first-child { margin-top: 0; }
[data-ug-error] { color: #fca5a5; }
.ug-input, .ug-button, .ug-expand, .ug-toolbar label { min-height: 44px; }
.ug-mobile-note { display: none; }
@media (max-width: 640px) {
  .ug-mobile-note { display: block; margin-top: .75rem; }
  .ug-config-section .ug-table thead, .ug-position-table > thead { display: none; }
  .ug-config-section .ug-table, .ug-config-section .ug-table tbody,
  .ug-position-table, .ug-position-table > tbody { display: block; }
  .ug-config-section .ug-table tr, .ug-position-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ug-config-section .ug-table tr { border-bottom: 1px solid #475569; padding: .5rem 0; margin-bottom: .5rem; }
  .ug-config-section .ug-table td, .ug-position-row > td { display: block; min-width: 0; border: 0; padding: .5rem; }
  .ug-config-section .ug-table td[data-label]::before, .ug-position-row > td[data-label]::before {
    content: attr(data-label); display: block; color: #94a3b8; font-size: .75rem; line-height: 1.4; margin-bottom: .4rem;
  }
  .ug-config-section [data-ug-rule] > td:first-child { grid-column: 1 / -1; }
  .ug-config-section .ug-table td:last-child { align-self: end; }
  .ug-config-section [data-ug-stage] > td:last-child,
  .ug-config-section [data-ug-stage] > td[data-ug-retention-field] { grid-column: 1 / -1; }
  .ug-config-section .ug-preview-table td:first-child,
  .ug-config-section .ug-preview-table td:nth-child(2),
  .ug-config-section .ug-preview-table td:nth-child(5),
  .ug-config-section .ug-preview-table td:last-child { grid-column: 1 / -1; }
  .ug-config-section [data-ug-stage] > td[data-label]::before { min-height: 2.1em; }
  .ug-config-section .ug-input { min-width: 0; }
  .ug-position-table > tbody { border: 1px solid #334155; border-radius: .75rem; background: #1e293b; margin: .75rem 0; overflow: hidden; }
  .ug-position-row > td:first-child, .ug-position-row > td:nth-child(6), .ug-position-row > td:last-child { grid-column: 1 / -1; }
  .ug-position-row > td { padding: .6rem .75rem; }
  .ug-position-row > td:first-child { border-bottom: 1px solid #334155; }
  .ug-position-detail:not([hidden]), .ug-position-detail > td { display: block; min-width: 0; }
  .ug-position-detail > td { padding: .25rem; }
  .ug-detail { min-width: 0; }
}


/* Shared enabled switch for strategy settings and configuration pages. */
.strategy-enabled { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; color: #cbd5e1; }
.strategy-enabled input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.strategy-switch { position: relative; display: inline-block; flex-shrink: 0; width: 2.75rem; height: 1.5rem; background: #475569; border-radius: 9999px; transition: background .15s; }
.strategy-switch::after { content: ''; position: absolute; top: .125rem; left: .125rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: white; box-shadow: 0 1px 2px #0003; transition: transform .15s; }
.strategy-enabled input:checked + .strategy-switch { background: #10b981; }
.strategy-enabled input:checked + .strategy-switch::after { transform: translateX(1.25rem); }
.strategy-enabled input:focus-visible + .strategy-switch { outline: 2px solid #6ee7b7; outline-offset: 3px; }
.strategy-enabled input:disabled + .strategy-switch { opacity: .5; cursor: wait; }