@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

/* Shared visual system for figures embedded in the user-awareness article. */
:root {
  --ua-font: "Open Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ua-title-size: 24px;
  --ua-title-weight: 600;
  --ua-subtitle-size: 14px;
  --ua-legend-size: 12px;
  --ua-pad-x: 20px;
  --ua-pad-top: 22px;
  --ua-pad-bottom: 20px;
}

html,
body {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  overflow-x: hidden;
  font-family: var(--ua-font) !important;
}

button,
input,
select,
textarea,
svg text {
  font-family: inherit !important;
}

main {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: var(--ua-pad-top) var(--ua-pad-x) var(--ua-pad-bottom) !important;
}

h1 {
  margin: 0 !important;
  font-size: var(--ua-title-size) !important;
  font-weight: var(--ua-title-weight) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em !important;
  overflow-wrap: anywhere;
}

h2 {
  font-size: clamp(17px, 1.9vw, 21px) !important;
  line-height: 1.24 !important;
  overflow-wrap: anywhere;
}

.subtitle,
p.deck {
  max-width: 100%;
  margin-top: 6px !important;
  margin-bottom: 12px !important;
  font-size: var(--ua-subtitle-size) !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  white-space: normal !important;
}

.viewport {
  width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  scrollbar-color: #b8bec8 transparent;
  scrollbar-width: thin;
}

html[data-figure-layout="recall"] .viewport {
  overflow-x: hidden !important;
}

html[data-figure-layout="overview"] .viewport > svg {
  width: 100% !important;
  max-width: 1240px !important;
  min-width: 0 !important;
}

html[data-figure-layout="inspector"] main {
  max-width: 1050px !important;
  margin: 0 auto;
}

html[data-figure-layout="inspector"] h2 {
  margin: 20px 0 9px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

html[data-figure-layout="inspector"] .note {
  margin: 6px 0 14px;
  font-size: 13px !important;
  line-height: 1.45;
}

html[data-figure-layout="sweep"] .legend {
  font-size: 12px !important;
}

html[data-figure-name="family_sweep_trend.html"] .row-title {
  font-size: 24px !important;
  font-weight: 500 !important;
}

html[data-figure-name="family_sweep_trend.html"] .row-detail {
  font-size: 18.5px !important;
}

.workspace {
  width: 100% !important;
  min-width: 0 !important;
}

.viewport > svg,
.workspace > svg,
.workspace svg {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

.legend,
.marker-key {
  max-width: 100%;
  gap: 6px 16px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
  font-size: var(--ua-legend-size) !important;
  line-height: 1.3 !important;
}

.legend-item,
.marker-key > * {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.cross-model-html-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px 18px !important;
  margin: 8px 0 5px !important;
  font-size: 13px !important;
}

.cross-model-html-legend button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #3a3a3a;
  font: inherit;
  cursor: pointer;
}

.cross-model-html-legend button[aria-pressed="false"] {
  opacity: .42;
  text-decoration: line-through;
}

.cross-model-html-legend i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
}

html[data-figure-name="cross_model_scatter.html"] .release-date-fit {
  stroke: #777;
  stroke-width: 1.7px;
  stroke-dasharray: 6 4;
  opacity: .82;
  pointer-events: none;
}

/* Compensate for this chart's wider viewBox so its rendered panel headings
   match the release-date chart, not merely their nominal SVG font size. */
html[data-figure-name="family_sweep_awareness_vs_delta.html"] .panel-title {
  font-size: 23.21px;
}

html[data-figure-name="family_sweep_awareness_vs_delta.html"] .axis-label {
  font-size: 18px;
}

html[data-figure-name="family_sweep_awareness_vs_delta.html"] .tick {
  font-size: 17.5px;
}

/* Extreme-name callouts are supporting annotations, not a second headline. */
.extremes {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.extreme-head {
  font-size: 10.5px !important;
  letter-spacing: 0.015em;
}

.extreme-pair {
  min-width: 0 !important;
}

.extreme {
  overflow: hidden;
  text-overflow: ellipsis;
}

.figure-pan-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  /* The preceding legend owns the gap above; a negative top margin tucks the
     hint under it so it does not hang in the whitespace before the chart. */
  margin: -8px 0 6px;
  color: #777;
  font-size: 12px;
  line-height: 1.2;
}

.figure-pan-hint::before {
  content: "↔";
  font-size: 14px;
}

.index {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

@media (min-width: 901px) {
  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) h1,
  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) .heading,
  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) .subtitle {
    text-align: center !important;
  }

  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) .subtitle {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) .legend,
  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) .marker-key,
  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) .legend-pair {
    justify-content: center !important;
  }
}

/* At article-column width, HTML legends otherwise stay at their desktop size
   while the SVG below them scales down. Keep the type hierarchy proportional;
   the full-size dialog naturally falls back to the larger figure defaults. */
