#meteograma-quality-view .meteograma-family-context {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin: .65rem 0 .8rem;
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

#meteograma-quality-view .meteograma-family-context strong {
  color: var(--navy);
  white-space: nowrap;
}

#meteograma-quality-view .meteograma-family-context span {
  color: var(--muted);
  font-size: .82rem;
}

/* Physical exploration is a native Meteograma workspace.  The prototype is a
   visual contract only; all selectors remain namespaced to the Meteograma root. */
#meteograma-quality-view .meteograma-physical-workspace {
  --mq-bg: #f2f6fa;
  --mq-panel: #ffffff;
  --mq-navy: #0b325c;
  --mq-ink: #173e64;
  --mq-muted: #5d7189;
  --mq-line: #d5e1ec;
  --mq-blue: #2586cf;
  --mq-blue-soft: #eaf3fb;
  --mq-cyan: #27afd0;
  --mq-green: #22ae71;
  --mq-orange: #f29a32;
  --mq-red: #e05259;
  --mq-gray: #8a99aa;
  --mq-purple: #7155c8;
  --mq-shadow: 0 6px 20px rgba(24,55,85,.07);
  padding: 14px;
  border: 1px solid var(--mq-line);
  border-radius: 13px;
  background: var(--mq-bg);
  color: #17324e;
}

#meteograma-quality-view .meteograma-physical-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 13px;
}

#meteograma-quality-view .meteograma-physical-head h2 {
  margin: 1px 0 0;
  color: var(--mq-ink);
  font-size: 1.12rem;
  line-height: 1.2;
}

#meteograma-quality-view .meteograma-physical-head p {
  margin: 3px 0 0;
  color: var(--mq-muted);
  font-size: .78rem;
}

#meteograma-quality-view .meteograma-physical-eyebrow {
  display: block;
  color: #075f9a;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#meteograma-quality-view .meteograma-physical-head-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

#meteograma-quality-view .meteograma-prototype-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef3f7;
  color: #536a7e;
  font-size: .63rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

#meteograma-quality-view .meteograma-prototype-badge.good {
  background: #e9f8f1;
  color: #097447;
}

#meteograma-quality-view .meteograma-prototype-badge.warn {
  background: #fff3dc;
  color: #936000;
}

#meteograma-quality-view .meteograma-prototype-badge.fail {
  background: #fbeaec;
  color: #a33c46;
}

#meteograma-quality-view .meteograma-prototype-filter-panel {
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid var(--mq-line);
  border-radius: 13px;
  background: var(--mq-panel);
  box-shadow: var(--mq-shadow);
}

#meteograma-quality-view .meteograma-prototype-toolbar {
  display: grid;
  grid-template-columns: minmax(205px,1.25fr) minmax(125px,.8fr) minmax(125px,.8fr) minmax(125px,.75fr) auto;
  gap: 9px;
  align-items: end;
  padding: 12px;
}

#meteograma-quality-view .meteograma-prototype-field {
  display: block;
  min-width: 0;
}

#meteograma-quality-view .meteograma-prototype-field > span {
  display: block;
  margin: 0 0 4px;
  color: #536d85;
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#meteograma-quality-view .meteograma-prototype-field select,
#meteograma-quality-view .meteograma-prototype-field input {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid #cad9e6;
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: #173b60;
  font: inherit;
  font-size: .78rem;
}

#meteograma-quality-view .meteograma-prototype-field select:focus,
#meteograma-quality-view .meteograma-prototype-field input:focus {
  border-color: #72b0dc;
  box-shadow: 0 0 0 2px rgba(37,134,207,.11);
}

#meteograma-quality-view .meteograma-prototype-navbuttons {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  align-items: center;
}

#meteograma-quality-view .meteograma-prototype-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #c7d7e5;
  border-radius: 8px;
  background: #fff;
  color: #173e64;
  font: inherit;
  font-size: .75rem;
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

#meteograma-quality-view .meteograma-prototype-btn:hover {
  background: #f1f6fa;
}

#meteograma-quality-view .meteograma-prototype-btn.primary {
  border-color: var(--mq-navy);
  background: var(--mq-navy);
  color: #fff;
}

#meteograma-quality-view .meteograma-prototype-btn.icon {
  width: 37px;
  padding-left: 0;
  padding-right: 0;
}

#meteograma-quality-view .meteograma-prototype-btn:disabled,
#meteograma-quality-view .meteograma-prototype-btn[aria-disabled="true"] {
  opacity: .48;
  pointer-events: none;
}

#meteograma-quality-view .meteograma-prototype-presets {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-top: 1px solid #edf2f6;
}

#meteograma-quality-view .meteograma-prototype-presets-label {
  margin-right: 2px;
  color: #60758a;
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#meteograma-quality-view .meteograma-prototype-chip {
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid #cbd9e5;
  border-radius: 999px;
  background: #fff;
  color: #456079;
  font: inherit;
  font-size: .69rem;
  font-weight: 760;
  cursor: pointer;
}

#meteograma-quality-view .meteograma-prototype-chip:hover {
  background: #f2f7fa;
}

#meteograma-quality-view .meteograma-prototype-chip.active {
  border-color: #72b0dc;
  background: #e6f2fb;
  color: #05649b;
  font-weight: 850;
}

#meteograma-quality-view .meteograma-prototype-meta {
  margin-left: auto;
}

#meteograma-quality-view .meteograma-prototype-range {
  display: block;
  padding: 0 12px 10px;
  color: #60758a;
  font-size: .68rem;
  font-weight: 650;
}

#meteograma-quality-view .meteograma-custom-period {
  padding: 0 12px 10px;
}

/* Family bar mirrors the approved prototype, but it is driven by the existing
   meteograma-group select and stays independent from quality-family navigation. */
#meteograma-quality-view .meteograma-explore-family-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px;
  border: 1px solid var(--mq-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--mq-shadow);
}

#meteograma-quality-view .meteograma-explore-family-tab,
#meteograma-quality-view .meteograma-explore-technical-option {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #cad9e5;
  border-radius: 9px;
  background: #fff;
  color: #3f5a72;
  font: inherit;
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

#meteograma-quality-view .meteograma-explore-family-tab:hover,
#meteograma-quality-view .meteograma-explore-technical-option:hover {
  background: #f1f6fa;
}

#meteograma-quality-view .meteograma-explore-family-tab.active {
  border-color: var(--mq-navy);
  background: var(--mq-navy);
  color: #fff;
}

#meteograma-quality-view .meteograma-explore-technical-option {
  margin-left: auto;
  border-style: dashed;
  color: var(--mq-muted);
}

#meteograma-quality-view .meteograma-explore-technical-option.active {
  border-style: solid;
  border-color: #73899a;
  background: #eaf0f4;
  color: var(--mq-navy);
}

#meteograma-quality-view .meteograma-native-group-field,
#meteograma-quality-view .meteograma-explore-variable-tabs {
  display: none !important;
}

#meteograma-quality-view .meteograma-thermo-tabs,
#meteograma-quality-view .meteograma-wind-tabs,
#meteograma-quality-view .meteograma-visibility-tabs,
#meteograma-quality-view .meteograma-phenomena-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid var(--mq-line);
  border-radius: 12px 12px 0 0;
  border-bottom-color: #c8d7e3;
  background: #fff;
  box-shadow: 0 4px 14px rgba(24,55,85,.05);
}

#meteograma-quality-view .meteograma-thermo-tabs[hidden],
#meteograma-quality-view .meteograma-wind-tabs[hidden],
#meteograma-quality-view .meteograma-visibility-tabs[hidden],
#meteograma-quality-view .meteograma-phenomena-tabs[hidden] {
  display: none;
}

#meteograma-quality-view .meteograma-thermo-tab,
#meteograma-quality-view .meteograma-wind-tab,
#meteograma-quality-view .meteograma-visibility-tab,
#meteograma-quality-view .meteograma-phenomena-tab {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #506a81;
  font: inherit;
  font-size: .73rem;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
}

