.modern-subpage #content.em-page {
  --eq-accent: #2d6858;
  --em-fill: #3d806c;
  --em-grid: #a5beb3;
  --em-track: #dce8e2;
  --em-error: #9b333b;
}
.em-page .em-toolbar,
.em-page .em-summary-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}
.em-page .em-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.em-page .em-chips,
.em-page .em-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 18px 0;
}
.em-page .em-chips li,
.em-page .em-shortcuts a {
  list-style: none;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid var(--eq-line);
  border-radius: 6px;
  background: var(--eq-soft);
  color: var(--eq-ink);
  font-size: 13px;
}
.em-page .em-shortcuts a { min-height: 44px; display: inline-flex; align-items: center; }
.em-page :is(#em-intro, #em-question-heading, #em-result-heading, .eq-section) { scroll-margin-top: 88px; }
.em-page .em-small-legend { min-height: 0; font-size: 17px; }
.em-page .em-panel, .em-page .em-result-head {
  padding: 16px;
  border: 1px solid var(--eq-line);
  border-radius: 7px;
  background: var(--eq-soft);
  margin-block: 12px;
}
.em-page .em-result-head { padding: 24px 18px; border-top: 4px solid var(--eq-accent); }
.em-page .em-overall output {
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 750;
  color: var(--eq-accent);
  font-variant-numeric: tabular-nums;
}
.em-page .em-panel h3 { margin-top: 0; }
.em-page .em-status { min-height: 24px; }
.modern-subpage #content.em-page .em-status { color: var(--eq-accent); font-size: 14px; }
.modern-subpage #content.em-page .em-error { color: var(--em-error); }
.em-page .em-domain-info { border-top: 1px solid var(--eq-line); padding-block: 12px; }
.em-page .em-domain-info h4 { font-size: 17px; color: var(--eq-ink); margin-bottom: 10px; }
.em-page .em-definitions dt { font-weight: 700; margin-top: 12px; color: var(--eq-ink); }
.em-page .em-definitions dd { margin: 4px 0 12px; color: var(--eq-muted); overflow-wrap: anywhere; }
.em-page .eq-bar { background: var(--em-track); }
.em-page .eq-bar span { background: var(--em-fill); }
.em-page .em-radar { max-width: 600px; margin: 0 auto; }
.em-page .em-radar svg { display: block; width: 100%; height: auto; }
.em-page .em-radar text { fill: var(--eq-ink); font: 20px sans-serif; }
.em-page .em-radar .em-scale { font-size: 15px; fill: var(--eq-muted); }
.em-page .em-gridline { fill: none; stroke: var(--em-grid); stroke-width: 1.1; }
.em-page .em-profile { fill: var(--em-fill); fill-opacity: .18; stroke: var(--em-fill); stroke-width: 3; }
.em-page .em-dot { fill: var(--em-fill); }
.em-page .em-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.em-page .em-table caption { text-align: left; color: var(--eq-muted); margin: 8px 0; }
.em-page .em-table :is(th, td) { padding: 8px 4px; border-bottom: 1px solid var(--eq-line); color: var(--eq-ink); overflow-wrap: anywhere; }
.em-page .em-table th:first-child { width: 48%; }
.em-page .em-check { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--eq-ink); cursor: pointer; }
.modern-subpage #content.em-page input[type=checkbox] {
  appearance: auto; display: block; position: static; float: none; opacity: 1;
  pointer-events: auto; width: 19px; height: 19px; margin: 0; flex: 0 0 19px; accent-color: #267c7b;
}
.modern-subpage #content.em-page :is(select, textarea) {
  display: block;
  width: 100%;
  min-height: 44px;
  height: auto;
  color: var(--eq-ink);
  background: var(--eq-panel);
  border: 1px solid var(--eq-line);
  border-radius: 6px;
  padding: 8px 12px;
  font: inherit;
  margin: 6px 0 12px;
}
.modern-subpage #content.em-page textarea { min-height: 78px; resize: vertical; }
.em-page :is(a, button, input, select, textarea, summary, legend):focus-visible {
  outline: 3px solid var(--eq-accent);
  outline-offset: 3px;
}
.modern-subpage #content.em-page.em-dark {
  color-scheme: dark;
  --eq-panel: #182c2b;
  --eq-soft: #213b37;
  --eq-ink: #e9f5f0;
  --eq-muted: #c1d8d0;
  --eq-line: #4f7167;
  --eq-accent: #a5e5ce;
  --em-fill: #8ed7bd;
  --em-track: #36564e;
  --em-grid: #5e8a7c;
  --em-error: #ffb7bd;
  background: var(--eq-panel);
}
.modern-subpage #content.em-page.em-dark :is(h2, h3, h4, strong, label) { color: var(--eq-ink); }
.modern-subpage #content.em-page.em-dark :is(.eq-notice, .eq-options label:has(input:checked)) { background: #294d43; }
@media (max-width: 600px) {
  .em-page .em-toolbar, .em-page .em-summary-grid { grid-template-columns: 1fr; }
  .em-page #em-start { width: 100%; }
  .em-page .eq-domain-heading { flex-wrap: wrap; gap: 3px 8px; }
  .em-page .em-radar text { font-size: 23px; }
  .em-page .em-radar .em-scale { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .em-page *, .em-page *::before, .em-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.modern-subpage #content.em-page :is(input[type=text], input[type=date]) {
  display: block; width: 100%; min-height: 44px; height: auto; box-sizing: border-box;
  color: var(--eq-ink); background: var(--eq-panel); border: 1px solid var(--eq-line);
  border-radius: 6px; padding: 8px 12px; font: inherit; margin: 6px 0 12px;
}
.em-page .em-panel h4 { color: var(--eq-ink); }
.em-page #em-talk-copy-fallback textarea { min-height: 220px; }

.em-page .em-auxiliary { border-inline-start: 4px solid #727c9d; }
.em-page .em-auxiliary .eq-bar span { background: #727c9d; }
.em-page .em-table th:first-child { width: 37%; }
.em-page .em-table { font-size: 13px; }
.em-page .em-panel h3 { line-height: 1.6; }
.modern-subpage #content.em-page button:not(.eq-primary):hover {
  color: var(--eq-ink);
  background: var(--eq-soft);
}
