/* Ecosystem uses the shared PG.CENTER shell, type and surface tokens. */
.eco {
  --eco-pg: #336791;
  --eco-mysql: #aa6429;
  --eco-sqlite: #617949;
  --eco-sqlserver: #8263a1;
  --eco-mongodb: #367b76;
  --eco-redis: #ad546d;
  --eco-oracle: #81796a;
  padding-bottom: 80px;
  color: var(--pg-ink);
  font-family: var(--pg-font);
  font-size: 15.5px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .eco {
  --eco-pg: #7eb7e2;
  --eco-mysql: #dfa364;
  --eco-sqlite: #a6bf87;
  --eco-sqlserver: #b59ad4;
  --eco-mongodb: #77bcb3;
  --eco-redis: #e591a5;
  --eco-oracle: #b9b0a0;
}
.eco [hidden] { display: none !important; }
.eco:not(.eco-ready) :is(.eco-chart, .eco-mini-chart) { display: none; }
.eco a { color: var(--pg-link-content); font-weight: 400; }
.eco a:hover { color: var(--pg-link-content-hover); }
.eco :is(h1, h2, h3, h4) a { font-weight: inherit; }
.eco :is(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--pg-link-hover);
  outline-offset: 4px;
}
.eco :is(h1, h2, h3, p) { margin-top: 0; }
/* Match #pgContentWrap: the same heading scale and readable document text. */
.eco h1, .eco h2, .eco h3 { color: var(--pg-heading); font-family: var(--pg-font); line-height: 1.2; letter-spacing: -.005em; }
.eco h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; margin: .25rem 0 1.25rem; }
.eco h2 { font-size: 1.45rem; font-weight: 700; }
.eco h3 { font-size: 1.2rem; font-weight: 600; }
.eco p { line-height: 1.7; }
.eco-nav { display: flex; gap: 30px; border-bottom: 1px solid var(--pg-line); padding-top: 12px; }
.eco-nav a { display: flex; align-items: center; min-height: 54px; border-bottom: 2px solid transparent; color: var(--pg-ink-2); font-size: 14px; text-decoration: none; }
.eco-nav a[aria-current] { color: var(--pg-link); border-color: var(--pg-link); font-weight: 600; }
.eco-intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding: 44px 0 32px; }
.eco-intro > div:first-child { max-width: 760px; }
.eco-breadcrumb { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; color: var(--pg-ink-2); font-size: 14px; }
.eco-breadcrumb a { text-decoration: none; }
.eco-lead { color: var(--pg-ink); font-size: inherit; max-width: 66ch; margin-bottom: 0; }
.eco-intro--overview { padding: 54px 0 44px; }
.eco-intro-note { position: relative; font-size: 14px; color: var(--pg-ink-2); padding: 5px 0 5px 23px; flex-shrink: 0; border-left: 2px solid var(--eco-pg); }
.eco-intro-note p { margin-bottom: 8px; }
.eco-signal { display: inline-block; height: 8px; width: 8px; border-radius: 50%; background: var(--eco-pg); flex: none; }
.eco-intro-note .eco-signal { display: none; }
.eco-snapshot { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--pg-ink-2); min-width: 195px; max-width: 250px; }
.eco-snapshot a { flex-basis: 100%; text-align: right; }
.eco-stories { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.eco-story { background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: var(--pg-radius); overflow: hidden; padding: 28px 30px 0; }
.eco-story-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--pg-ink-2); margin-bottom: 22px; }
.eco-source { color: var(--pg-link); font-weight: 500; }
.eco-story h2 { margin-bottom: 10px; }
.eco-story h2 a { color: inherit; text-decoration: none; }
.eco-story > p { max-width: 49ch; min-height: 50px; margin-bottom: 20px; }
.eco-story-stat { display: flex; align-items: center; gap: 20px; }
.eco-story-stat > strong { font-weight: 500; font-size: 52px; letter-spacing: -.055em; line-height: 1; color: var(--eco-pg); }
/* The inherited site sheet gives all bold text an important ink color. */
.eco-story-stat > strong, .eco-focus > div > strong, .eco-table .eco-pg-row > *, .eco-tooltip-pg b { color: var(--eco-pg) !important; }
.eco-table thead th { color: var(--pg-ink-2) !important; }
.eco-story-stat > strong span { font-size: 30px; }
.eco-story-stat p { font-size: 13px; color: var(--pg-ink-2); margin: 0; line-height: 1.5; }
.eco-mini-chart { width: 100%; height: 215px; margin-top: 18px; }
.eco-preview-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; font-size: 12px; color: var(--pg-ink-2); padding: 8px 0 25px; }
.eco-preview-key span::before { content: ''; display: inline-block; height: 3px; width: 16px; vertical-align: middle; margin-right: 7px; background: var(--eco-pg); }
.eco-preview-key .eco-key-mysql::before { background: var(--eco-mysql); }
.eco-preview-key .eco-key-sqlite::before { background: var(--eco-sqlite); }
.eco-preview-key .eco-key-sqlserver::before { background: var(--eco-sqlserver); }
.eco-story-link { min-height: 66px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--pg-line); text-decoration: none; font-size: 15px; font-weight: 500; }
.eco-story-link:hover { text-decoration: underline; }
.eco-reading { display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 48px; padding: 48px 0; margin-bottom: 12px; border-bottom: 1px solid var(--pg-line); }
.eco-reading p { margin-bottom: 10px; }
.eco-tools { padding-top: 26px; }
.eco-section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 20px; }
.eco-section-heading h2 { margin-bottom: 7px; }
.eco-section-heading p { margin-bottom: 0; max-width: 78ch; }
.eco-section-heading > a { white-space: nowrap; font-size: 14px; }
.eco-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
.eco-tool-grid a { border-top: 1px solid var(--pg-line); padding: 20px 0 24px; text-decoration: none; }
.eco-tool-grid strong { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 500; margin-bottom: 8px; }
.eco-tool-grid .pg-icon { width: 14px; height: 14px; }
.eco-tool-grid span { color: var(--pg-ink-2); font-size: 14px; line-height: 1.55; display: block; }
.eco-tool-grid a:hover strong { text-decoration: underline; }
.eco-focus { display: grid; grid-template-columns: 1.2fr 1fr 1.15fr 1fr; padding: 24px 0; border-block: 1px solid var(--pg-line); margin-bottom: 32px; }
.eco-focus > div { padding: 0 26px; border-left: 1px solid var(--pg-line); display: flex; flex-direction: column; justify-content: center; }
.eco-focus > div:first-child { padding-left: 0; border-left: 0; }
.eco-focus .eco-focus-name { flex-direction: row; align-items: center; justify-content: start; gap: 14px; }
.eco-focus-name div { display: flex; flex-direction: column; gap: 4px; }
.eco-focus-name strong { font-size: 18px; font-weight: 500; }
.eco-focus-name span { font-size: 13px; color: var(--pg-ink-2); }
.eco-stat-label { color: var(--pg-ink-2); font-size: 13px; line-height: 1.4; }
.eco-focus > div > strong { color: var(--eco-pg); font-size: 32px; line-height: 1.4; letter-spacing: -.025em; font-weight: 500; }
.eco-focus > div > strong span { font-size: 18px; }
.eco-focus small { color: var(--pg-ink-2); font-size: 12px; }
.eco-chart-panel { background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: var(--pg-radius); padding: 26px 28px 0; }
.eco-controls { display: flex; align-items: end; gap: 16px; margin: 0; padding: 16px 0 12px; border-top: 1px solid var(--pg-line); flex-wrap: wrap; }
.eco label { display: flex; flex-direction: column; gap: 6px; color: var(--pg-ink-2); font-size: 12px; margin: 0; }
.eco :is(select, input, button) { font-family: var(--pg-font); font-size: 14px; }
.eco :is(select, input) { color: var(--pg-ink); background-color: var(--pg-surface); border: 1px solid var(--pg-line-strong); border-radius: 6px; height: 44px; padding: 0 12px; max-width: 100%; }
.eco select { padding-right: 34px; min-width: 100px; }
.eco input::placeholder { color: var(--pg-ink-2); opacity: .9; }
.eco button { min-height: 44px; background: var(--pg-surface); color: var(--pg-link); border: 1px solid var(--pg-line-strong); padding: 0 14px; border-radius: 6px; cursor: pointer; }
.eco button:hover { background: var(--pg-wash); }
.eco button:disabled { opacity: .45; cursor: default; }
.eco button.eco-text-button { background: transparent; border: 0; padding: 0 3px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.eco-compare-add { margin-left: auto; }
.eco-compare-add > div { display: flex; gap: 8px; }
.eco-compare-add > label { margin-bottom: 6px; }
.eco-compare-add input { width: 215px; }
.eco-chart { width: 100%; height: auto; aspect-ratio: 4 / 3; min-height: 340px; display: none; }
.eco-ready .eco-chart { display: block; }
.eco-legend { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; }
.eco-legend button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 3px; font-size: 13px; border: 0; border-radius: 0; background: transparent; color: var(--pg-ink-2); }
.eco-legend button:hover { background: transparent; color: var(--pg-ink); }
.eco-legend button[aria-disabled="true"] { color: var(--eco-pg); font-weight: 600; cursor: default; }
.eco-legend button[aria-pressed="false"] { color: var(--pg-muted); text-decoration: line-through; }
.eco-legend button[aria-pressed="false"] .eco-swatch { opacity: .35; }
.eco-legend .eco-swatch { height: 3px; width: 17px; background: var(--series-color); }
.eco-chip-remove { margin-left: 1px; font-size: 13px; opacity: .6; }
.eco-chart-foot { border-top: 1px solid var(--pg-line); padding: 10px 0; display: flex; gap: 22px; align-items: center; justify-content: space-between; }
.eco-chart-foot p { color: var(--pg-ink-2); font-size: 12px; margin: 0; max-width: 87ch; }
.eco-chart-foot button { font-size: 12px; }
.eco-status { font-size: 13px; color: var(--pg-link); margin: 0; }
.eco-status:not(:empty) { padding: 0 0 15px; }
.eco-ranking-section { margin-top: 44px; }
.eco-period-control { display: flex; gap: 8px; align-items: center; }
.eco-period-control button { min-width: 44px; font-size: 24px; padding: 0; }
.eco-period-control select { min-width: 118px; }
.eco-ranking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.eco-bars-wrap, .eco-table-panel { min-width: 0; }
.eco-bars-wrap { background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: var(--pg-radius-sm); padding: 20px 24px 0; }
.eco-bars-wrap h3 { margin-bottom: 0; }
.eco-bars { height: 460px; width: 100%; }
.eco-table-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.eco-table-tools h3 { margin: 0; font-size: 16px; }
.eco-table-tools input { width: 195px; }
.eco-table-scroll { max-height: 430px; overflow: auto; border-block: 1px solid var(--pg-line); scrollbar-gutter: stable; }
.eco-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.eco-table thead { position: sticky; top: 0; z-index: 1; }
.eco-table thead th { background: var(--pg-canvas); color: var(--pg-ink-2); font-size: 12px; font-weight: 500; }
.eco-table :is(td, th) { padding: 4px 12px; border-bottom: 1px solid var(--pg-line); vertical-align: middle; }
.eco-table thead th { padding-block: 10px; }
.eco-table th { font-weight: 400; }
.eco-table tr > :first-child { width: 58px; color: var(--pg-ink-2); }
.eco-table tr > :last-child { text-align: right; }
.eco-table .eco-pg-row > * { background: var(--pg-wash-strong); color: var(--eco-pg); font-weight: 600; }
.eco-table button { border: 0; background: transparent; color: inherit; padding: 0; text-align: left; min-height: 30px; font-size: inherit; }
.eco-table button:hover { color: var(--pg-link-hover); text-decoration: underline; }
.eco-table-note { color: var(--pg-ink-2); font-size: 12px; margin: 12px 0 0; }
.eco-method { display: grid; grid-template-columns: 1fr 2fr; gap: 68px; margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--pg-line-strong); scroll-margin-top: 90px; }
.eco-method-body h3 { margin: 24px 0 8px; }
.eco-method-body h3:first-child { margin-top: 0; }
.eco-method-body p { margin-bottom: 16px; }
.eco-downloads { display: flex; flex-direction: column; align-items: start; gap: 14px; font-size: 14px; margin-top: 24px; }
.eco-attribution { border-top: 1px solid var(--pg-line); padding-top: 20px; }
.eco-provenance { font-size: 13px; color: var(--pg-ink-2); }
.eco-provenance summary { cursor: pointer; min-height: 44px; }
.eco-provenance ul { padding-left: 18px; }
.eco-provenance li { margin-bottom: 12px; }
.eco-provenance code { display: block; font-size: 11px; overflow-wrap: anywhere; color: var(--pg-ink-2); margin-top: 5px; }
.eco-tooltip { font: 13px/1.7 var(--pg-font); }
.eco-tooltip strong { display: block; padding-bottom: 4px; }
.eco-tooltip-row { display: flex; justify-content: space-between; gap: 26px; }
.eco-tooltip-row b { font-weight: 500; }
.eco-tooltip-pg { color: var(--eco-pg); }
/* Survey readers: a complete annual distribution, then its historical context. */
.eco-survey-nav { display: flex; gap: 36px; padding: 0 0 22px; border-bottom: 1px solid var(--pg-line-strong); }
.eco-survey-nav a { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding-top: 8px; text-decoration: none; }
.eco-survey-nav strong { color: var(--pg-link) !important; font-size: 17px; font-weight: 600; }
.eco-survey-nav span { font-size: 13px; color: var(--pg-ink-2); }
.eco-survey-nav a:hover strong { text-decoration: underline; text-underline-offset: 5px; }
.eco-survey-section { --survey-rank: 20px; --survey-name: 170px; --survey-gap: 10px; --survey-value: 60px; --survey-bar: #8196a8; padding-top: 30px; scroll-margin-top: 90px; }
[data-theme="dark"] .eco-survey-section { --survey-bar: #687e92; }
.eco-survey-section + .eco-survey-section { margin-top: 44px; border-top: 1px solid var(--pg-line-strong); }
.eco-survey-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.eco-survey-heading h2 { margin-bottom: 10px; }
.eco-survey-heading h2 span { font-size: 1.2rem; font-weight: 400; color: var(--pg-ink-2); margin-left: 10px; }
.eco-survey-heading p { margin-bottom: 0; max-width: 75ch; }
.eco-survey-heading > a { font-size: 14px; white-space: nowrap; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.eco-survey-snapshot { padding: 0 0 16px; background: transparent; border: 0; border-radius: 0; }
.eco-survey-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.eco-survey-controls { display: flex; align-items: center; gap: 24px; }
.eco-survey-years { display: flex; align-items: center; gap: 2px; }
.eco-survey-years a { display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; border: 0; color: var(--pg-ink-2); text-decoration: none; }
.eco-survey-years a:hover { color: var(--pg-link); }
.eco-survey-years a[aria-disabled="true"] { color: var(--pg-muted); opacity: .4; cursor: default; }
.eco-survey-year { display: inline-flex; align-items: center; justify-content: center; min-width: 4ch; height: 32px; font-size: 18px; font-weight: 600; line-height: 1; color: var(--pg-heading); }
.eco-survey-audience { display: flex; align-items: center; gap: 12px; }
.eco-survey-audience a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 2px; border-bottom: 2px solid transparent; color: var(--pg-ink-2); font-size: 13px; text-decoration: none; }
.eco-survey-audience a[aria-current] { color: var(--pg-ink); border-color: var(--pg-ink); font-weight: 600; }
.eco-survey-audience a:hover { color: var(--pg-ink); }
.eco-survey-pg { display: flex; align-items: baseline; gap: 12px; margin: 0; color: var(--eco-pg); white-space: nowrap; font-size: 14px; }
.eco-survey-pg strong { color: var(--eco-pg) !important; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.eco-survey-pg-rank { font-size: 13px; }
.eco-survey-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; color: var(--pg-ink-2); font-size: 12px; margin: 10px 0; }
.eco-survey-caption p { font-size: 13px; margin: 0; }
.eco-survey-axis { display: grid; grid-template-columns: calc(var(--survey-rank) + var(--survey-name) + var(--survey-gap) * 2) minmax(0, 1fr) calc(var(--survey-value) + var(--survey-gap)); align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--pg-line); color: var(--pg-ink-2); font-size: 12px; }
.eco-survey-axis > div { display: flex; justify-content: space-between; font-size: 11px; }
.eco-survey-axis > span:last-child { text-align: right; }
.eco .eco-survey-bars { list-style: none; padding: 0; margin: 0; }
.eco .eco-survey-bars li { list-style: none; padding: 0; margin: 0; }
.eco button.eco-survey-bar { display: grid; grid-template-columns: var(--survey-rank) var(--survey-name) minmax(0, 1fr) var(--survey-value); gap: var(--survey-gap); align-items: center; width: 100%; min-height: 30px; padding: 3px 8px; border: 0; border-radius: 0; color: var(--pg-ink); background: transparent; text-align: left; line-height: 1.4; }
.eco button.eco-survey-bar:focus-visible { outline-offset: -2px; }
.eco button.eco-survey-bar:disabled { opacity: 1; cursor: default; }
.eco button.eco-survey-bar:hover:not(:disabled) { background: var(--pg-wash); }
.eco-survey-rank { font-size: 12px; color: var(--pg-ink-2); }
.eco-survey-name { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.eco-survey-value { font-size: 13px; text-align: right; }
.eco-survey-track { display: flex; align-items: center; min-width: 0; height: 22px; background: repeating-linear-gradient(to right, var(--pg-line) 0, var(--pg-line) 1px, transparent 1px, transparent 25%); border-right: 1px solid var(--pg-line); }
.eco-survey-track svg { display: block; width: 100%; height: 16px; }
.eco-survey-fill { fill: var(--survey-bar); }
.eco button.eco-survey-bar--pg { background: var(--pg-wash-strong); color: var(--eco-pg); font-weight: 600; box-shadow: inset 3px 0 var(--eco-pg); }
.eco-survey-bar--pg .eco-survey-rank { color: var(--eco-pg); }
.eco-survey-bar--pg .eco-survey-fill { fill: var(--eco-pg); }
.eco-survey-bar[aria-pressed="true"]:not(.eco-survey-bar--pg) .eco-survey-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pg-line-strong); }
.eco-survey-hint { color: var(--pg-ink-2); font-size: 12px; margin: 10px 8px 0; }
.eco-survey-history { padding-top: 30px; scroll-margin-top: 90px; }
.eco-survey-history .eco-section-heading { align-items: start; margin-bottom: 6px; }
.eco-survey-history h3 { margin-bottom: 12px; }
.eco-survey-history .eco-section-heading p { max-width: 82ch; }
.eco-survey-history .eco-status { margin-top: 10px; }
@media (max-width: 1000px) {
  .eco-survey-section { --survey-name: 165px; --survey-gap: 10px; }
}
@media (max-width: 760px) {
  .eco-survey-nav { gap: 24px; }
  .eco-survey-nav a { display: block; }
  .eco-survey-nav strong, .eco-survey-nav span { display: block; }
  .eco-survey-nav span { margin-top: 4px; }
  .eco-survey-section { --survey-rank: 19px; --survey-name: 120px; --survey-gap: 8px; --survey-value: 55px; padding-top: 28px; }
  .eco-survey-heading { gap: 12px; align-items: start; }
  .eco-survey-heading h2 span { font-size: 18px; margin-left: 6px; }
  .eco-survey-heading > a { font-size: 12px; }
  .eco-survey-snapshot { padding: 4px 0 14px; }
  .eco-survey-toolbar { padding-inline: 4px; }
  .eco-survey-pg { gap: 10px; }
  .eco-survey-caption { display: block; padding-inline: 4px; margin-block: 8px; }
  .eco-survey-caption p { margin-bottom: 2px; }
  .eco-survey-axis { padding-inline: 4px; }
  .eco button.eco-survey-bar { padding-inline: 4px; }
  .eco-survey-name, .eco-survey-value { font-size: 12px; }
  .eco-survey-history .eco-section-heading { flex-direction: column; gap: 4px; }
}
@media (max-width: 480px) {
  .eco-survey-section { --survey-name: 96px; --survey-gap: 6px; --survey-value: 49px; }
  .eco-survey-axis > div span:nth-child(even) { visibility: hidden; }
  .eco-survey-heading { flex-wrap: wrap; gap: 2px; }
  .eco-survey-heading > a { min-height: 36px; }
}
@media (max-width: 1100px) {
  .eco-intro { gap: 24px; }
  .eco-intro-note { display: none; }
  .eco-controls { gap: 12px; }
  .eco-compare-add { margin-left: 0; }
  .eco-reading { gap: 28px; }
  .eco-focus > div { padding-inline: 18px; }
  .eco-focus-name img { width: 28px; height: 28px; }
}
@media (max-width: 760px) {
  .eco { padding-inline: 20px; padding-bottom: 48px; }
  .eco-nav { gap: 0 24px; flex-wrap: wrap; padding-top: 8px; }
  .eco-nav a { min-height: 45px; font-size: 13px; }
  .eco-intro { display: block; padding: 30px 0 26px; }
  .eco-intro--overview { padding-top: 35px; }
  .eco-wide { display: none; }
  .eco-snapshot { margin-top: 20px; justify-content: start; max-width: none; }
  .eco-snapshot a { flex-basis: auto; margin-left: auto; }
  .eco-stories { grid-template-columns: 1fr; gap: 22px; }
  .eco-story { padding-inline: 22px; }
  .eco-story > p { min-height: 0; }
  .eco-reading { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
  .eco-reading h2 br { display: none; }
  .eco-tool-grid { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .eco-tools .eco-section-heading { align-items: start; flex-direction: column; gap: 8px; }
  .eco-focus { grid-template-columns: 1fr 1fr; gap: 22px 0; margin-bottom: 24px; padding: 20px 0; }
  .eco-focus > div { padding-inline: 16px; }
  .eco-focus > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .eco-focus > div > strong { font-size: 28px; }
  .eco-focus-name strong { font-size: 17px; }
  .eco-focus-name img { display: none; }
  .eco-chart-panel { padding: 20px 16px 0; }
  .eco-section-heading { gap: 10px; }
  .eco-section-heading > div { min-width: 0; }
  .eco-section-heading .eco-text-button { font-size: 12px; }
  .eco-controls { gap: 12px; }
  .eco-controls > label:first-child { flex-basis: 100%; }
  .eco-controls > label:first-child select { width: 100%; }
  .eco-controls > label { flex: 1; min-width: 0; }
  .eco-compare-add { width: 100%; }
  .eco-compare-add > div { width: 100%; }
  .eco-compare-add input { flex: 1; min-width: 0; width: auto; }
  .eco-legend { gap: 0 16px; }
  .eco-legend button { min-height: 44px; padding: 0 3px; }
  .eco-chart-foot { display: block; }
  .eco-chart-foot p { font-size: 12px; }
  .eco-ranking-section { margin-top: 32px; }
  .eco-ranking-section > .eco-section-heading { flex-direction: column; align-items: start; gap: 16px; }
  .eco-ranking-grid { grid-template-columns: 1fr; gap: 28px; }
  .eco-bars-wrap { padding: 20px 14px 0; }
  .eco-bars { height: 415px; }
  .eco-table-tools input { width: 170px; }
  .eco-method { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; margin-top: 36px; }
  .eco-downloads { flex-direction: row; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
}
@media (max-width: 390px) {
  .eco { padding-inline: 14px; }
  .eco-nav { column-gap: 18px; }
  .eco-tool-grid { grid-template-columns: 1fr; }
  .eco-story-stat { gap: 14px; }
}
@media print {
  .eco-controls, .eco-period-control, .eco-legend, .eco-text-button, .eco-nav { display: none !important; }
  .eco-table-scroll { max-height: none; overflow: visible; }
  .eco { max-width: none; }
  .eco-chart-panel, .eco-story { break-inside: avoid; }
}

/* The popularity page opens directly on one figure. */
.eco-popularity-intro { padding-block: 44px 20px; }
.eco-popularity-intro > div:first-child { max-width: none; }
.eco-popularity-figure { margin: 0; }
.eco-figure-footer { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; padding-block: 8px; }
.eco-figure-footer .eco-legend { flex: 1 1 450px; margin: 0; }
.eco button.eco-download-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-left: auto; padding: 0 4px; border: 0; border-radius: 0; background: transparent; color: var(--pg-ink-2); font-size: 12px; white-space: nowrap; }
.eco button.eco-download-button:hover { color: var(--pg-link); text-decoration: underline; text-underline-offset: 4px; }
.eco-download-button svg { flex: none; }
.eco .eco-plot-note, .eco .eco-comparability { font-size: 14px; line-height: 1.7; color: var(--pg-ink-2); max-width: 96ch; margin: 12px 0 26px; }
.eco .eco-plot-note:empty { display: none; }
.eco-data-details { border-top: 1px solid var(--pg-line); }
.eco-data-details > summary { min-height: 50px; padding-block: 14px; font-size: 14px; font-weight: 500; color: var(--pg-ink-2); cursor: pointer; }
.eco-data-details > summary:hover { color: var(--pg-ink); }
.eco-data-details .eco-controls { border-top: 0; }
.eco-data-details .eco-ranking-section { margin-block: 24px; }
.eco-data-details .eco-method { margin: 0; padding-block: 20px; border-top: 0; }
@media (max-width: 760px) {
  .eco-popularity-intro { padding-block: 30px 16px; }
  .eco-figure-footer { column-gap: 16px; }
}
@media print {
  .eco-download-button { display: none !important; }
}