#meteograma-quality-view .meteograma-thermo-tab:hover,
#meteograma-quality-view .meteograma-wind-tab:hover,
#meteograma-quality-view .meteograma-visibility-tab:hover,
#meteograma-quality-view .meteograma-phenomena-tab:hover {
  background: #f1f6fa;
}

#meteograma-quality-view .meteograma-thermo-tab.active,
#meteograma-quality-view .meteograma-wind-tab.active,
#meteograma-quality-view .meteograma-visibility-tab.active,
#meteograma-quality-view .meteograma-phenomena-tab.active {
  background: var(--mq-blue-soft);
  color: #075f9a;
  font-weight: 850;
}

#meteograma-quality-view .meteograma-prototype-action-row {
  display: flex;
  align-items: end;
  gap: 7px;
  flex-wrap: wrap;
  margin: -1px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--mq-line);
  border-radius: 0 0 12px 12px;
  background: #fff;
}

#meteograma-quality-view .meteograma-prototype-action-row .meteograma-variable-field {
  min-width: 210px;
  flex: 0 1 320px;
}

#meteograma-quality-view .meteograma-thermo-tabs:not([hidden]) ~ .meteograma-prototype-action-row,
#meteograma-quality-view .meteograma-wind-tabs:not([hidden]) ~ .meteograma-prototype-action-row,
#meteograma-quality-view .meteograma-visibility-tabs:not([hidden]) ~ .meteograma-prototype-action-row,
#meteograma-quality-view .meteograma-phenomena-tabs:not([hidden]) ~ .meteograma-prototype-action-row {
  margin: 0 0 4px;
  padding: 8px 12px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}


#meteograma-quality-view .meteograma-variable-field[hidden] {
  display: none;
}

#meteograma-quality-view .meteograma-variable-detail-link[hidden] {
  display: none;
}

#meteograma-quality-view .meteograma-prototype-status {
  margin: 6px 1px 10px;
  color: #60758a;
  font-size: .69rem;
}

#meteograma-quality-view .meteograma-prototype-status[data-state="success"] {
  color: #126b49;
}

#meteograma-quality-view .meteograma-prototype-status[data-state="error"],
#meteograma-quality-view .meteograma-prototype-status[data-state="unavailable"] {
  color: #9a3942;
}

#meteograma-quality-view .meteograma-prototype-card {
  overflow: hidden;
  border: 1px solid var(--mq-line);
  border-radius: 13px;
  background: var(--mq-panel);
  box-shadow: var(--mq-shadow);
}

#meteograma-quality-view .meteograma-prototype-card > h3 {
  margin: 0;
  padding: 11px 13px;
  border-bottom: 1px solid #edf2f6;
  color: #0c3157;
  font-size: .83rem;
  line-height: 1.25;
}

#meteograma-quality-view .meteograma-prototype-card > .body {
  padding: 12px;
}

#meteograma-quality-view .meteograma-thermo-dashboard[hidden],
#meteograma-quality-view .meteograma-wind-dashboard[hidden],
#meteograma-quality-view .meteograma-visibility-dashboard[hidden],
#meteograma-quality-view .meteograma-phenomena-dashboard[hidden],
#meteograma-quality-view .meteograma-generic-results[hidden],
#meteograma-quality-view .meteograma-wind-overview[hidden],
#meteograma-quality-view .meteograma-wind-page[hidden],
#meteograma-quality-view .meteograma-prototype-sample[hidden] {
  display: none;
}

#meteograma-quality-view .meteograma-thermo-workspace,
#meteograma-quality-view .meteograma-wind-workspace,
#meteograma-quality-view .meteograma-visibility-workspace,
#meteograma-quality-view .meteograma-phenomena-workspace {
  display: grid;
  grid-template-columns: 320px minmax(0,1fr);
  gap: 12px;
  align-items: start;
}

#meteograma-quality-view .meteograma-thermo-sidebar,
#meteograma-quality-view .meteograma-wind-sidebar,
#meteograma-quality-view .meteograma-visibility-sidebar,
#meteograma-quality-view .meteograma-phenomena-sidebar {
  min-width: 0;
}

#meteograma-quality-view .meteograma-thermo-sticky,
#meteograma-quality-view .meteograma-wind-sticky,
#meteograma-quality-view .meteograma-visibility-sticky,
#meteograma-quality-view .meteograma-phenomena-sticky {
  position: sticky;
  top: 10px;
  display: grid;
  gap: 11px;
}

#meteograma-quality-view .meteograma-thermo-main,
#meteograma-quality-view .meteograma-wind-main,
#meteograma-quality-view .meteograma-visibility-main,
#meteograma-quality-view .meteograma-phenomena-main {
  display: grid;
  gap: 11px;
  min-width: 0;
}

#meteograma-quality-view .meteograma-prototype-pair {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 11px;
}

#meteograma-quality-view .meteograma-prototype-card.chart {
  min-width: 0;
}

#meteograma-quality-view .meteograma-prototype-card.chart > .body {
  min-height: 180px;
}

/* Altura vem da proporção do viewBox, não de um valor fixo: com altura fixa o
   desenho era centralizado numa caixa maior e sobrava faixa vazia, e a escala
   variava de gráfico para gráfico junto com o texto do eixo. */
#meteograma-quality-view .meteograma-prototype-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 200px;
  overflow: visible;
}

#meteograma-quality-view .meteograma-prototype-svg.medium,
#meteograma-quality-view .meteograma-prototype-svg.small {
  min-height: 180px;
}

#meteograma-quality-view .meteograma-thermo-kv,
#meteograma-quality-view .meteograma-wind-kv,
#meteograma-quality-view .meteograma-visibility-kv,
#meteograma-quality-view .meteograma-phenomena-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 0;
}

#meteograma-quality-view .meteograma-thermo-kv span,
#meteograma-quality-view .meteograma-wind-kv span,
#meteograma-quality-view .meteograma-visibility-kv span,
#meteograma-quality-view .meteograma-phenomena-kv span {
  color: #63758c;
  font-size: .72rem;
}

#meteograma-quality-view .meteograma-thermo-kv b,
#meteograma-quality-view .meteograma-wind-kv b,
#meteograma-quality-view .meteograma-visibility-kv b,
#meteograma-quality-view .meteograma-phenomena-kv b {
  color: #123558;
  font-size: .73rem;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

#meteograma-quality-view .meteograma-wind-statrow {
  display: grid;
  grid-template-columns: 10px minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  color: #526b82;
  font-size: .71rem;
}

#meteograma-quality-view .meteograma-wind-statrow b {
  color: #123558;
  font-size: .71rem;
  font-weight: 800;
  text-align: right;
}

#meteograma-quality-view .meteograma-wind-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

#meteograma-quality-view .meteograma-prototype-svg {
  shape-rendering: geometricPrecision;
}

#meteograma-quality-view .meteograma-prototype-svg text {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}


#meteograma-quality-view .meteograma-prototype-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 7px 0 0;
  color: #5d7288;
  font-size: .68rem;
}

#meteograma-quality-view .meteograma-prototype-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: -1px;
}

#meteograma-quality-view .meteograma-prototype-note {
  margin: 8px 0 0;
  color: #60758c;
  font-size: .69rem;
  line-height: 1.45;
}

#meteograma-quality-view .meteograma-prototype-empty {
  display: grid;
  min-height: 150px;
  place-items: center;
  padding: 28px;
  color: #687d90;
  font-size: .75rem;
  text-align: center;
}

#meteograma-quality-view .meteograma-thermo-methodbox,
#meteograma-quality-view .meteograma-wind-methodbox {
  padding: 12px;
  color: #4d657a;
}

