/* Styles for the interactive graphs: the web copy of Lato, the hover card,
   the panel that opens on click, the collapsed sections under a plot, and
   the dark theme. Colors are variables with the light values as fallbacks;
   graph.js marks a widget, its panels and the page's hover cards with
   .ggx-dark or .ggx-dark-tips when the page is dark. */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('lato-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('lato-bold.woff2') format('woff2');
}

/* The dark palette. The same neutrals are listed in dark_ink in R/graph.R. */
.ggx-dark,
.ggx-dark-tips {
  --ggx-page: #161C1C;
  --ggx-card: #1D2424;
  --ggx-title: #EEF2F2;
  --ggx-text: #DDE4E4;
  --ggx-muted: #9AA6A6;
  --ggx-rule: #334040;
  --ggx-faint: #232C2C;
  --ggx-line: #2A3434;
  --ggx-hover: #EEF2F2;
  --ggx-link: #4CC2BE;
  --ggx-axis: #7D8A8A;
}

/* In a dark widget the neutrals the plot was drawn with take their dark
   counterparts. :where() keeps these rules weaker than the hover styles. */
:where(.ggx-dark svg) [fill="#FFFFFF"] { fill: #161C1C; }
:where(.ggx-dark svg) [fill="#1F1F1F"] { fill: #EEF2F2; }
:where(.ggx-dark svg) [fill="#2C2C2C"] { fill: #DDE4E4; }
:where(.ggx-dark svg) [fill="#6B6B6B"] { fill: #9AA6A6; }
:where(.ggx-dark svg) [fill="#8A8A8A"] { fill: #7D8A8A; }
:where(.ggx-dark svg) [fill="#9A9A9A"] { fill: #637070; }
:where(.ggx-dark svg) [fill="#EEF2F2"] { fill: #232C2C; }
:where(.ggx-dark svg) [fill="#D6DCDC"] { fill: #3A4747; }
:where(.ggx-dark svg) [fill="#E4E9E9"] { fill: #253030; }
:where(.ggx-dark svg) [stroke="#FFFFFF"] { stroke: #161C1C; }
:where(.ggx-dark svg) [stroke="#1F1F1F"] { stroke: #EEF2F2; }
:where(.ggx-dark svg) [stroke="#2C2C2C"] { stroke: #DDE4E4; }
:where(.ggx-dark svg) [stroke="#6B6B6B"] { stroke: #9AA6A6; }
:where(.ggx-dark svg) [stroke="#8A8A8A"] { stroke: #7D8A8A; }
:where(.ggx-dark svg) [stroke="#9A9A9A"] { stroke: #637070; }
:where(.ggx-dark svg) [stroke="#EEF2F2"] { stroke: #232C2C; }
:where(.ggx-dark svg) [stroke="#D6DCDC"] { stroke: #3A4747; }

.ggx-tip-title {
  font-weight: 700;
  color: var(--ggx-title, #1F1F1F);
}

.ggx-tip-sub,
.ggx-panel .ggx-sub {
  color: var(--ggx-muted, #6B6B6B);
  font-size: 0.9em;
}

.ggx-tip-body {
  max-width: 300px;
  margin-top: 4px;
}

.ggx-tip-hint {
  margin-top: 6px;
  color: var(--ggx-muted, #6B6B6B);
  font-size: 0.85em;
}

.ggx-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}

.ggx-tip-row span:first-child {
  color: var(--ggx-muted, #6B6B6B);
}

.ggx-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
}

.ggx-share {
  height: 6px;
  margin: 5px 0 2px;
  border-radius: 3px;
  background: var(--ggx-faint, #EEF2F2);
  overflow: hidden;
}

.ggx-share i {
  display: block;
  height: 100%;
  background: #22928F;
}

/* The click panel and the collapsed sections share one card style. */
.ggx-panel,
.ggx-details {
  position: relative;
  box-sizing: border-box;
  margin: 12px 0 4px;
  border: 1px solid var(--ggx-rule, #DADADA);
  border-radius: 6px;
  background: var(--ggx-card, #FFFFFF);
  color: var(--ggx-text, #2C2C2C);
  font-family: Lato, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.ggx-panel {
  padding: 14px 40px 14px 18px;
}

.ggx-panel[hidden] {
  display: none;
}

.ggx-panel .ggx-title {
  margin: 0;
  color: var(--ggx-title, #1F1F1F);
  font-size: 16px;
  font-weight: 700;
}

.ggx-panel .ggx-sub {
  margin: 0 0 8px;
}

.ggx-panel p,
.ggx-details p {
  margin: 0 0 8px;
}

.ggx-panel dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 14px;
  margin: 0 0 8px;
}

.ggx-panel dt {
  color: var(--ggx-muted, #6B6B6B);
}

.ggx-panel dd {
  margin: 0;
}

.ggx-panel .ggx-refs-head {
  margin: 10px 0 2px;
  color: var(--ggx-title, #1F1F1F);
  font-weight: 700;
}

.ggx-panel ol {
  margin: 0;
  padding-left: 22px;
}

.ggx-panel li {
  margin: 2px 0;
}

.ggx-panel a,
.ggx-details a {
  color: var(--ggx-link, #1C7C79);
  overflow-wrap: anywhere;
}

.ggx-close {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 2px 6px;
  border: 0;
  background: none;
  color: var(--ggx-muted, #6B6B6B);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ggx-close:hover,
.ggx-close:focus-visible {
  color: var(--ggx-title, #1F1F1F);
}

/* A section under the plot that starts collapsed. */
.ggx-details > summary {
  padding: 11px 18px;
  color: var(--ggx-title, #1F1F1F);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.ggx-details > summary::-webkit-details-marker {
  display: none;
}

.ggx-details > summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 10px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--ggx-muted, #6B6B6B);
  transition: transform 0.15s ease;
  vertical-align: 1px;
}

.ggx-details[open] > summary::before {
  transform: rotate(90deg);
}

.ggx-details > summary:focus-visible {
  outline: 2px solid #22928F;
  outline-offset: -2px;
  border-radius: 6px;
}

.ggx-details > .ggx-details-body {
  padding: 0 18px 14px;
}

.ggx-details .ggx-notes-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 12px 0 0;
  font-size: 13px;
}

.ggx-details .ggx-notes-list dt {
  color: var(--ggx-title, #1F1F1F);
  font-weight: 700;
}

.ggx-details .ggx-notes-list dd {
  margin: 0;
  color: var(--ggx-muted, #6B6B6B);
}

@media (max-width: 560px) {
  .ggx-details .ggx-notes-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ggx-details > summary::before {
    transition: none;
  }
}

/* Tables in the panel, the collapsed sections and the hover card reset the
   borders, margins and bullets that document stylesheets put on every
   table and list. */
.ggx-panel .ggx-table,
.ggx-details .ggx-table,
.ggx-tip .ggx-table {
  margin: 4px 0 0;
  overflow-x: auto;
}

.ggx-panel .ggx-table table,
.ggx-details .ggx-table table,
.ggx-tip .ggx-table table {
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: none;
  font-size: 13px;
  line-height: 1.35;
}

.ggx-panel .ggx-table thead,
.ggx-panel .ggx-table tr,
.ggx-details .ggx-table thead,
.ggx-details .ggx-table tr,
.ggx-tip .ggx-table thead,
.ggx-tip .ggx-table tr {
  background: none;
}

.ggx-panel .ggx-table th,
.ggx-panel .ggx-table td,
.ggx-details .ggx-table th,
.ggx-details .ggx-table td,
.ggx-tip .ggx-table th,
.ggx-tip .ggx-table td {
  padding: 4px 10px;
  border: 0;
  border-bottom: 1px solid var(--ggx-line, #ECECEC);
  color: inherit;
  line-height: 1.35;
  text-align: left;
  vertical-align: top;
}

.ggx-panel .ggx-table thead th,
.ggx-details .ggx-table thead th,
.ggx-tip .ggx-table thead th {
  border-bottom: 1px solid var(--ggx-rule, #D0D0D0);
  color: var(--ggx-title, #1F1F1F);
  font-weight: 700;
  white-space: nowrap;
}

.ggx-panel .ggx-table thead .ggx-arm,
.ggx-tip .ggx-table thead .ggx-arm {
  color: var(--ggx-muted, #6B6B6B);
  font-weight: 400;
}

.ggx-panel .ggx-table tbody th,
.ggx-tip .ggx-table tbody th {
  color: var(--ggx-muted, #6B6B6B);
  font-weight: 400;
  white-space: nowrap;
}

.ggx-details .ggx-table tbody th {
  color: var(--ggx-title, #1F1F1F);
  font-weight: 400;
  white-space: nowrap;
}

.ggx-details .ggx-table td {
  font-variant-numeric: tabular-nums;
}

.ggx-panel .ggx-table .ggx-num td,
.ggx-tip .ggx-table .ggx-num td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ggx-panel .ggx-notes {
  margin: 0;
  padding-left: 0;
}

.ggx-panel .ggx-notes li {
  margin: 3px 0;
  list-style: none;
}

/* The hover card's table is a compact version of the panel's. */
.ggx-tip .ggx-table table {
  font-size: 12px;
}

.ggx-tip .ggx-table th,
.ggx-tip .ggx-table td {
  padding: 2px 7px;
}

.ggx-tip .ggx-table thead .ggx-arm {
  max-width: 7em;
  white-space: normal;
}

/* Text without its own handlers lets the pointer through to the shape
   under it, so a label never interrupts a hover. */
svg.ggiraph-svg text:not([data-id]) {
  pointer-events: none;
}

/* The widget's height follows its content. htmlwidgets sets a fixed height
   on a page of its own, which would let the controls, sections and panels
   under the plot overlap what follows. */
.html-widget.ggx-graph {
  height: auto !important;
}

/* Inside a widget, a section or panel lines up with the plot's own margin. */
.ggx-graph > .ggx-details,
.ggx-graph > .ggx-panel {
  margin: 4px 24px 8px;
}

/* A choropleth: the regions change shade in place. */
.ggx-map svg.ggiraph-svg path[data-id^="g"] {
  transition: fill 0.35s ease, fill-opacity 0.35s ease;
}

svg.ggiraph-svg text[data-id="yr"] {
  pointer-events: none;
}

/* Controls under a plot: the map's time slider, the funnel plot's trim and
   fill switch and the swimmer plot's order. */
.ggx-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 2px 24px 12px;
  color: var(--ggx-muted, #6B6B6B);
  font-family: Lato, sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ggx-controls input[type="range"] {
  flex: 1;
  min-width: 80px;
  margin: 0;
  accent-color: #22928F;
  cursor: pointer;
}

.ggx-play {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ggx-rule, #DADADA);
  border-radius: 50%;
  background: var(--ggx-card, #FFFFFF);
  color: var(--ggx-title, #1F1F1F);
  cursor: pointer;
}

.ggx-play:hover {
  border-color: #22928F;
}

.ggx-play:focus-visible,
.ggx-controls input[type="range"]:focus-visible,
.ggx-controls input[type="checkbox"]:focus-visible,
.ggx-seg button:focus-visible {
  outline: 2px solid #22928F;
  outline-offset: 2px;
}

.ggx-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ggx-text, #2C2C2C);
  cursor: pointer;
}

.ggx-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #22928F;
}

.ggx-seg {
  display: inline-flex;
  border: 1px solid var(--ggx-rule, #DADADA);
  border-radius: 6px;
  overflow: hidden;
}

.ggx-seg button {
  padding: 5px 11px;
  border: 0;
  background: var(--ggx-card, #FFFFFF);
  color: var(--ggx-text, #2C2C2C);
  font: inherit;
  cursor: pointer;
}

.ggx-seg button + button {
  border-left: 1px solid var(--ggx-rule, #DADADA);
}

.ggx-seg button[aria-pressed="true"] {
  background: #22928F;
  color: #FFFFFF;
}

.ggx-play svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.ggx-tip-row .ggx-rank {
  margin-left: 4px;
  color: var(--ggx-muted, #6B6B6B);
  font-size: 0.9em;
}

.ggx-panel .ggx-series {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 28px;
}

.ggx-panel .ggx-spark {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 2px 0 2px;
  overflow: visible;
}

.ggx-spark text {
  fill: var(--ggx-muted, #6B6B6B);
  font-family: Lato, sans-serif;
  font-size: 11px;
}

.ggx-spark line {
  stroke: var(--ggx-rule, #DADADA);
  stroke-width: 1;
}

.ggx-spark-now {
  stroke: var(--ggx-card, #FFFFFF);
  stroke-width: 1.5;
}

/* A swimmer plot's lanes slide to their new rows. */
.ggx-swimmer svg.ggiraph-svg [data-id^="p"] {
  transition: transform 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ggx-map svg.ggiraph-svg path[data-id^="g"],
  .ggx-swimmer svg.ggiraph-svg [data-id^="p"] {
    transition: none;
  }
}

/* A nomogram the widget draws itself: axes, handles and the prediction.
   Its canvas is laid out in points, one SVG unit each, so sizes are in px. */
.ggx-nomo text {
  font-family: Lato, sans-serif;
}

.ggx-nomo-axis {
  stroke: var(--ggx-axis, #8A8A8A);
  stroke-width: 1;
}

.ggx-nomo-tick {
  fill: var(--ggx-muted, #6B6B6B);
  font-size: 9px;
}

.ggx-nomo-label {
  fill: var(--ggx-text, #2C2C2C);
  font-size: 10.5px;
}

.ggx-nomo-head {
  fill: var(--ggx-title, #1F1F1F);
  font-size: 10.5px;
  font-weight: 700;
}

.ggx-nomo-hit {
  fill: var(--ggx-faint, #EEF2F2);
  fill-opacity: 0;
  cursor: pointer;
}

.ggx-nomo-row:hover .ggx-nomo-hit {
  fill-opacity: 0.6;
}

.ggx-nomo-guide {
  stroke: #22928F;
  stroke-opacity: 0.35;
  stroke-dasharray: 2 3;
}

.ggx-nomo-handle {
  cursor: grab;
}

.ggx-nomo-handle circle {
  fill: #22928F;
  stroke: var(--ggx-card, #FFFFFF);
  stroke-width: 2;
}

.ggx-nomo-handle:focus {
  outline: none;
}

.ggx-nomo-handle:focus-visible circle {
  stroke: var(--ggx-title, #1F1F1F);
}

.ggx-nomo-value {
  fill: var(--ggx-title, #1F1F1F);
  font-size: 9px;
  font-weight: 700;
}

.ggx-nomo-pts {
  fill: var(--ggx-muted, #6B6B6B);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.ggx-nomo-drop {
  stroke: #C0603F;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.ggx-nomo-dot {
  fill: #C0603F;
  stroke: var(--ggx-card, #FFFFFF);
  stroke-width: 2;
}

.ggx-float-tip {
  position: absolute;
  z-index: 10;
  max-width: 300px;
  padding: 8px 11px;
  border: 1px solid var(--ggx-rule, #DADADA);
  border-radius: 6px;
  background: var(--ggx-card, #FFFFFF);
  color: var(--ggx-text, #2C2C2C);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-family: Lato, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}

.ggx-nomo-readout {
  margin: 4px 24px 6px;
  font-family: Lato, sans-serif;
  color: var(--ggx-text, #2C2C2C);
  font-variant-numeric: tabular-nums;
}

.ggx-nomo-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 2px 0;
  font-size: 14px;
}

.ggx-nomo-line b {
  color: var(--ggx-title, #1F1F1F);
  font-size: 22px;
  font-weight: 900;
}

.ggx-nomo-ci,
.ggx-nomo-total {
  color: var(--ggx-muted, #6B6B6B);
  font-size: 13px;
}

.ggx-nomo-cats {
  display: flex;
  height: 12px;
  margin: 8px 0 4px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ggx-faint, #EEF2F2);
}

.ggx-nomo-cat i {
  display: block;
  height: 100%;
  background: #22928F;
  border-right: 1px solid var(--ggx-card, #FFFFFF);
}

.ggx-nomo-catlabels {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  font-size: 13px;
}

.ggx-nomo-reset {
  padding: 5px 11px;
  border: 1px solid var(--ggx-rule, #DADADA);
  border-radius: 6px;
  background: var(--ggx-card, #FFFFFF);
  color: var(--ggx-text, #2C2C2C);
  font: inherit;
  cursor: pointer;
}

/* Restricted mean survival in a Kaplan-Meier plot. */
svg.ggiraph-svg [data-id^="rm"],
.ggx-rmst-area,
.ggx-rmst-tau {
  pointer-events: none;
}

.ggx-rmst-tau {
  stroke: var(--ggx-title, #1F1F1F);
  stroke-width: 1.4;
}

/* A slider with its label and value, and a plain-language readout under a
   plot. */
.ggx-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ggx-muted, #6B6B6B);
}

.ggx-range input[type="range"] {
  width: 200px;
  accent-color: #22928F;
}

.ggx-range b {
  min-width: 3em;
  color: var(--ggx-title, #1F1F1F);
  font-variant-numeric: tabular-nums;
}

.ggx-readout {
  margin: 2px 24px 10px;
  color: var(--ggx-text, #2C2C2C);
  font-family: Lato, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.ggx-readout p {
  margin: 0 0 4px;
}

.ggx-readout b {
  color: var(--ggx-title, #1F1F1F);
  font-variant-numeric: tabular-nums;
}

.ggx-readout .ggx-readout-note {
  color: var(--ggx-muted, #6B6B6B);
  font-size: 12.5px;
}

/* Adjustment paths in a causal diagram. */
svg.ggiraph-svg [data-id^="adj"],
svg.ggiraph-svg [data-id="cv"] {
  pointer-events: none;
}

svg.ggx-adjusting [data-id^="n"] {
  cursor: copy;
}

.ggx-select {
  padding: 4px 6px;
  border: 1px solid var(--ggx-rule, #DADADA);
  border-radius: 6px;
  background: var(--ggx-card, #FFFFFF);
  color: var(--ggx-text, #2C2C2C);
  font: inherit;
}

.ggx-paths .ggx-verdict {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-left: 4px solid #C0603F;
  border-radius: 4px;
  background: var(--ggx-faint, #EEF2F2);
  font-size: 15px;
}

.ggx-paths .ggx-verdict.ggx-ok {
  border-left-color: #22928F;
}

.ggx-paths .ggx-paths-msg {
  color: #A0482C;
}

.ggx-dark .ggx-paths .ggx-paths-msg {
  color: #E08A6A;
}

.ggx-paths-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 10px;
}

.ggx-paths-k {
  margin-right: 4px;
  color: var(--ggx-muted, #6B6B6B);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ggx-chip {
  padding: 4px 10px;
  border: 1px solid var(--ggx-rule, #DADADA);
  border-radius: 999px;
  background: var(--ggx-card, #FFFFFF);
  color: var(--ggx-text, #2C2C2C);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.ggx-chip[aria-pressed="true"] {
  border-color: var(--ggx-title, #1F1F1F);
  box-shadow: inset 0 0 0 1px var(--ggx-title, #1F1F1F);
  color: var(--ggx-title, #1F1F1F);
  font-weight: 700;
}

.ggx-chip:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ggx-chip i {
  font-size: 11.5px;
  font-weight: 400;
}

.ggx-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ggx-link, #1D7C79);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.ggx-chip:focus-visible,
.ggx-link:focus-visible,
.ggx-select:focus-visible,
.ggx-nomo-reset:focus-visible,
.ggx-path:focus-visible {
  outline: 2px solid #22928F;
  outline-offset: 2px;
}

.ggx-path-list {
  display: grid;
  gap: 5px;
  margin: 6px 0 12px;
  padding: 0;
  list-style: none;
}

.ggx-path {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 1px 12px;
  padding: 6px 10px;
  border: 1px solid var(--ggx-line, #E3E3E3);
  border-left: 4px solid #D6DCDC;
  border-radius: 4px;
}

.ggx-path:hover {
  background: var(--ggx-faint, #EEF2F2);
}

.ggx-path-causal { border-left-color: #22928F; }
.ggx-path-biasing { border-left-color: #C0603F; }
.ggx-path-blocked { color: var(--ggx-muted, #6B6B6B); }

.ggx-path-tag {
  grid-row: span 2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ggx-path-causal .ggx-path-tag { color: #1D7C79; }
.ggx-path-biasing .ggx-path-tag { color: #A0482C; }
.ggx-dark .ggx-path-causal .ggx-path-tag { color: #4CC2BE; }
.ggx-dark .ggx-path-biasing .ggx-path-tag { color: #E08A6A; }

.ggx-path-text {
  color: var(--ggx-title, #1F1F1F);
}

.ggx-path-blocked .ggx-path-text {
  color: var(--ggx-muted, #6B6B6B);
}

.ggx-path-why {
  color: var(--ggx-muted, #6B6B6B);
  font-size: 13px;
}

.ggx-paths-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 6px;
  font-size: 12.5px;
}

.ggx-paths-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ggx-paths-blocked { stroke: #9A9A9A; }
.ggx-paths-box { stroke: var(--ggx-title, #1F1F1F); }
.ggx-dark .ggx-paths-blocked { stroke: #637070; }

.ggx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .ggx-path {
    grid-template-columns: 1fr;
  }
  .ggx-path-tag {
    grid-row: auto;
  }
}

/* Where a league table's network estimate comes from. */
.ggx-flow {
  pointer-events: none;
}

.ggx-flow-box {
  fill: none;
  stroke: var(--ggx-title, #1F1F1F);
}

.ggx-flow-pct {
  fill: var(--ggx-title, #1F1F1F);
  font-family: Lato, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--ggx-page, #FFFFFF);
  stroke-width: 3px;
}

.ggx-flow-bar {
  display: inline-block;
  width: 90px;
  height: 7px;
  margin-right: 6px;
  border-radius: 3px;
  background: var(--ggx-faint, #EEF2F2);
  vertical-align: 1px;
  overflow: hidden;
}

.ggx-flow-bar i {
  display: block;
  height: 100%;
  background: #22928F;
}

.ggx-panel tr.ggx-own th {
  font-weight: 700;
}

.ggx-panel .ggx-flow-head {
  margin-top: 14px;
}

.ggx-panel .ggx-note {
  color: var(--ggx-muted, #6B6B6B);
  font-size: 0.9em;
}

.ggx-readout .ggx-flow-table table {
  border-collapse: collapse;
  font-size: 13px;
}

.ggx-readout .ggx-flow-table th,
.ggx-readout .ggx-flow-table td {
  padding: 3px 14px 3px 0;
  border-bottom: 1px solid var(--ggx-line, #E3E3E3);
  text-align: left;
  font-weight: 400;
}

.ggx-readout .ggx-flow-table thead th {
  color: var(--ggx-muted, #6B6B6B);
}

.ggx-range.ggx-wrap {
  flex-wrap: wrap;
}

/* A diagnostic threshold explorer. */
.ggx-dx svg [data-id],
.ggx-dx .ggx-dx-tail,
.ggx-dx .ggx-dx-people {
  pointer-events: none;
}

.ggx-dx .ggx-dx-drag {
  fill: #FFFFFF;
  fill-opacity: 0.01;
  cursor: ew-resize;
  touch-action: none;
}

/* A bias and tipping point explorer. */
.ggx-sens svg [data-id] {
  pointer-events: none;
}

.ggx-sens .ggx-sens-hit {
  fill: #FFFFFF;
  fill-opacity: 0.01;
  cursor: crosshair;
  touch-action: none;
}

/* A multiverse of analyses. */
.ggx-mv svg {
  touch-action: pan-y;
}

.ggx-mv svg [data-id^="o"] {
  cursor: pointer;
}

.ggx-mv svg text.ggx-mv-on {
  fill: #1D7C79;
  font-weight: 700;
  text-decoration: underline;
}

.ggx-dark .ggx-mv svg text.ggx-mv-on {
  fill: #4CC2BE;
}

.ggx-mv .ggx-mv-brush {
  fill: #22928F;
  fill-opacity: 0.08;
  pointer-events: none;
}

/* A responder threshold plot. */
.ggx-resp svg [data-id] {
  pointer-events: none;
}

.ggx-resp .ggx-resp-drag {
  fill: #FFFFFF;
  fill-opacity: 0.01;
  cursor: ew-resize;
  touch-action: none;
}

.ggx-dark .ggx-path-blocked {
  border-left-color: #637070;
}

/* CINeMA plots (R/cinema*.R): judgment marks, the panels' tables and
   contribution bars, and keyboard focus on the shapes a reader clicks. */
svg.ggiraph-svg .ggx-cn-key:focus {
  outline: none;
}

svg.ggiraph-svg .ggx-cn-key:focus-visible {
  outline: 2px solid #22928F;
  outline-offset: 1px;
  stroke: #22928F;
  stroke-width: 2.5px;
}

.ggx-cn-lv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ggx-cn-lv i,
.ggx-cn-hollow {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.ggx-cn-hollow {
  box-sizing: border-box;
  border: 1.5px solid var(--ggx-muted, #6B6B6B);
  background: none;
}

.ggx-cn-src {
  margin-top: 2px;
  color: var(--ggx-muted, #6B6B6B);
  font-size: 12px;
}

.ggx-panel .ggx-cn-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px 18px;
  margin: 10px 0 6px;
}

.ggx-panel .ggx-cn-kv dt {
  color: var(--ggx-muted, #6B6B6B);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ggx-panel .ggx-cn-kv dd {
  margin: 0;
  color: var(--ggx-title, #1F1F1F);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.ggx-panel .ggx-cn-domains table {
  width: 100%;
}

.ggx-panel .ggx-cn-domains td:nth-child(2) {
  width: 11em;
}

.ggx-panel .ggx-cn-domains td:last-child {
  min-width: 14em;
}

.ggx-cn-bar {
  display: flex;
  height: 20px;
  margin: 6px 0 4px;
  border-radius: 3px;
  overflow: hidden;
}

.ggx-cn-seg {
  box-sizing: border-box;
  display: block;
  height: 100%;
  overflow: hidden;
  border-right: 2px solid var(--ggx-card, #FFFFFF);
  color: #FEFEFE;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  padding-left: 4px;
  white-space: nowrap;
}

.ggx-cn-hatch {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 6px) !important;
}

.ggx-cn-clin .ggx-cn-hit {
  fill: #FFFFFF;
  fill-opacity: 0.01;
  cursor: pointer;
  touch-action: none;
}

.ggx-cn-guide {
  stroke: #22928F;
  stroke-width: 1.5;
  pointer-events: none;
}

.ggx-cn-strips {
  pointer-events: none;
}

.ggx-cn-contrib .ggx-cn-hatchlayer,
.ggx-cn-contrib svg [data-id^="r"],
.ggx-cn-contrib svg [data-id^="mr"],
.ggx-cn-contrib svg [data-id^="mk"],
.ggx-cn-contrib svg [data-id^="k"],
.ggx-cn-contrib svg [data-id^="nl"],
.ggx-cn-contrib svg [data-id="nh"] {
  pointer-events: none;
}

.ggx-cn-contrib svg [data-id^="b"],
.ggx-cn-contrib svg [data-id^="m"],
.ggx-cn-contrib svg [data-id^="c"],
.ggx-cn-contrib svg [data-id^="s"] {
  cursor: pointer;
}

.ggx-cn-net svg [data-id^="k"] {
  pointer-events: none;
}

.ggx-cn-net svg [data-id^="s"] {
  transition: stroke 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ggx-cn-net svg [data-id^="s"] {
    transition: none;
  }
}

.ggx-cn-net svg text[data-id^="el"] {
  paint-order: stroke;
  stroke: var(--ggx-page, #FFFFFF);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.ggx-panel .ggx-cn-studies table {
  width: 100%;
}

.ggx-panel .ggx-cn-studies td:last-child {
  min-width: 16em;
}

/* A bar chart race. The card's colors are variables so a dark page gets a
   dark card; the bars keep their own colors. */
.ggx-race {
  --race-page: #F7F7F7;
  --race-shadow: #BDBDBD;
  --race-card: #FFFFFF;
  --race-title: #1F1F1F;
  --race-rule: #D9D9D9;
  --race-axis: #262626;
  --race-grid: #DADADA;
  --race-name: #2C2C2C;
  --race-value: #494949;
  --race-year: #C6C6C6;
  --race-button: #2C2C2C;
  --race-icon: #FFFFFF;
  --race-timeline: #A1A1A1;
  --race-marker: #A3A3A3;
  --race-source: #242424;
  outline: none;
}

.ggx-race.ggx-dark {
  --race-page: #161C1C;
  --race-shadow: #000000;
  --race-card: #1D2424;
  --race-title: #EEF2F2;
  --race-rule: #334040;
  --race-axis: #DDE4E4;
  --race-grid: #2F3B3B;
  --race-name: #DDE4E4;
  --race-value: #B8C2C2;
  --race-year: #3A4747;
  --race-button: #DDE4E4;
  --race-icon: #1D2424;
  --race-timeline: #7D8A8A;
  --race-marker: #9AA6A6;
  --race-source: #C9D1D1;
}

.ggx-race .ggx-race-page { fill: var(--race-page); }
.ggx-race .ggx-race-shadow { fill: var(--race-shadow); }
.ggx-race .ggx-race-card { fill: var(--race-card); }
.ggx-race .ggx-race-title { fill: var(--race-title); }
.ggx-race .ggx-race-rule { fill: var(--race-rule); }
.ggx-race .ggx-race-axis { fill: var(--race-axis); }
.ggx-race .ggx-race-grid { fill: var(--race-grid); }
.ggx-race .ggx-race-name { fill: var(--race-name); }
.ggx-race .ggx-race-value { fill: var(--race-value); }
.ggx-race .ggx-race-year { fill: var(--race-year); }
.ggx-race .ggx-race-button-disc { fill: var(--race-button); }
.ggx-race .ggx-race-button-icon { fill: var(--race-icon); }
.ggx-race .ggx-race-timeline { fill: var(--race-timeline); }
.ggx-race .ggx-race-timeline-text { fill: var(--race-timeline); }
.ggx-race .ggx-race-marker { fill: var(--race-marker); }
.ggx-race .ggx-race-source { fill: var(--race-source); }

.ggx-race .ggx-race-root text {
  pointer-events: none;
}

.ggx-race .ggx-race-root text.ggx-race-name {
  pointer-events: auto;
  cursor: pointer;
}

.ggx-race .ggx-race-bar {
  cursor: pointer;
}

.ggx-race .ggx-race-button {
  cursor: pointer;
  outline: none;
}

.ggx-race .ggx-race-button:focus-visible .ggx-race-button-disc {
  stroke: #22928F;
  stroke-width: 3;
}

.ggx-race .ggx-race-scrub {
  fill: #FFFFFF;
  fill-opacity: 0.01;
  cursor: ew-resize;
  touch-action: none;
}

.ggx-race:focus-visible {
  outline: 2px solid #22928F;
  outline-offset: 2px;
}