/* page style: ipa */
body[data-site-route='/ipa/'] {
  min-height: 100dvh;
}

body[data-site-route='/ipa/'] > ipa-chart {
  display: block;
  max-width: none;
  min-height: 100dvh;
  width: 100%;
}

body[data-site-route='/ipa/'] ipa-chart :is(.page,.tool-page) {
  max-width: none;
  width: 100%;
}

body[data-site-route='/ipa/'] {
  background: var(--bg);
  overflow: hidden;
}

body[data-site-route='/ipa/'] .ipa-chart-shell {
  min-width: 0;
  padding: 0;
}

body[data-site-route='/ipa/'] .chart-host {
  background: var(--surface);
  display: block;
  min-height: 100%;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(10px, 1.2vw, 16px);
  scrollbar-color: color-mix(in oklab, var(--fg), transparent 70%) transparent;
  width: 100%;
}

body[data-site-route='/ipa/'] .chart-host[data-loading='true'] {
  align-items: center;
  color: var(--muted);
  display: grid;
  font-size: var(--text-size);
  min-height: 420px;
  place-items: center;
}

body[data-site-route='/ipa/'] .chart-host svg,
body[data-site-route='/ipa/'] .chart-host img {
  display: block;
  height: auto;
  min-width: 1040px;
  width: 100%;
}

body[data-site-route='/ipa/'] .chart-host .background {
  fill: transparent !important;
}

body[data-site-route='/ipa/'] .chart-host .panel {
  fill: var(--surface) !important;
  stroke: var(--line-strong) !important;
}

body[data-site-route='/ipa/'] .chart-host .header-cell {
  fill: color-mix(in oklab, var(--surface), var(--fg) 6%) !important;
}

body[data-site-route='/ipa/'] .chart-host .row-label-cell {
  fill: color-mix(in oklab, var(--surface), var(--fg) 3%) !important;
}

body[data-site-route='/ipa/'] .chart-host .grid,
body[data-site-route='/ipa/'] .chart-host .vowel-grid {
  stroke: var(--line-strong) !important;
}

body[data-site-route='/ipa/'] .chart-host text {
  fill: var(--fg) !important;
  font-family: var(--sans) !important;
}

body[data-site-route='/ipa/'] .chart-host .subtitle,
body[data-site-route='/ipa/'] .chart-host .subtext,
body[data-site-route='/ipa/'] .chart-host .row-label,
body[data-site-route='/ipa/'] .chart-host .body-text {
  fill: var(--muted) !important;
}

body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound {
  cursor: pointer;
}

body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound .cell,
body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound .symbol-hit {
  fill: color-mix(in oklab, var(--accent), transparent 94%) !important;
}

body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound:hover .cell,
body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound:focus .cell,
body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound.is-active .cell,
body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound:hover .symbol-hit,
body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound:focus .symbol-hit,
body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound.is-active .symbol-hit {
  fill: color-mix(in oklab, var(--accent), transparent 86%) !important;
}

body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound:hover .ipa-symbol,
body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound:focus .ipa-symbol,
body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound.is-active .ipa-symbol,
body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound:hover .ipa-symbol-small,
body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound:focus .ipa-symbol-small,
body[data-site-route='/ipa/'] .chart-host .chart-sound-cell.has-sound.is-active .ipa-symbol-small {
  fill: var(--accent) !important;
}

@media (max-width: 760px) {
  body[data-site-route='/ipa/'] .chart-host {
    padding: 10px;
    width: 100%;
  }

  body[data-site-route='/ipa/'] .chart-host svg,
body[data-site-route='/ipa/'] .chart-host img {
    min-width: 980px;
  }
}