#meteograma-quality-view .meteograma-thermo-methodgrid,
#meteograma-quality-view .meteograma-wind-methodgrid,
#meteograma-quality-view .meteograma-visibility-methodgrid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.8fr);
  gap: 15px;
}

#meteograma-quality-view .meteograma-thermo-methodgrid h4,
#meteograma-quality-view .meteograma-wind-methodgrid h4,
#meteograma-quality-view .meteograma-visibility-methodgrid h4 {
  margin: 0 0 7px;
  color: #163b60;
  font-size: .78rem;
}

#meteograma-quality-view .meteograma-thermo-methodgrid p,
#meteograma-quality-view .meteograma-thermo-methodgrid ul,
#meteograma-quality-view .meteograma-wind-methodgrid p,
#meteograma-quality-view .meteograma-visibility-methodgrid p,
#meteograma-quality-view .meteograma-thermo-methodgrid ul,
#meteograma-quality-view .meteograma-wind-methodgrid ul,
#meteograma-quality-view .meteograma-visibility-methodgrid ul {
  margin: 5px 0;
  color: #536b80;
  font-size: .72rem;
  line-height: 1.5;
}

#meteograma-quality-view .meteograma-wind-methodgrid ul {
  padding-left: 18px;
}

#meteograma-quality-view .meteograma-wind-page {
  display: grid;
  gap: 11px;
}

#meteograma-quality-view .meteograma-wind-stategrid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
}

#meteograma-quality-view .meteograma-wind-detailbox {
  position: relative;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--mq-line);
  border-radius: 10px;
  background: #fbfdff;
}

#meteograma-quality-view .meteograma-wind-detailbox > i {
  display: block;
  width: 10px;
  height: 10px;
  margin-bottom: 8px;
  border-radius: 3px;
}

#meteograma-quality-view .meteograma-wind-detailbox h4 {
  margin: 0 0 7px;
  color: #173d62;
  font-size: .74rem;
}

#meteograma-quality-view .meteograma-wind-detailbox strong {
  display: block;
  color: #0d355e;
  font-size: 1.15rem;
}

#meteograma-quality-view .meteograma-wind-detailbox span,
#meteograma-quality-view .meteograma-wind-detailbox p {
  color: #60758a;
  font-size: .7rem;
}

#meteograma-quality-view .meteograma-thermo-banner-card {
  margin-bottom: 0;
}

#meteograma-quality-view .meteograma-thermo-banner {
  padding: 2px 0;
  color: #526b80;
  font-size: .73rem;
  line-height: 1.5;
}

#meteograma-quality-view .meteograma-thermo-content {
  display: grid;
  gap: 11px;
}

#meteograma-quality-view .meteograma-thermo-callouts {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

#meteograma-quality-view .meteograma-thermo-callout {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--mq-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--mq-shadow);
}

#meteograma-quality-view .meteograma-thermo-callout .num {
  color: var(--mq-navy);
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1.1;
}

#meteograma-quality-view .meteograma-thermo-callout b {
  color: #173d62;
  font-size: .73rem;
}

#meteograma-quality-view .meteograma-thermo-callout p {
  margin: 3px 0 0;
  color: #60758a;
  font-size: .68rem;
  line-height: 1.45;
}

#meteograma-quality-view .meteograma-thermo-stategrid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
}

#meteograma-quality-view .meteograma-thermo-detailbox {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--mq-line);
  border-radius: 10px;
  background: #fbfdff;
}

#meteograma-quality-view .meteograma-thermo-detailbox h4 {
  margin: 0 0 7px;
  color: #173d62;
  font-size: .74rem;
}

#meteograma-quality-view .meteograma-thermo-detailbox strong {
  display: block;
  color: #0d355e;
  font-size: 1.15rem;
}

#meteograma-quality-view .meteograma-thermo-detailbox span,
#meteograma-quality-view .meteograma-thermo-detailbox p {
  color: #60758a;
  font-size: .7rem;
  line-height: 1.45;
}

#meteograma-quality-view .meteograma-thermo-rule {
  padding: 10px;
  border: 1px solid #dde7ee;
  border-radius: 9px;
  margin: 7px 0;
  background: #fbfdff;
}

#meteograma-quality-view .meteograma-thermo-rule b {
  color: #163c60;
  font-size: .73rem;
}

#meteograma-quality-view .meteograma-thermo-rule p {
  margin: 4px 0 0;
  color: #657a8c;
  font-size: .7rem;
  line-height: 1.45;
}


#meteograma-quality-view .meteograma-visibility-banner {
  padding: 2px 0;
  color: #526b80;
  font-size: .73rem;
  line-height: 1.5;
}

#meteograma-quality-view .meteograma-visibility-content {
  display: grid;
  gap: 11px;
}

#meteograma-quality-view .meteograma-visibility-callouts {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

#meteograma-quality-view .meteograma-visibility-callout {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--mq-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--mq-shadow);
}

#meteograma-quality-view .meteograma-visibility-callout .num {
  color: var(--mq-navy);
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1.1;
}

#meteograma-quality-view .meteograma-visibility-callout b,
#meteograma-quality-view .meteograma-visibility-rule b {
  color: #173d62;
  font-size: .73rem;
}

#meteograma-quality-view .meteograma-visibility-callout p,
#meteograma-quality-view .meteograma-visibility-rule p {
  margin: 3px 0 0;
  color: #60758a;
  font-size: .68rem;
  line-height: 1.45;
}

#meteograma-quality-view .meteograma-visibility-stategrid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
}

#meteograma-quality-view .meteograma-visibility-detailbox {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--mq-line);
  border-radius: 10px;
  background: #fbfdff;
}

#meteograma-quality-view .meteograma-visibility-detailbox h4 {
  margin: 0 0 7px;
  color: #173d62;
  font-size: .74rem;
}

#meteograma-quality-view .meteograma-visibility-detailbox strong {
  display: block;
  color: #0d355e;
  font-size: 1.15rem;
}

#meteograma-quality-view .meteograma-visibility-detailbox span,
#meteograma-quality-view .meteograma-visibility-detailbox p {
  color: #60758a;
  font-size: .7rem;
  line-height: 1.45;
}

#meteograma-quality-view .meteograma-visibility-rule {
  padding: 10px;
  border: 1px solid #dde7ee;
  border-radius: 9px;
  margin: 7px 0;
  background: #fbfdff;
}

#meteograma-quality-view .meteograma-visibility-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff0d8;
  color: #915d00;
  font-size: .64rem;
  font-weight: 800;
}

#meteograma-quality-view .meteograma-phenomena-content {
  display: grid;
  gap: 11px;
}

#meteograma-quality-view .meteograma-phenomena-banner {
  color: #526b80;
  font-size: .73rem;
  line-height: 1.5;
}

#meteograma-quality-view .meteograma-phenomena-note {
  margin: 8px 0 0;
  color: #60758a;
  font-size: .69rem;
  line-height: 1.48;
}

#meteograma-quality-view .meteograma-phenomena-callouts {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}

#meteograma-quality-view .meteograma-phenomena-callout {
  padding: 11px;
  border: 1px solid var(--mq-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--mq-shadow);
}

#meteograma-quality-view .meteograma-phenomena-callout strong {
  display: block;
  color: #0d355e;
  font-size: 1.15rem;
  line-height: 1.1;
}

#meteograma-quality-view .meteograma-phenomena-callout span {
  display: block;
  margin-top: 4px;
  color: #60758a;
  font-size: .68rem;
  font-weight: 760;
}

#meteograma-quality-view .meteograma-phenomena-prevalence {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#meteograma-quality-view .meteograma-phenomena-prevalence strong {
  color: #075f9a;
  font-size: 1.45rem;
}

#meteograma-quality-view .meteograma-phenomena-prevalence span {
  color: #526b80;
  font-size: .72rem;
}

#meteograma-quality-view .meteograma-phenomena-stategrid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}