@media (max-width: 900px) {
  :root {
    --ua-title-size: 19px;
    --ua-subtitle-size: 12.5px;
    --ua-legend-size: 10.5px;
    --ua-pad-x: 16px;
    --ua-pad-top: 18px;
    --ua-pad-bottom: 16px;
  }

  h1 {
    line-height: 1.25 !important;
  }

  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) h1,
  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) .heading,
  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) .subtitle {
    text-align: left !important;
  }

  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) .legend,
  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) .marker-key,
  html:not([data-figure-layout="inspector"]):not([data-figure-layout="robustness"]) .legend-pair {
    justify-content: flex-start !important;
  }

  h2 {
    font-size: clamp(15.5px, 2.55vw, 18px) !important;
  }

  .subtitle,
  p.deck {
    margin-top: 5px !important;
    margin-bottom: 11px !important;
    line-height: 1.4 !important;
  }

  .legend,
  .marker-key {
    gap: 5px 11px !important;
    line-height: 1.25;
  }

  .legend .swatch,
  .marker-key .marker-shape {
    transform: scale(.82);
    transform-origin: center;
  }

  .note {
    font-size: 10.5px !important;
    line-height: 1.35;
  }

  .extremes {
    font-size: 10.5px !important;
    overflow: hidden;
  }

  .extreme-head-pair {
    flex: 0 0 auto !important;
    margin-right: 18px;
  }

  .extreme-pairs {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    overflow: hidden;
  }

  .extreme-pair {
    flex: 0 0 auto !important;
    text-align: left !important;
  }

  .extreme-head {
    font-size: 9.5px !important;
    line-height: 13px !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  .extreme {
    line-height: 13px !important;
    text-align: left !important;
  }

  .extreme-gutter {
    display: none;
  }

  /* Five-column recall charts need their native horizontal breathing room.
     Panning preserves legible labels without letting the iframe escape the
     article column. */
  html[data-host-viewport="mobile"][data-figure-layout="compact"] .viewport > svg,
  html[data-host-viewport="mobile"][data-figure-layout="compact"] .viewport > #chart {
    width: 820px !important;
    max-width: none !important;
    min-width: 820px !important;
  }

  /* Keep labels readable while exposing roughly four of the six panels at
     typical article-column widths. */
  html[data-figure-layout="overview"] .viewport > svg,
  html[data-figure-layout="overview"] .viewport > #chart {
    width: 1160px !important;
    max-width: none !important;
    min-width: 1160px !important;
  }

  html[data-host-viewport="mobile"][data-figure-layout="detail"] .workspace > svg,
  html[data-host-viewport="mobile"][data-figure-layout="detail"] .workspace svg {
    width: 760px !important;
    max-width: none !important;
    min-width: 760px !important;
  }

  /* Preserve the existing mobile-only pan treatment; article-column embeds on
     desktop continue to fit the complete chart without horizontal scrolling. */
  html[data-host-viewport="mobile"][data-figure-layout="sweep"] .viewport > #chart {
    width: 960px !important;
    max-width: none !important;
    min-width: 960px !important;
  }

  .cross-model-html-legend {
    justify-content: flex-start;
    gap: 5px 14px !important;
    font-size: 12.5px !important;
  }

  html[data-figure-layout="sweep"] .legend {
    font-size: 11.5px !important;
  }

  html[data-figure-layout="robustness"] .legend {
    font-size: 11.5px !important;
  }

  html[data-figure-layout="robustness"] .label {
    font-size: 12px !important;
  }

  html[data-figure-layout="robustness"] .value,
  html[data-figure-layout="robustness"] .axis-label,
  html[data-figure-layout="robustness"] .ticks {
    font-size: 11px !important;
  }

  html[data-figure-layout="robustness"] .chart-title {
    font-size: 13.5px !important;
  }

  html[data-figure-layout="robustness"] .chart-subtitle {
    font-size: 11.5px !important;
  }

  html[data-figure-layout="robustness"] .tab {
    font-size: 12.5px !important;
  }

  html[data-figure-layout="inspector"] h2 {
    font-size: 16px !important;
  }

  html[data-figure-layout="inspector"] .note {
    font-size: 12.5px !important;
  }
}

@media (max-width: 520px) {
  :root {
    --ua-title-size: 17px;
    --ua-subtitle-size: 11px;
    --ua-legend-size: 10px;
    --ua-pad-x: 12px;
    --ua-pad-top: 14px;
    --ua-pad-bottom: 12px;
  }

  .legend,
  .marker-key {
    gap: 4px 9px !important;
  }

  .extremes {
    font-size: 10px !important;
  }

  /* Keep titles, legends, and extrema at the viewport width; only the dense
     SVG itself pans. This prevents supporting text from being clipped. */
  html[data-host-viewport="mobile"][data-figure-layout="detail"] .workspace {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-host-viewport="mobile"][data-figure-layout="detail"] .workspace > svg,
  html[data-host-viewport="mobile"][data-figure-layout="detail"] .workspace svg {
    width: 720px !important;
    max-width: none !important;
    min-width: 720px !important;
  }

  html[data-host-viewport="mobile"][data-figure-layout="sweep"] .viewport > #chart {
    width: 820px !important;
    max-width: none !important;
    min-width: 820px !important;
  }

  html[data-figure-layout="robustness"] .label {
    font-size: 11.5px !important;
  }

  html[data-figure-layout="robustness"] .value,
  html[data-figure-layout="robustness"] .axis-label,
  html[data-figure-layout="robustness"] .ticks {
    font-size: 10.5px !important;
  }

  html[data-figure-layout="overview"] .viewport > svg,
  html[data-figure-layout="overview"] .viewport > #chart {
    width: 880px !important;
    max-width: none !important;
    min-width: 880px !important;
  }

  html[data-figure-layout="inspector"] .note {
    font-size: 12px !important;
  }
}

/* Result-atlas charts should shrink with the article column on phones. Other
   dense detail figures retain their deliberate pan treatment above. */
@media (max-width: 900px) {
  html[data-host-viewport="mobile"][data-detail-fit="true"] .workspace > svg,
  html[data-host-viewport="mobile"][data-detail-fit="true"] .workspace svg {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}