/* Visa data: aligned filters, a separate comparison selection, and a grouped result. */
.vi { box-sizing: border-box; max-width: 1180px; margin: auto; padding: 30px 32px 64px; color: #173761; font-family: var(--mj-font-sans, sans-serif); }
.vi-crumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; line-height: 1.6; color: #5d6b80; margin-bottom: 28px; }
.vi-crumb a { color: inherit; }
.vi-heading h1 { font: 650 clamp(30px, 3.2vw, 40px)/1.3 var(--mj-font-sans, sans-serif); letter-spacing: -.025em; margin: 0 0 12px; color: #082d66; }
.vi-heading p { font-size: 17px; color: #4b5563; line-height: 1.8; max-width: 760px; margin: 0; }
.vi-tabs { display: flex; border-bottom: 1px solid #dce3ed; margin-top: 26px; gap: 30px; overflow-x: auto; scrollbar-width: thin; }
.vi-tabs button { appearance: none; flex: 0 0 auto; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 14px 0; color: #4b5563; font: 500 16px/1.5 var(--mj-font-sans, sans-serif); white-space: nowrap; cursor: pointer; }
.vi-tabs small { font-size: 16px; margin-left: 8px; font-weight: 400; }
.vi-tabs button[aria-pressed=true] { color: #0a306c; border-bottom-color: #0a306c; font-weight: 650; }
.vi-workspace { margin-top: 26px; background: #fff; }
.vi form { padding: 0; min-width: 0; }
.vi h2 { font: 600 17px/1.6 var(--mj-font-sans, sans-serif); margin: 0 0 16px; }
.vi-filter-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 16px; }
.vi-filter-heading h2 { margin: 0; }
.vi-filter-heading p { margin: 0; font-size: 16px; line-height: 1.7; color: #4b5563; }
.vi-fields { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.45fr) 124px 104px; gap: 18px 16px; align-items: end; }
.vi-fields .vi-field { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #4b5563; font-size: 16px; line-height: 1.6; }
.vi-field--dimension { grid-column: 1 / -1; }
.vi select { box-sizing: border-box; border: 1px solid #cfd8e6; min-width: 0; width: 100%; border-radius: 6px; height: 46px; padding: 0 30px 0 10px; background-color: #fff; color: #243b5d; font: 400 16px/1.5 var(--mj-font-sans, sans-serif); }
.vi select:disabled { background: #f4f6f9; color: #3d506c; opacity: 1; -webkit-text-fill-color: #3d506c; }
.vi-fixed-value { box-sizing: border-box; display: flex; align-items: center; min-height: 46px; padding: 8px 10px; border: 1px solid #e1e6ee; border-radius: 6px; background: #f7f9fc; color: #3d506c; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.vi-report-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; }
.vi-coverage, .vi-dimension-summary { margin: 0; color: #4b5563; font-size: 16px; line-height: 1.8; }
.vi-filter-note { margin: 12px 0 0; max-width: 780px; font-size: 16px; color: #4b5563; line-height: 1.8; }
.vi-retry { justify-self: start; border: 1px solid #b9c9dd; border-radius: 6px; background: #fff; color: #0b326e; padding: 9px 20px; min-height: 44px; font: 600 16px/1.5 var(--mj-font-sans, sans-serif); cursor: pointer; }
.vi-retry:hover { background: #eaf0f8; }
.vi-result { box-sizing: border-box; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 28px; padding: 24px; margin-top: 24px; border: 1px solid #dce4ef; border-left: 3px solid #173c73; border-radius: 6px; background: #f5f7fa; }
.vi-result p { grid-column: 1; font-size: 16px; line-height: 1.8; color: #4b5563; margin: 0 0 8px; }
.vi-result h2 { grid-column: 1; margin: 0 0 8px; font-size: 21px; line-height: 1.7; color: #193964; overflow-wrap: anywhere; }
.vi-result[data-state=loading] { min-height: 100px; display: block; }
.vi-result[data-state=loading] h2 { font-size: 18px; }
.vi-result[data-state=error] { display: block; }
.vi-number { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 42px; line-height: 1.2; font-weight: 650; letter-spacing: -.025em; margin: 0; color: #082f6c; font-variant-numeric: tabular-nums; }
.vi-number-label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 400; letter-spacing: 0; color: #4b5563; }
.vi-number small { font-size: 16px; font-weight: 400; margin-left: 8px; letter-spacing: 0; color: #4b5563; }
.vi-result dl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 16px; line-height: 1.7; padding: 12px 0 0; margin: 4px 0; }
.vi-result dl div { display: flex; gap: 12px; min-width: 0; }
.vi-result dt { color: #4b5563; flex-shrink: 0; }
.vi-result dd { margin: 0; overflow-wrap: anywhere; }
.vi-source { grid-column: 1 / -1; justify-self: start; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; color: #2b5382; margin-top: 12px; }
.vi-notes { margin-top: 24px; border-top: 1px solid #e2e7ef; padding-top: 18px; color: #4b5563; }
.vi-notes summary { font-size: 16px; line-height: 1.7; font-weight: 500; color: #40516a; cursor: pointer; }
.vi-notes p, .vi-notes li { font-size: 17px; line-height: 1.85; color: #4b5563; }
.vi-notes p { margin: 14px 0; }
.vi-notes ul { padding-left: 18px; margin: 0; max-width: 960px; }
.vi-notes li { margin: 6px 0; }
/* Single lookups and comparisons share the same report filters. */
.vi-view-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; max-width: 760px; padding: 4px; margin: 22px 0; border: 1px solid #dce3ed; border-radius: 8px; background: #f3f5f8; }
.vi-view-modes button { appearance: none; min-width: 0; min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #4b5563; font: 500 16px/1.5 var(--mj-font-sans, sans-serif); text-align: center; white-space: normal; cursor: pointer; }
.vi-view-modes button:hover { background: #e8edf4; color: #173761; }
.vi-view-modes button[aria-pressed=true] { border-color: #ccd7e5; background: #fff; color: #0a306c; font-weight: 650; }
.vi-view-modes button, .vi-view-modes button:hover, .vi-chip, .vi-chip:hover { text-decoration: none; }
.vi-fields .vi-field--dimension { order: 0; }
.vi-fields .vi-field--country { order: 1; }
.vi-fields .vi-field--class { order: 2; }
.vi-fields .vi-field--year { order: 3; }
.vi-fields .vi-field--month { order: 4; }
.vi-fields[data-view=single] .vi-field--compare,
.vi-fields[data-view=countries] .vi-field--country,
.vi-fields[data-view=classes] .vi-field--class { display: none; }
.vi-fields[data-view=countries] .vi-field--compare { order: 1; }
.vi-fields[data-view=classes] .vi-field--compare { order: 2; }

/* Searchable multi-select: selected items remain visible outside the popover. */
.vi-picker { position: relative; min-width: 0; }
.vi-picker > summary { height: 46px; white-space: nowrap; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 46px; padding: 10px 14px; border: 1px solid #cfd8e6; border-radius: 6px; background: #fff; color: #243b5d; font-size: 16px; line-height: 1.5; list-style: none; overflow-wrap: anywhere; cursor: pointer; }
.vi-picker > summary > span { overflow: hidden; text-overflow: ellipsis; }
.vi-picker > summary::-webkit-details-marker { display: none; }
.vi-picker > summary::marker { content: ''; }
.vi-picker > summary::after { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border: solid #596b82; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin: -4px 2px 0 0; }
.vi-picker[open] > summary { border-color: #416d9e; }
.vi-picker[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.vi-picker-panel { width: max(100%, 360px); max-width: calc(100vw - 64px); box-sizing: border-box; position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; min-width: 0; padding: 12px; border: 1px solid #cbd6e5; border-radius: 7px; background: #fff; box-shadow: 0 8px 24px rgba(22, 46, 78, .12); }
.vi-picker .vi-picker-search { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 44px; margin: 0 0 8px; padding: 9px 12px; border: 1px solid #cfd8e6; border-radius: 5px; background: #fff; color: #243b5d; font: 400 16px/1.5 var(--mj-font-sans, sans-serif); }
.vi-picker-search::placeholder { color: #596575; opacity: 1; }
.vi-picker-options { max-height: min(320px, 45vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.vi-picker-option { box-sizing: border-box; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; min-height: 44px; padding: 10px 8px; border-radius: 4px; color: #32445e; font-size: 16px; line-height: 1.5; cursor: pointer; }
.vi-picker-option:hover, .vi-picker-option:focus-within { background: #edf2f8; }
.vi-picker-option:has(input:checked) { background: #eaf0f7; color: #173c73; }
.vi-picker-option input[type=checkbox] { box-sizing: border-box; width: 18px; height: 18px; min-width: 18px; min-height: 0; margin: 3px 0 0; padding: 0; accent-color: #214b80; cursor: pointer; }
.vi-picker-option span { min-width: 0; overflow-wrap: anywhere; }
.vi-selection-tray { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; }
.vi-selection-tray .vi-selection-count { flex: 0 0 auto; font-size: 16px; }
.vi-selected-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.vi-selected-chips:empty { display: none; }
.vi-chip { box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 5px 10px; border: 1px solid #d0dce9; border-radius: 5px; background: #f0f4f9; color: #24476f; font: 400 16px/1.5 var(--mj-font-sans, sans-serif); text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.vi-chip:hover { border-color: #8ea8c8; background: #e6edf6; }
.vi-chip span { min-width: 0; overflow-wrap: anywhere; }
.vi-series-dot { display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--vi-series-color, #3468c0); }
.vi-selection-count { margin: 0; color: #4b5563; font-size: 15px; line-height: 1.7; }

/* Each bar and its value share one row and one common scale. */
.vi-result[data-state=comparison] { --vi-label-width: 280px; display: block; background: #fff; border: 1px solid #dce4ef; border-radius: 8px; padding: 28px; }
.vi-chart-header { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #e7ecf2; }
.vi-chart-header h2 { margin-bottom: 8px; }
.vi-chart-header p { margin: 0; }
.vi-result .vi-chart-unit { margin-bottom: 20px; font-size: 15px; color: #566477; }
.vi-chart-list { display: grid; gap: 22px; padding: 0; margin: 0; list-style: none; }
.vi-chart-row { display: grid; grid-template-columns: var(--vi-label-width) minmax(0, 1fr) 88px; grid-template-areas: 'label track value'; align-items: center; gap: 16px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.vi-chart-label { grid-area: label; display: flex; align-items: baseline; gap: 10px; min-width: 0; color: #243b5d; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.vi-chart-label .vi-series-dot { align-self: flex-start; margin-top: 8px; }
.vi-chart-value { grid-area: value; color: #173761; font-size: 21px; line-height: 1.6; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.vi-chart-track { box-sizing: border-box; grid-area: track; display: flex; align-items: center; min-width: 0; height: 48px; border-right: 1px solid #e7edf4; background: repeating-linear-gradient(to right, #e7edf4 0 1px, transparent 1px var(--vi-grid-step)); }
.vi-chart-bar { display: block; max-width: 100%; height: 26px; border-radius: 0 4px 4px 0; background: var(--vi-series-color, #3468c0); }
.vi-chart-row--missing .vi-chart-track { background: transparent; }
.vi-chart-row--missing .vi-chart-bar { display: none; }
.vi-chart-row--missing .vi-chart-value { color: #596575; font-size: 16px; font-weight: 400; }
.vi-chart-axis { position: relative; height: 32px; margin: 12px 104px 0 calc(var(--vi-label-width) + 16px); border-top: 1px solid #cfd8e6; color: #596575; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.vi-chart-axis span { position: absolute; top: 8px; transform: translateX(-50%); }
.vi-chart-axis span:first-child { transform: none; }
.vi-chart-axis span:last-child { transform: translateX(-100%); }
.vi-result .vi-chart-caption { margin: 20px 0 0; color: #4b5563; font-size: 16px; line-height: 1.8; }
.vi-result[data-state=comparison] .vi-source { display: inline-block; }
.vi :is(button, select, input, a, summary):focus-visible { outline: 2px solid #386dba; outline-offset: 3px; }
.vi [hidden] { display: none !important; }
@media (max-width: 1000px) {
  .vi-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 900px) {
  .vi-result[data-state=comparison] { --vi-label-width: 210px; }
}
@media (max-width: 600px) {
  .vi { padding: 24px 20px 44px; }
  .vi-crumb { margin-bottom: 24px; }
  .vi-tabs { gap: 24px; margin-top: 22px; }
  .vi-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vi-field--country, .vi-field--class, .vi-field--compare { grid-column: 1 / -1; }
  .vi-report-meta { gap: 4px; flex-direction: column; }
  .vi-filter-heading { display: block; }
  .vi-filter-heading p { margin-top: 4px; }
  .vi-result { display: block; padding: 20px 18px; }
  .vi-result h2 { font-size: 19px; }
  .vi-number { font-size: 38px; margin: 16px 0; }
  .vi-result dl { gap: 8px; flex-direction: column; }
  .vi-source { display: inline-block; }
  .vi-view-modes { margin: 18px 0; gap: 2px; }
  .vi-view-modes button { padding: 9px 6px; }
  .vi-picker-panel { width: 100%; max-width: 100%; padding: 8px; }
  .vi-picker-options { max-height: min(280px, 40vh); }
  .vi-chart-header { margin-bottom: 20px; }
  .vi-result[data-state=comparison] { padding: 20px 18px; }
  .vi-chart-list { gap: 22px; }
  .vi-chart-row { grid-template-columns: minmax(0, 1fr) 88px; grid-template-areas: 'label label' 'track value'; gap: 8px 12px; }
  .vi-chart-track { height: 34px; }
  .vi-chart-bar { height: 22px; }
  .vi-chart-value { font-size: 19px; }
  .vi-chart-axis { margin-left: 0; margin-right: 100px; }
  .vi-chart-axis span:not(:first-child):not(:last-child) { display: none; }
}


.vi-fields .vi-field--start { order: 3; }
.vi-fields .vi-field--end { order: 4; }
.vi-fields[data-view=time] { grid-template-columns: minmax(200px,1fr) minmax(250px,1.4fr) 160px 160px; }
.vi-result[data-state=time] { display: block; background: #fff; border: 1px solid #dce4ef; border-radius: 8px; padding: 28px; }
.vi-time-scroll { overflow-x: auto; }
.vi-time-chart { display: block; width: 100%; min-width: 600px; height: auto; }
.vi-time-chart text { font: 16px var(--mj-font-sans,sans-serif); fill: #4b5563; }
.vi-time-grid { stroke: #e1e7ef; stroke-width: 1; }
.vi-time-line { fill: none; stroke: #3468c0; stroke-width: 3; stroke-linejoin: round; }
.vi-time-point { fill: #fff; stroke: #3468c0; stroke-width: 2.5; cursor: pointer; }
.vi-time-point:hover,.vi-time-point:focus { fill: #3468c0; stroke-width: 4; outline: none; }
.vi-time-readout { min-height: 29px; font-variant-numeric: tabular-nums; }
.vi-time-details { margin-top: 20px; }
.vi-time-details summary { cursor: pointer; font-size: 16px; color: #24476f; }
.vi-time-table-wrap { overflow-x: auto; margin-top: 12px; }
.vi-time-details table { width: 100%; border-collapse: collapse; font-size: 16px; }
.vi-time-details th,.vi-time-details td { padding: 12px 14px; border-bottom: 1px solid #e1e7ef; text-align: left; color: #243b5d; }
.vi-time-details thead th { background: #f3f6fa; font-weight: 600; }
.vi-time-details td:nth-child(2) { font-variant-numeric: tabular-nums; }
@media (max-width:1000px) { .vi-fields[data-view=time] { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .vi-fields[data-view=time] { grid-template-columns: minmax(0,1fr); } .vi-view-modes { grid-template-columns: repeat(2,minmax(0,1fr)); } .vi-result[data-state=time] { padding: 20px 18px; } }

/* One comparison builder: a common period, and explicit country/class pairs. */
.vi-view-modes { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 400px; }
.vi-fields[data-view=compare] { grid-template-columns: 200px 200px; justify-content: start; }
.vi-series-editor { margin-top: 24px; }
.vi-series-heading { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; }
.vi-series-heading h2,.vi-series-heading p { margin: 0; }
.vi-series-heading p,.vi-series-editor label { font-size: 16px; color: #4b5563; line-height: 1.6; }
.vi-series-row { display: grid; grid-template-columns: 46px minmax(180px,1fr) minmax(260px,1.7fr) 68px; gap: 14px; align-items: end; padding: 12px 0; border-bottom: 1px solid #e5eaf0; }
.vi-series-row label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vi-series-index { display: flex; align-items: center; gap: 8px; height: 46px; color: #526278; font-size: 16px; }
.vi-series-row button,.vi-add-series { min-height: 44px; padding: 8px 12px; font: 500 16px/1.5 var(--mj-font-sans,sans-serif); color: #214b80; background: #fff; border: 1px solid #cedaea; border-radius: 6px; cursor: pointer; }
.vi-series-row button { border-color: transparent; }
.vi-series-row button:hover,.vi-add-series:hover { background: #edf3fa; }
.vi-series-row button:disabled,.vi-add-series:disabled { opacity: .5; cursor: default; }
.vi-add-series { margin-top: 16px; }
#vi-series-message { color: #934514; font-size: 16px; }
#vi-series-message:empty { display: none; }
.vi-chart-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; }
.vi-chart-legend>span { display: flex; align-items: baseline; gap: 8px; font-size: 16px; line-height: 1.6; }
.vi-time-line,.vi-time-point { stroke: var(--vi-series-color,#3468c0); }
.vi-time-point:hover,.vi-time-point:focus { fill: var(--vi-series-color,#3468c0); }
.vi-snapshot-bars { display: grid; gap: 24px; margin: 24px 0; }
.vi-snapshot-bars>div { display: grid; grid-template-columns: minmax(160px,1fr) minmax(120px,2fr) 90px; align-items: center; gap: 16px; font-size: 16px; }
.vi-snapshot-track { border-bottom: 1px solid #dce3ed; }
.vi-snapshot-track i { display: block; height: 24px; border-radius: 0 3px 3px 0; }
.vi-snapshot-bars strong { text-align: right; font-variant-numeric: tabular-nums; }
@media(max-width:700px){.vi-fields[data-view=compare]{grid-template-columns:repeat(2,minmax(0,1fr));}.vi-series-row{grid-template-columns:32px minmax(0,1fr) 58px;gap:8px;}.vi-series-row label{grid-column:2;}.vi-series-index{grid-column:1;grid-row:1;align-self:end;}.vi-series-row button{grid-column:3;grid-row:1 / span 2;}.vi-snapshot-bars>div{grid-template-columns:minmax(0,1fr) 75px;}.vi-snapshot-bars>div>span{grid-column:1 / -1;}}

@media(min-width:701px){.vi-series-row:not(:first-child) label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}}

/* Annual monthly breakdown spans the entire result card. */
.vi-result > .vi-time-details { grid-column: 1 / -1; min-width: 0; }

/* A compact time grouping control, secondary to the query/comparison tabs. */
.vi-fields[data-view=compare] { grid-template-columns: 180px 200px 200px; gap: 18px 20px; }
.vi-period-control { display: flex; flex-direction: column; gap: 8px; color: #4b5563; font-size: 16px; line-height: 1.6; }
.vi-period-switch { display: flex; padding: 3px; height: 46px; box-sizing: border-box; background: #f1f4f8; border: 1px solid #dce3ed; border-radius: 7px; }
.vi-period-switch button { flex: 1; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: #526278; font: 500 16px/1.4 var(--mj-font-sans,sans-serif); cursor: pointer; white-space: nowrap; }
.vi-period-switch button[aria-pressed=true] { background: #173c73; color: #fff; }
.vi-period-switch button:focus-visible { outline: 2px solid #3468c0; outline-offset: 3px; }
.vi-time-point--partial { stroke-dasharray: 2 2; stroke-width: 2px; r: 6px; }
.vi-year-detail small { display: block; font-size: 13px; font-weight: 400; color: #526278; white-space: nowrap; }
.vi-year-detail div { font-size: 14px; padding-top: 6px; }
@media(max-width:700px){.vi-fields[data-view=compare]{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}.vi-period-control{grid-column:1 / -1;flex-direction:row;align-items:center;gap:16px;}.vi-period-switch{width:176px;}.vi-year-detail small{white-space:normal;}}