#meteograma-quality-view .meteograma-phenomena-statebox,
#meteograma-quality-view .meteograma-phenomena-detailbox,
#meteograma-quality-view .meteograma-phenomena-boundary {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--mq-line);
  border-radius: 10px;
  background: #fbfdff;
}

#meteograma-quality-view .meteograma-phenomena-statebox strong {
  display: block;
  color: #0d355e;
  font-size: 1.15rem;
}

#meteograma-quality-view .meteograma-phenomena-statebox b,
#meteograma-quality-view .meteograma-phenomena-detailbox h4,
#meteograma-quality-view .meteograma-phenomena-boundary b {
  color: #173d62;
  font-size: .74rem;
}

#meteograma-quality-view .meteograma-phenomena-statebox p,
#meteograma-quality-view .meteograma-phenomena-detailbox p,
#meteograma-quality-view .meteograma-phenomena-boundary p {
  margin: 5px 0 0;
  color: #60758a;
  font-size: .69rem;
  line-height: 1.48;
}

#meteograma-quality-view .meteograma-phenomena-boundary {
  margin-top: 10px;
}

#meteograma-quality-view .meteograma-phenomena-methodgrid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}

#meteograma-quality-view .meteograma-phenomena-detailbox h4 {
  margin: 0 0 7px;
}

#meteograma-quality-view .meteograma-phenomena-barcode {
  min-height: 170px;
}

#meteograma-quality-view .meteograma-phenomena-axis-label {
  fill: #60758a;
  font-size: 9px;
}

#meteograma-quality-view .meteograma-phenomena-grid {
  stroke: #e2e8f0;
  stroke-width: 1;
}

#meteograma-quality-view .meteograma-phenomena-mark.state-present { fill: #1687c8; }
#meteograma-quality-view .meteograma-phenomena-mark.state-absent { fill: #94a3b8; }
#meteograma-quality-view .meteograma-phenomena-mark.state-unknown { fill: #f59e0b; }
#meteograma-quality-view .meteograma-phenomena-mark.state-invalid { fill: #b91c1c; }

/* Existing single-variable result remains native and receives the same visual
   vocabulary, so Direction/Speed/Gust tabs do not feel like a second app. */
#meteograma-quality-view .meteograma-generic-results {
  margin-top: 2px;
}

#meteograma-quality-view .meteograma-explore-results-grid {
  display: grid;
  grid-template-columns: 320px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  margin-top: 0;
}

#meteograma-quality-view .meteograma-explore-results-grid .semantic-card {
  margin-top: 0;
  border-radius: 13px;
  box-shadow: var(--mq-shadow);
}

#meteograma-quality-view .meteograma-explore-results-grid #meteograma-filter-summary .filter-summary-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

#meteograma-quality-view .meteograma-explore-chart-card {
  min-width: 0;
}

#meteograma-quality-view .meteograma-explore-chart-card .variable-chart {
  min-height: 310px;
}

#meteograma-quality-view .meteograma-prototype-sample {
  margin-top: 12px;
  border-radius: 13px;
  box-shadow: var(--mq-shadow);
}

#meteograma-quality-view .meteograma-prototype-sample > summary {
  padding: 11px 13px;
  cursor: pointer;
}

#meteograma-quality-view .meteograma-prototype-sample .table-wrap {
  overflow: auto;
}



/* Pressão/QNH — A12: composição descritiva e metodologicamente conservadora. */
#meteograma-quality-view .meteograma-pressure-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 8px;
  border: 1px solid #d8e4ec;
  border-radius: 10px;
  background: #f8fbfd;
}

#meteograma-quality-view .meteograma-pressure-tabs[hidden],
#meteograma-quality-view .meteograma-pressure-dashboard[hidden] {
  display: none;
}

#meteograma-quality-view .meteograma-pressure-tab {
  border: 1px solid #cad8e2;
  border-radius: 999px;
  padding: 7px 12px;
  background: #fff;
  color: #40586d;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

#meteograma-quality-view .meteograma-pressure-tab:hover {
  border-color: #7ba9c8;
}

#meteograma-quality-view .meteograma-pressure-tab.active {
  border-color: #0d9488;
  background: #e9f8f5;
  color: #0f5f59;
}

#meteograma-quality-view .meteograma-pressure-workspace {
  display: grid;
  grid-template-columns: 320px minmax(0,1fr);
  gap: 12px;
  margin-top: 12px;
}

#meteograma-quality-view .meteograma-pressure-sidebar {
  min-width: 0;
}

#meteograma-quality-view .meteograma-pressure-sticky {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 10px;
}

#meteograma-quality-view .meteograma-pressure-main,
#meteograma-quality-view .meteograma-pressure-content {
  min-width: 0;
  display: grid;
  gap: 12px;
}

#meteograma-quality-view .meteograma-pressure-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #edf2f5;
}

#meteograma-quality-view .meteograma-pressure-kv span {
  color: #60758a;
  font-size: .77rem;
}

#meteograma-quality-view .meteograma-pressure-kv b {
  color: #173e53;
  font-size: .83rem;
  text-align: right;
}

#meteograma-quality-view .meteograma-pressure-banner {
  padding: 7px 9px;
  border-left: 3px solid #0d9488;
  background: #effaf8;
  color: #285c58;
  font-size: .82rem;
}

#meteograma-quality-view .meteograma-pressure-note {
  margin: 7px 0 0;
  color: #61778a;
  font-size: .76rem;
  line-height: 1.45;
}

#meteograma-quality-view .meteograma-pressure-axis-label {
  fill: #60758a;
  font-size: 10px;
}

#meteograma-quality-view .meteograma-pressure-grid {
  stroke: #dfe9ef;
  stroke-width: 1;
}

#meteograma-quality-view .meteograma-pressure-point {
  fill: #0d9488;
  opacity: .82;
}

#meteograma-quality-view .meteograma-pressure-bar {
  fill: #1687c8;
  opacity: .78;
}

#meteograma-quality-view .meteograma-pressure-stategrid,
#meteograma-quality-view .meteograma-pressure-methodgrid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

#meteograma-quality-view .meteograma-pressure-methodgrid {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

#meteograma-quality-view .meteograma-pressure-statebox,
#meteograma-quality-view .meteograma-pressure-detailbox,
#meteograma-quality-view .meteograma-pressure-boundary {
  padding: 11px;
  border: 1px solid #dce7ed;
  border-radius: 9px;
  background: #fbfdfe;
}

#meteograma-quality-view .meteograma-pressure-statebox strong {
  display: block;
  color: #0d9488;
  font-size: 1.3rem;
}

#meteograma-quality-view .meteograma-pressure-statebox b,
#meteograma-quality-view .meteograma-pressure-detailbox h4,
#meteograma-quality-view .meteograma-pressure-boundary b {
  color: #173e53;
}

#meteograma-quality-view .meteograma-pressure-statebox p,
#meteograma-quality-view .meteograma-pressure-detailbox p,
#meteograma-quality-view .meteograma-pressure-boundary p {
  margin: 5px 0 0;
  color: #60758a;
  font-size: .78rem;
  line-height: 1.45;
}

#meteograma-quality-view .meteograma-pressure-boundary {
  margin-top: 10px;
  border-left: 3px solid #f59e0b;
}

