/* Move forecast page: the section's shared rules (volatility.css) on the site's own Metronic tokens (--tw-*),
   so the page follows pogosov.com in both themes: white cards on the light page, coal cards on the dark one. */
body > .flex.grow, body > .flex.grow > .wrapper { min-width: 0; }

.vol-page.vol-forecast {
  --vol-ink: var(--tw-gray-900); --vol-muted: var(--tw-gray-600); --vol-line: var(--tw-gray-200);
  --vol-bg: var(--tw-card-background-color); --vol-soft: var(--tw-gray-100); --vol-blue: var(--tw-primary-active);
  --vf-ink-2: var(--tw-gray-700);
}

/* Heading and tabs, as on the daily-change tab: every tab on a wide screen, a sideways row on a phone. */
.vol-forecast .vol-heading { margin-bottom: 14px; }
.vol-forecast .vol-heading h1 { margin-bottom: 6px; }
.vol-forecast .vol-heading .vol-muted { max-width: 860px; }
.vol-forecast .vol-tabs { gap: 2px; margin-top: 18px; }
.vol-forecast .vol-tabs a { white-space: nowrap; padding: 10px 13px; font-size: 13px; font-weight: 500; min-height: 40px; color: var(--vf-ink-2); }
.vol-forecast .vol-tabs a:hover { color: var(--vol-ink); }
.vol-forecast .vol-tabs a.is-active { color: var(--tw-primary); border-color: var(--tw-primary); }
.vol-forecast section, .vol-forecast details { scroll-margin-top: 85px; }

/* Every block is a site card; the short answer stands out in the primary tint. */
.vol-forecast .vol-panel, .vol-forecast .vol-method {
  background: var(--tw-card-background-color); border: var(--tw-card-border); border-radius: .75rem; box-shadow: var(--tw-card-box-shadow);
}
.vf-key { margin: 16px 0 18px; padding: 16px 20px; border: 1px solid var(--tw-primary-clarity); border-radius: .75rem; background: var(--tw-primary-light); }
.vf-key h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--vol-ink); }
.vf-list { margin: 0; padding-left: 18px; list-style: disc; font-size: 13px; line-height: 1.65; color: var(--tw-gray-800); }
.vf-list li + li { margin-top: 6px; }
.vf-list strong, .vf-text strong { color: var(--vol-ink); font-weight: 600; }
.vf-key .vf-list { max-width: 1040px; }

.vol-forecast .vol-panel-title { padding: 16px 20px; }
.vol-forecast .vol-panel-title h2 { font-size: 15px; font-weight: 600; color: var(--vol-ink); }
.vol-forecast .vol-panel-title > span { font-size: 12px; color: var(--vol-muted); }
.vol-forecast .vol-panel-note { padding: 0 20px 14px; font-size: 12px; line-height: 1.6; max-width: 1040px; }
.vf-text { max-width: 1040px; padding: 0 20px 16px; font-size: 13px; line-height: 1.7; color: var(--vf-ink-2); }
.vf-text p { margin: 0 0 10px; }
.vf-text p:last-child { margin-bottom: 0; }

/* Period and measure: the site's own selects. */
.vf-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 0 20px 14px; }
.vf-controls label { display: flex; flex-direction: column; gap: 6px; flex: 0 1 280px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--vf-ink-2); }
.vf-controls .select { width: 100%; }

/* Forecast against the actual: a bar per group on a shared scale. */
.vf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 0 20px 12px; margin: 0; font-size: 12px; color: var(--vol-muted); }
.vf-legend span { display: inline-flex; align-items: center; gap: 7px; }
.vf-legend i { position: relative; display: inline-block; }
.vf-legend .vf-l-band { width: 22px; height: 10px; border-radius: 4px; background: var(--tw-primary-clarity); box-shadow: inset 0 0 0 1px var(--tw-primary); }
.vf-legend .vf-l-forecast { width: 2px; height: 14px; border-radius: 1px; background: var(--vol-ink); }
.vf-legend .vf-l-actual { width: 10px; height: 10px; border-radius: 50%; background: var(--tw-primary); }
.vf-track { position: relative; height: 18px; min-width: 120px; border-radius: 9px; background: var(--tw-gray-100); }
.vf-band { position: absolute; top: 4px; bottom: 4px; border-radius: 5px; background: var(--tw-primary-clarity); box-shadow: inset 0 0 0 1px var(--tw-primary); }
.vf-forecast { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--vol-ink); }
.vf-actual { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--tw-primary); box-shadow: 0 0 0 2px var(--tw-card-background-color); }
.vf-scale { display: block; font-size: 10.5px; white-space: nowrap; }
.vol-forecast .vf-quintiles thead th.vf-chart { text-align: left; }
.vf-summary { padding: 14px 20px 16px; border-top: 1px solid var(--vol-line); font-size: 13px; line-height: 1.65; color: var(--vf-ink-2); }
.vf-summary p { margin: 0; max-width: 1040px; }
.vf-summary p + p { margin-top: 6px; }
.vf-summary strong { color: var(--vol-ink); font-weight: 600; }