@media (max-width: 1180px) {
  #meteograma-quality-view .meteograma-prototype-toolbar {
    grid-template-columns: minmax(210px,1fr) minmax(130px,.7fr) minmax(130px,.7fr);
  }

  #meteograma-quality-view .meteograma-prototype-navbuttons {
    justify-content: flex-start;
  }

  #meteograma-quality-view .meteograma-thermo-workspace,
  #meteograma-quality-view .meteograma-wind-workspace,
  #meteograma-quality-view .meteograma-visibility-workspace,
  #meteograma-quality-view .meteograma-phenomena-workspace,
  #meteograma-quality-view .meteograma-pressure-workspace,
  #meteograma-quality-view .meteograma-explore-results-grid {
    grid-template-columns: 1fr;
  }

  #meteograma-quality-view .meteograma-thermo-sticky,
  #meteograma-quality-view .meteograma-wind-sticky,
  #meteograma-quality-view .meteograma-visibility-sticky,
  #meteograma-quality-view .meteograma-phenomena-sticky,
  #meteograma-quality-view .meteograma-pressure-sticky {
    position: static;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  #meteograma-quality-view .meteograma-thermo-stategrid,
  #meteograma-quality-view .meteograma-wind-stategrid,
  #meteograma-quality-view .meteograma-visibility-stategrid,
  #meteograma-quality-view .meteograma-phenomena-stategrid,
  #meteograma-quality-view .meteograma-pressure-stategrid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  #meteograma-quality-view .meteograma-physical-workspace {
    padding: 8px;
  }

  #meteograma-quality-view .meteograma-physical-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #meteograma-quality-view .meteograma-physical-head-status {
    justify-content: flex-start;
  }

  #meteograma-quality-view .meteograma-prototype-toolbar {
    grid-template-columns: 1fr;
  }

  #meteograma-quality-view .meteograma-prototype-navbuttons {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #meteograma-quality-view .meteograma-prototype-meta {
    margin-left: 0;
  }

  #meteograma-quality-view .meteograma-explore-family-tabs {
    align-items: stretch;
    flex-direction: column;
  }

  #meteograma-quality-view .meteograma-explore-family-tab,
  #meteograma-quality-view .meteograma-explore-technical-option {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }

  #meteograma-quality-view .meteograma-prototype-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  #meteograma-quality-view .meteograma-prototype-action-row .meteograma-variable-field,
  #meteograma-quality-view .meteograma-prototype-action-row .meteograma-prototype-btn {
    width: 100%;
    flex-basis: auto;
  }

  #meteograma-quality-view .meteograma-prototype-pair,
  #meteograma-quality-view .meteograma-thermo-callouts,
  #meteograma-quality-view .meteograma-visibility-callouts,
  #meteograma-quality-view .meteograma-phenomena-callouts,
  #meteograma-quality-view .meteograma-thermo-methodgrid,
  #meteograma-quality-view .meteograma-wind-methodgrid,
  #meteograma-quality-view .meteograma-visibility-methodgrid,
  #meteograma-quality-view .meteograma-phenomena-methodgrid,
  #meteograma-quality-view .meteograma-pressure-methodgrid,
  #meteograma-quality-view .meteograma-thermo-sticky,
  #meteograma-quality-view .meteograma-wind-sticky,
  #meteograma-quality-view .meteograma-phenomena-sticky,
  #meteograma-quality-view .meteograma-pressure-sticky,
  #meteograma-quality-view .meteograma-thermo-stategrid,
  #meteograma-quality-view .meteograma-wind-stategrid,
  #meteograma-quality-view .meteograma-visibility-stategrid,
  #meteograma-quality-view .meteograma-phenomena-stategrid,
  #meteograma-quality-view .meteograma-pressure-stategrid {
    grid-template-columns: 1fr;
  }

  #meteograma-quality-view .meteograma-prototype-svg,
  #meteograma-quality-view .meteograma-prototype-svg.medium,
  #meteograma-quality-view .meteograma-prototype-svg.small {
    height: auto;
    min-height: 220px;
  }

  #meteograma-quality-view .meteograma-explore-results-grid #meteograma-filter-summary .filter-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* A13 — prototype fidelity recovery: Fenômenos + Pressão/QNH */
#meteograma-quality-view .meteograma-phenomena-workspace,
#meteograma-quality-view .meteograma-pressure-workspace {
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

#meteograma-quality-view .meteograma-phenomena-sticky,
#meteograma-quality-view .meteograma-pressure-sticky {
  gap: 10px;
}

#meteograma-quality-view .meteograma-phenomena-main,
#meteograma-quality-view .meteograma-pressure-main,
#meteograma-quality-view .meteograma-phenomena-content,
#meteograma-quality-view .meteograma-pressure-content {
  gap: 10px;
}

#meteograma-quality-view .meteograma-phenomena-banner,
#meteograma-quality-view .meteograma-pressure-banner {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
}

#meteograma-quality-view .meteograma-phenomena-banner {
  background: #f3f0ff;
  border: 1px solid #ddd6f4;
  color: #554782;
}

#meteograma-quality-view .meteograma-pressure-banner {
  background: #eef6fb;
  border: 1px solid #cfe2ef;
  color: #31536e;
}

#meteograma-quality-view .meteograma-phenomena-family-timeline,
#meteograma-quality-view .meteograma-phenomena-prevalence-chart,
#meteograma-quality-view .meteograma-phenomena-combo-chart,
#meteograma-quality-view .meteograma-phenomena-co-chart,
#meteograma-quality-view .meteograma-pressure-barogram {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
}

#meteograma-quality-view .meteograma-prototype-card.chart.full .meteograma-phenomena-family-timeline,
#meteograma-quality-view .meteograma-prototype-card.chart.full .meteograma-pressure-barogram {
  min-height: 330px;
}

#meteograma-quality-view .meteograma-family-catalog {
  margin-top: 12px;
  overflow: hidden;
}

#meteograma-quality-view .meteograma-family-catalog-intro {
  color: #657b90;
  font-size: 11px;
  margin-bottom: 9px;
}

#meteograma-quality-view .meteograma-family-catalog-grid {
  overflow-x: auto;
}

#meteograma-quality-view .meteograma-family-catalog-grid table{
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

#meteograma-quality-view .meteograma-family-catalog-grid th,
#meteograma-quality-view .meteograma-family-catalog-grid td {
  padding: 9px 10px;
  border-bottom: 1px solid #e0e8ef;
  text-align: left;
  vertical-align: top;
}

#meteograma-quality-view .meteograma-family-catalog-grid th {
  background: #f5f8fb;
  color: #526b80;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

#meteograma-quality-view .meteograma-family-catalog-grid code {
  color: #0873b5;
  font-size: 11px;
}

#meteograma-quality-view .meteograma-family-detail-action {
  color: #0872b5;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

#meteograma-quality-view .meteograma-family-detail-action:hover {
  text-decoration: underline;
}

#meteograma-quality-view .meteograma-family-badge {
  display: inline-block;
  margin-top: 8px;
  border-radius: 999px;
  padding: 3px 7px;
  background: #eef3f7;
  color: #5b7083;
  font-size: 9px;
  font-weight: 800;
}

#meteograma-quality-view .meteograma-family-badge.warn {
  background: #fff0d8;
  color: #915d00;
}

#meteograma-quality-view .meteograma-family-badge.info {
  background: #e8f2fa;
  color: #17648e;
}

#meteograma-quality-view .meteograma-pressure-reference {
  stroke: rgba(113, 99, 200, .66);
  stroke-width: 1.2;
  stroke-dasharray: 6 5;
}

#meteograma-quality-view .meteograma-pressure-reference-label {
  fill: #7163c8;
  font-size: 9px;
  font-weight: 700;
}

#meteograma-quality-view .meteograma-pressure-reference-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px 64px;
  color: #7163c8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

#meteograma-quality-view .meteograma-pressure-reference-swatch {
  width: 30px;
  flex: 0 0 30px;
  border-top: 1.2px dashed rgba(113, 99, 200, .66);
}

#meteograma-quality-view .meteograma-pressure-unavailable {
  min-height: 128px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px dashed #cbd9e4;
  border-radius: 10px;
  background: #f8fafc;
}

#meteograma-quality-view .meteograma-pressure-unavailable-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e8f2fa;
  color: #17648e;
  font-size: 27px;
  font-weight: 900;
}

#meteograma-quality-view .meteograma-pressure-unavailable b {
  color: #163b5e;
}

#meteograma-quality-view .meteograma-pressure-unavailable p {
  margin: 4px 0 0;
  color: #657b8e;
  font-size: 11px;
}

#meteograma-quality-view .meteograma-pressure-methodlist {
  display: grid;
  gap: 7px;
}

#meteograma-quality-view .meteograma-pressure-methodrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #e0e8ef;
  border-radius: 9px;
}

#meteograma-quality-view .meteograma-pressure-methodrow b {
  color: #163b5e;
  font-size: 12px;
}

#meteograma-quality-view .meteograma-pressure-methodrow span {
  border-radius: 999px;
  padding: 3px 7px;
  background: #eef3f7;
  color: #607487;
  font-size: 9px;
  font-weight: 800;
  text-align: right;
}


#meteograma-quality-view .meteograma-prototype-card.chart.compact-unavailable .meteograma-pressure-unavailable {
  min-height: 112px;
}

#meteograma-quality-view .meteograma-prototype-card.chart.compact-unavailable .body {
  min-height: 0;
}

#meteograma-quality-view .meteograma-pressure-readiness-note {
  margin: 9px 0 0;
  color: #657b8e;
  font-size: 10px;
  line-height: 1.4;
}

#meteograma-quality-view .meteograma-pressure-methodrow span.study {
  background: #fff0d8;
  color: #915d00;
}

#meteograma-quality-view .meteograma-pressure-methodrow span.blocked {
  background: #f5e9e8;
  color: #9d4a42;
}

#meteograma-quality-view .meteograma-pressure-methodrow span.neutral {
  background: #eef3f7;
  color: #607487;
}

#meteograma-quality-view .meteograma-phenomena-stategrid,
#meteograma-quality-view .meteograma-pressure-stategrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
}

#meteograma-quality-view .meteograma-phenomena-statebox,
#meteograma-quality-view .meteograma-pressure-statebox {
  min-height: 122px;
}

#meteograma-quality-view .meteograma-prototype-card.chart > h3,
#meteograma-quality-view .meteograma-family-catalog > h3 {
  font-size: 13px;
  color: #143c62;
}

@media (max-width: 1050px) {
  #meteograma-quality-view .meteograma-phenomena-workspace,
  #meteograma-quality-view .meteograma-pressure-workspace {
    grid-template-columns: 1fr;
  }
  #meteograma-quality-view .meteograma-phenomena-sticky,
  #meteograma-quality-view .meteograma-pressure-sticky {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #meteograma-quality-view .meteograma-phenomena-sticky,
  #meteograma-quality-view .meteograma-pressure-sticky,
  #meteograma-quality-view .meteograma-phenomena-stategrid,
  #meteograma-quality-view .meteograma-pressure-stategrid,
  #meteograma-quality-view .meteograma-pressure-methodgrid {
    grid-template-columns: 1fr;
  }
  #meteograma-quality-view .meteograma-pressure-methodrow {
    grid-template-columns: 1fr;
  }
}



/* A14.1 · o catálogo contextual abaixo é a única lista visível de variáveis.
   Os mini-catálogos internos de Fenômenos e Pressão permanecem no DOM apenas
   para compatibilidade com os renderizadores existentes. */
#meteograma-quality-view #meteograma-phenomena-dashboard > .meteograma-family-catalog,
#meteograma-quality-view #meteograma-pressure-dashboard > .meteograma-family-catalog {
  display: none !important;
}

/* A14 · catálogo contextual e exploração automática */
#meteograma-quality-view .meteograma-variable-catalog-section {
  margin-top: 1rem;
  padding-top: .2rem;
}
#meteograma-quality-view .meteograma-variable-catalog-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .4rem;
}
#meteograma-quality-view .meteograma-variable-catalog-head .section-title {
  margin: .1rem 0 0;
}
#meteograma-quality-view .meteograma-variable-catalog-note {
  margin: 0 0 .7rem;
  color: var(--muted, #536b84);
  font-size: .9rem;
}
#meteograma-quality-view #meteograma-variable-catalog-table tr[hidden] {
  display: none;
}
@media (max-width: 760px) {
  #meteograma-quality-view .meteograma-variable-catalog-head { align-items: flex-start; flex-direction: column; }
}

/* Modal de análise por variável: abre dentro do workspace, sem trocar de página. */
#meteograma-quality-view .mva-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9,29,48,.58);
  backdrop-filter: blur(2px);
}
#meteograma-quality-view .mva-modal[hidden] {
  display: none !important;
}
#meteograma-quality-view .mva-dialog {
  width: min(1180px,96vw);
  max-height: 92vh;
  overflow: auto;
  border: 1px solid #cbd9e5;
  border-radius: 16px;
  background: #f2f6fa;
  box-shadow: 0 24px 70px rgba(8,31,52,.28);
  color: #17324e;
}
#meteograma-quality-view .mva-dialog-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid #d8e3ec;
  background: #fff;
}
#meteograma-quality-view .mva-dialog-head h2 {
  margin: 2px 0;
  color: #123558;
  font-size: 1.15rem;
}
#meteograma-quality-view .mva-dialog-head p {
  margin: 4px 0 0;
  color: #60758a;
  font-size: .75rem;
}
#meteograma-quality-view .mva-eyebrow {
  display: block;
  color: #075f9a;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