.vol-forecast .vol-table th a { color: var(--vol-blue); }
.vol-forecast .vol-table tr.is-selected > * { background: var(--tw-primary-light); }
.vol-forecast .vol-table tr.is-selected > th:first-child { box-shadow: inset 3px 0 0 var(--tw-primary); }

/* Short tables (years) stay tables on a phone. */
.vf-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.vf-table th, .vf-table td { padding: 9px 12px; border-top: 1px solid var(--vol-line); text-align: right; line-height: 1.35; }
.vf-table th:first-child { text-align: left; padding-left: 20px; }
.vf-table th:last-child, .vf-table td:last-child { padding-right: 20px; }
.vf-table thead th { background: var(--tw-gray-100); color: var(--vol-muted); font-size: 11.5px; font-weight: 500; vertical-align: bottom; }
.vf-table tbody th { font-weight: 600; color: var(--vol-ink); }
.vf-table td { color: var(--vf-ink-2); }
.vf-table tbody tr:hover > * { background: var(--tw-gray-100); }

@media (min-width: 901px) {
  .vol-forecast .vol-table { table-layout: auto; font-size: 13px; }
  .vol-forecast .vol-table th, .vol-forecast .vol-table td { overflow-wrap: normal; padding: 10px 12px; line-height: 1.35; }
  .vol-forecast .vol-table th:first-child { width: auto; padding-left: 20px; }
  .vol-forecast .vol-table th:last-child, .vol-forecast .vol-table td:last-child { padding-right: 20px; }
  .vol-forecast .vol-table thead th { padding-top: 9px; padding-bottom: 9px; background: var(--tw-gray-100); color: var(--vol-muted); font-size: 11.5px; font-weight: 500; vertical-align: bottom; }
  .vol-forecast .vol-table tbody th { font-weight: 600; color: var(--vol-ink); }
  .vol-forecast .vol-table td { color: var(--vf-ink-2); }
  .vol-forecast .vol-table tbody tr:hover > * { background: var(--tw-gray-100); }
  .vol-forecast .vol-table tbody tr.is-selected:hover > * { background: var(--tw-primary-light); }
  .vol-forecast .vol-table td small { font-size: 11.5px; }
  .vf-quintiles td { white-space: nowrap; }
  .vf-quintiles .vf-chart { width: 44%; }
}

.vol-forecast .vol-method { margin-top: 18px; }
.vol-forecast .vol-method summary { display: flex; align-items: center; gap: 10px; padding: 15px 20px; font-size: 13px; font-weight: 600; color: var(--vol-ink); list-style: none; }
.vol-forecast .vol-method summary::-webkit-details-marker { display: none; }
.vol-forecast .vol-method summary::before { content: ""; width: 6px; height: 6px; margin: 0 2px; border-right: 1.5px solid var(--vol-muted); border-bottom: 1.5px solid var(--vol-muted);
                                            transform: rotate(-45deg); transition: transform .15s; }
.vol-forecast .vol-method[open] summary::before { transform: rotate(45deg); }
.vol-forecast .vol-method > div { max-width: 1040px; padding: 0 20px 18px; font-size: 12.5px; line-height: 1.7; color: var(--vf-ink-2); }
.vol-forecast .vol-method > div p { margin: 9px 0; }
.vol-forecast .vol-method strong { color: var(--vol-ink); font-weight: 600; }
.vol-forecast code { overflow-wrap: anywhere; font-size: 12px; }

@media (max-width: 900px) {
  .vol-forecast .vol-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vol-forecast .vol-tabs::-webkit-scrollbar { display: none; }
  .vf-quintiles tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vf-quintiles td.vf-chart { grid-column: 1 / -1; padding: 6px 0 0; background: none; }
  .vf-quintiles td.vf-chart::before { display: none; }
  .vf-track { min-width: 0; }
}
@media (max-width: 600px) {
  .vf-key { padding: 14px 12px; }
  .vf-list { font-size: 12.5px; }
  .vol-forecast .vol-panel-title { padding: 14px 12px; }
  .vol-forecast .vol-panel-note, .vf-legend, .vf-controls { padding-left: 12px; padding-right: 12px; }
  .vf-text { padding: 0 12px 14px; font-size: 12.5px; }
  .vf-summary { padding: 12px; font-size: 12.5px; }
  .vf-controls label { flex: 1 1 100%; }
  .vf-table { font-size: 12px; }
  .vf-table th, .vf-table td { padding: 8px 6px; }
  .vf-table th:first-child { padding-left: 12px; }
  .vf-table th:last-child, .vf-table td:last-child { padding-right: 12px; }
  .vol-forecast .vol-method summary { padding: 14px 12px; }
  .vol-forecast .vol-method > div { padding: 0 12px 14px; }
}