#meteograma-quality-view .mva-close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #cbd9e5;
  border-radius: 9px;
  background: #fff;
  color: #173e64;
  font-size: 1.35rem;
  cursor: pointer;
}
#meteograma-quality-view .mva-dialog-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}
#meteograma-quality-view .mva-description {
  margin: 0;
  color: #395875;
  font-size: .86rem;
}
#meteograma-quality-view .mva-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#meteograma-quality-view .mva-panel {
  overflow: hidden;
  border: 1px solid #d5e1ec;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(24,55,85,.07);
}
#meteograma-quality-view .mva-panel h3 {
  margin: 0;
  padding: 11px 13px;
  border-bottom: 1px solid #edf2f6;
  color: #0c3157;
  font-size: .8rem;
}
#meteograma-quality-view .mva-panel .mva-body {
  padding: 12px;
}
#meteograma-quality-view .mva-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed #e4ecf3;
  font-size: .78rem;
}
#meteograma-quality-view .mva-kv span {
  color: #5d7189;
}
#meteograma-quality-view .mva-kv b {
  color: #173e64;
  text-align: right;
}
#meteograma-quality-view .mva-criteria {
  margin: 0;
  color: #395875;
  line-height: 1.55;
}
#meteograma-quality-view .mva-note {
  margin: 8px 0 0;
  color: #60758a;
  font-size: .72rem;
  line-height: 1.45;
}
#meteograma-quality-view .mva-rules {
  width: 100%;
  border-collapse: collapse;
  font-size: .76rem;
}
#meteograma-quality-view .mva-rules th {
  padding: 7px 8px;
  border-bottom: 1px solid #d5e1ec;
  color: #5d7189;
  text-align: left;
}
#meteograma-quality-view .mva-rules td {
  padding: 8px;
  border-bottom: 1px solid #edf2f6;
  vertical-align: top;
}
#meteograma-quality-view .mva-rule-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #4d6378;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}
#meteograma-quality-view .mva-rule-details pre {
  max-width: 360px;
  margin: 4px 0;
  overflow: auto;
  font-size: .7rem;
}
#meteograma-quality-view .mva-rule-details dt {
  margin-top: 4px;
  color: #5d7189;
  font-weight: 700;
}
#meteograma-quality-view .mva-rule-details dd {
  margin: 0;
}
#meteograma-quality-view .mva-methodgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  font-size: .78rem;
}
#meteograma-quality-view .mva-methodgrid h4 {
  margin: 0 0 6px;
  color: #0c3157;
  font-size: .78rem;
}
#meteograma-quality-view .mva-methodgrid p,
#meteograma-quality-view .mva-methodgrid ul {
  margin: 0;
  color: #395875;
  line-height: 1.5;
}
#meteograma-quality-view .mva-analytics {
  display: grid;
  gap: 12px;
}
#meteograma-quality-view .mva-state {
  margin: 0;
  padding: 14px;
  border: 1px dashed #cbd9e5;
  border-radius: 12px;
  background: #fff;
  color: #4d6378;
  font-size: .8rem;
}
#meteograma-quality-view .mva-state[data-state="error"] {
  border-color: #e9b4b7;
  background: #fff6f6;
  color: #9b2e35;
}
@media (max-width: 850px) {
  #meteograma-quality-view .mva-info-grid { grid-template-columns: 1fr; }
  #meteograma-quality-view .mva-methodgrid { grid-template-columns: 1fr; }
  #meteograma-quality-view .mva-modal { padding: 8px; }
  #meteograma-quality-view .mva-dialog { width: 100%; max-height: 96vh; }
}
#meteograma-quality-view .mva-state[data-state="loading"] {
  border-style: solid;
  background: #f7fafc;
}
#meteograma-quality-view .mva-subtitle {
  margin: 12px 0 2px;
  color: #0c3157;
  font-size: .74rem;
}
#meteograma-quality-view .mva-interpretation {
  padding: 8px 10px;
  border-left: 3px solid #2586cf;
  background: #f4f8fc;
}
#meteograma-quality-view .mva-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
#meteograma-quality-view .mva-chip {
  padding: 2px 8px;
  border: 1px solid #cfe0ef;
  border-radius: 999px;
  background: #eef5fb;
  color: #1d4f7a;
  font-size: .68rem;
  font-weight: 700;
}
#meteograma-quality-view .mva-chart {
  display: block;
  width: 100%;
  height: auto;
}
#meteograma-quality-view .mva-chart text {
  fill: #5d7189;
  font-size: 11px;
}
#meteograma-quality-view .mva-chart .mva-grid {
  fill: none;
  stroke: #e3ebf2;
  stroke-width: 1;
}
#meteograma-quality-view .mva-chart .mva-axis {
  stroke: #9db3c6;
  stroke-width: 1;
}
#meteograma-quality-view .mva-chart .mva-pt {
  fill: #2586cf;
  opacity: .78;
}
#meteograma-quality-view .mva-chart .mva-pt-bound {
  fill: #7155c8;
}
#meteograma-quality-view .mva-chart .mva-bar {
  fill: #5aa8de;
}
#meteograma-quality-view .mva-chart .mva-sector {
  fill: rgba(37,134,207,.55);
  stroke: #2586cf;
}
#meteograma-quality-view .mva-rose {
  max-width: 420px;
  margin: 0 auto;
}
#meteograma-quality-view .mva-bars {
  display: grid;
  gap: 7px;
}
#meteograma-quality-view .mva-bar-row {
  display: grid;
  grid-template-columns: minmax(120px,220px) 1fr minmax(90px,auto);
  align-items: center;
  gap: 10px;
  font-size: .76rem;
}
#meteograma-quality-view .mva-bar-row i {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: #edf2f6;
}
#meteograma-quality-view .mva-bar-row b {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: #2586cf;
}
#meteograma-quality-view .mva-bar-row strong {
  color: #173e64;
  text-align: right;
}
#meteograma-quality-view .mva-bar-row small {
  color: #5d7189;
  font-weight: 400;
}
@media (max-width: 560px) {
  #meteograma-quality-view .mva-bar-row { grid-template-columns: 1fr; gap: 3px; }
  #meteograma-quality-view .mva-bar-row strong { text-align: left; }
}
#meteograma-quality-view .mva-analytics .mva-info-grid {
  align-items: start;
}
#meteograma-quality-view .mva-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(170px,1fr));
  gap: 8px;
}
#meteograma-quality-view .mva-stat {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #e3ebf2;
  border-radius: 9px;
  background: #f8fbfd;
}
#meteograma-quality-view .mva-stat span {
  color: #5d7189;
  font-size: .7rem;
}
#meteograma-quality-view .mva-stat b {
  color: #173e64;
  font-size: .95rem;
}
#meteograma-quality-view .mva-visual-pair {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
#meteograma-quality-view .mva-boxplot {
  max-width: 680px;
  margin: 0 auto;
}
#meteograma-quality-view .mva-box-whisker {
  stroke: #607f9d;
  stroke-width: 2;
}
#meteograma-quality-view .mva-box-body {
  fill: #dcecf7;
  stroke: #2586cf;
  stroke-width: 2;
}
#meteograma-quality-view .mva-box-median {
  stroke: #173e64;
  stroke-width: 3;
}
#meteograma-quality-view .mva-box-median-label {
  fill: #173e64 !important;
  font-weight: 700;
}
@media (max-width: 850px) {
  #meteograma-quality-view .mva-visual-pair { grid-template-columns: 1fr; }
}


/* Issue #96: contextual p-chart investigation drawer */
#meteograma-quality-view #meteograma-point-modal {
  padding: 0 !important;
  background: rgba(23, 32, 51, .22) !important;
  overflow: hidden;
}
#meteograma-quality-view #meteograma-point-modal > .chart-dialog {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  margin: 0;
  width: min(600px, 92vw) !important;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.2rem !important;
  border-radius: 12px 0 0 12px !important;
}
#meteograma-quality-view #meteograma-point-content .filter-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .7rem 1rem;
}
#meteograma-quality-view #meteograma-point-content .filter-summary-grid > div {
  min-width: 0;
}
#meteograma-quality-view #meteograma-point-content .filter-summary-grid b {
  overflow-wrap: anywhere;
}
#meteograma-quality-view #meteograma-point-content .issue96-aggregated-causes {
  margin-top: .75rem;
  padding: .75rem .9rem;
  border: 1px solid #d5e0e8;
  border-radius: 6px;
  background: #f8fafc;
}
#meteograma-quality-view #meteograma-point-content .issue96-aggregated-causes > summary {
  cursor: pointer;
  color: #163f68;
  font-weight: 650;
}
#meteograma-quality-view #meteograma-point-content .issue96-aggregated-causes .chart-cause-list {
  margin: .75rem 0 0;
}
@media (max-width: 640px) {
  #meteograma-quality-view #meteograma-point-modal > .chart-dialog {
    width: 100vw !important;
    border-radius: 0 !important;
  }
  #meteograma-quality-view #meteograma-point-content .filter-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Issue #96: selected p-chart point remains identifiable while drawer is open */
#meteograma-quality-view .daily-p-chart .chart-point.issue96-selected {
  stroke: #102f55 !important;
  stroke-width: 3px !important;
  paint-order: stroke;
  filter: drop-shadow(0 0 2px rgba(16,47,85,.4));
}

/* Issue #98: explicit, provenance-limited daily technical evidence */
#meteograma-quality-view .issue98-technical-evidence {
  margin: 1rem 0 .35rem;
  padding: .9rem 1rem;
  background: var(--soft, #f4f8fb);
  border: 1px solid var(--line, #d6e3eb);
  border-left: 3px solid var(--blue, #138ccc);
  border-radius: 9px;
}
#meteograma-quality-view .issue98-technical-evidence h5 {
  margin: 0 0 .35rem;
  color: var(--navy, #07345c);
  font-size: .95rem;
}
#meteograma-quality-view .issue98-technical-evidence p {
  margin: .4rem 0;
  line-height: 1.5;
}
#meteograma-quality-view .issue98-technical-evidence button.secondary {
  width: 100%;
  justify-content: center;
  margin: .5rem 0;
  white-space: normal;
}
#meteograma-quality-view .issue98-technical-evidence button:disabled {
  opacity: .6;
  cursor: wait;
}
#meteograma-quality-view #issue98-archive-result {
  padding-top: .55rem;
  border-top: 1px solid var(--line, #d6e3eb);
  overflow-wrap: anywhere;
  font-size: .84rem;
}
#meteograma-quality-view .issue98-predicate-list {
  padding: 0;
  margin: .7rem 0;
  list-style: none;
}
#meteograma-quality-view .issue98-predicate-list li {
  display: flex;
  gap: .7rem;
  justify-content: space-between;
  align-items: baseline;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line, #d6e3eb);
}
#meteograma-quality-view .issue98-predicate-list strong {
  flex-shrink: 0;
  color: var(--navy, #07345c);
}


/* Método e limites: uma seção recolhida por painel, em vez de banner no topo
   mais nota sob cada gráfico mais caixa de método. Nenhuma ressalva se perde. */
#meteograma-quality-view .meteograma-method {
  border: 1px solid var(--airdataq-line, #d8dee7);
  border-radius: 6px;
  background: var(--airdataq-soft, #f4f7fa);
}

#meteograma-quality-view .meteograma-method > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--airdataq-muted, #5f6977);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  list-style: none;
}

#meteograma-quality-view .meteograma-method > summary::-webkit-details-marker {
  display: none;
}

#meteograma-quality-view .meteograma-method > summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid var(--airdataq-line, #d8dee7);
  font-size: .72rem;
  line-height: 1;
}

#meteograma-quality-view .meteograma-method[open] > summary::before {
  content: "−";
}

#meteograma-quality-view .meteograma-method > .body {
  padding: 0 12px 11px;
}

#meteograma-quality-view .meteograma-method > .body p {
  margin: 0 0 7px;
  max-width: 82ch;
  color: #374151;
  font-size: .78rem;
  line-height: 1.5;
}

#meteograma-quality-view .meteograma-method > .body ul {
  margin: 0;
  padding-left: 18px;
}

#meteograma-quality-view .meteograma-method > .body li {
  margin: 3px 0;
  max-width: 80ch;
  color: var(--airdataq-muted, #5f6977);
  font-size: .76rem;
  line-height: 1.45;
}


/* Densidade: a lateral mostra o resumo do recorte e recolhe o detalhe; os
   gráficos secundários ficam num grupo que desenha só na abertura. Nada é
   removido, apenas deixa de competir com a leitura principal. */
#meteograma-quality-view details.sidecard > summary,
#meteograma-quality-view details.meteograma-more > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

#meteograma-quality-view details.sidecard > summary::-webkit-details-marker,
#meteograma-quality-view details.meteograma-more > summary::-webkit-details-marker {
  display: none;
}

#meteograma-quality-view details.sidecard > summary::after,
#meteograma-quality-view details.meteograma-more > summary::after {
  content: "+";
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--airdataq-line, #d8dee7);
  border-radius: 3px;
  background: #fff;
  color: var(--airdataq-muted, #5f6977);
  font-size: .74rem;
  line-height: 1;
}

#meteograma-quality-view details.sidecard[open] > summary::after,
#meteograma-quality-view details.meteograma-more[open] > summary::after {
  content: "−";
}

#meteograma-quality-view details.sidecard > summary > h3 {
  margin: 0;
}

#meteograma-quality-view details.meteograma-more {
  margin: 4px 0 10px;
  border: 1px solid var(--airdataq-line, #d8dee7);
  border-radius: 6px;
  background: var(--airdataq-soft, #f4f7fa);
}

#meteograma-quality-view details.meteograma-more > summary {
  padding: 9px 13px;
  color: var(--airdataq-muted, #5f6977);
  font-size: .8rem;
  font-weight: 600;
}

#meteograma-quality-view details.meteograma-more > .body {
  padding: 0 11px 11px;
}


/* Cabeçalho do gráfico com ícone de informação: a descrição sai da tela e
   aparece por cursor ou foco de teclado, em vez de ocupar espaço permanente. */
#meteograma-quality-view .chart-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

#meteograma-quality-view .chart-head > h3 {
  margin: 0;
}

#meteograma-quality-view .chart-info {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--airdataq-line, #d8dee7);
  border-radius: 50%;
  background: #fff;
  color: var(--airdataq-muted, #5f6977);
  font: 600 10px/1 Inter, system-ui, sans-serif;
  font-style: italic;
  cursor: help;
}

#meteograma-quality-view .chart-info:hover,
#meteograma-quality-view .chart-info:focus-visible {
  border-color: var(--airdataq-brand, #203a70);
  color: var(--airdataq-brand, #203a70);
}

#meteograma-quality-view .chart-info-text {
  position: absolute;
  top: calc(100% + 6px);
  left: -6px;
  z-index: 8;
  width: max-content;
  max-width: 280px;
  padding: 8px 10px;
  border: 1px solid var(--airdataq-line, #d8dee7);
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font: 400 12px/1.45 Inter, system-ui, sans-serif;
  font-style: normal;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity .09s linear;
}

#meteograma-quality-view .chart-info:hover .chart-info-text,
#meteograma-quality-view .chart-info:focus-visible .chart-info-text {
  opacity: 1;
  visibility: visible;
}

/* A lateral ganha corpo de texto legível e deixa o valor longo cair para a
   própria linha, em vez de ser espremido contra o rótulo. */
#meteograma-quality-view .meteograma-thermo-kv,
#meteograma-quality-view .meteograma-wind-kv,
#meteograma-quality-view .meteograma-visibility-kv,
#meteograma-quality-view .meteograma-phenomena-kv {
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 5px 0;
}

#meteograma-quality-view .meteograma-thermo-kv span,
#meteograma-quality-view .meteograma-wind-kv span,
#meteograma-quality-view .meteograma-visibility-kv span,
#meteograma-quality-view .meteograma-phenomena-kv span {
  font-size: .79rem;
}

#meteograma-quality-view .meteograma-thermo-kv b,
#meteograma-quality-view .meteograma-wind-kv b,
#meteograma-quality-view .meteograma-visibility-kv b,
#meteograma-quality-view .meteograma-phenomena-kv b {
  margin-left: auto;
  font-size: .81rem;
}

/* Notas ainda emitidas dentro do desenho ficam discretas até migrarem para o
   ícone de informação. */
#meteograma-quality-view .meteograma-prototype-note {
  font-size: .72rem;
  line-height: 1.45;
  color: var(--airdataq-muted, #5f6977);
}


/* O título do gráfico passou a viver dentro de .chart-head, deixando de ser
   filho direto do card: o cabeçalho reassume o respiro, a borda e a cor que a
   regra antiga aplicava ao h3. */
#meteograma-quality-view .meteograma-prototype-card > .chart-head {
  position: relative;
  padding: 12px 14px;
  border-bottom: 1px solid #edf2f6;
}

#meteograma-quality-view .meteograma-prototype-card > .chart-head > h3 {
  margin: 0;
  padding: 0;
  border: 0;
  color: #0c3157;
  font-size: .83rem;
  line-height: 1.3;
}

/* O card recorta o próprio conteúdo (overflow hidden, por causa do raio da
   borda), então o texto do ícone acompanha a largura do cabeçalho em vez de
   crescer para fora e ser cortado. */
#meteograma-quality-view .chart-info {
  position: static;
}

#meteograma-quality-view .chart-info-text {
  top: calc(100% - 2px);
  left: 14px;
  right: 14px;
  width: auto;
  max-width: none;
}

/* Respiro entre cabeçalho e desenho. */
#meteograma-quality-view .meteograma-prototype-card.chart > .body {
  padding-top: 10px;
}

/* A lateral recolhida recebe o mesmo respiro do título dos cards. */
#meteograma-quality-view details.sidecard > summary {
  padding: 12px 14px;
}

#meteograma-quality-view details.sidecard > summary > h3 {
  padding: 0;
  border: 0;
  font-size: .83rem;
  line-height: 1.3;
}