/* Interactive Chapter 8 Figure 8.7 (see widget.js): entropy-bounded
   proportional risk compensations. Visual language follows the elasticity
   widgets of Chapter 11 (_static/ak_elasticity_app/widget.css); the chart's own
   colours are the published figure's -- salmon bounds, blue dash-dot
   minimum-divergence line, black empirical dots. */

.rc-widget,
.rc-widget * {
  box-sizing: border-box;
}

.rc-widget {
  --rc-box: #fa8072;            /* matplotlib "salmon", as published */
  --rc-box-edge: #000000;
  --rc-mindiv: #0000ff;         /* matplotlib "blue", as published */
  --rc-dot: #000000;
  --rc-grid: rgba(0, 0, 0, 0.08);
  --rc-axis: #66645f;
  --rc-text: #444441;
  margin: 0 auto 0.75rem;
  color: #1a1a18;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
}

.rc-widget[hidden] {
  display: none;
}

.rc-panel {
  width: 100%;
  /* Fill the text column. Chapter 11 narrows a single-panel widget to 640px
     (.akel-widget.is-single), but this chart's four categories want the room:
     900px is that chapter's two-panel cap, above the ~790px the book's content
     column actually offers, so in the book this reads as "as wide as it goes". */
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: #ffffff;
  padding: 1.25rem;
}

.rc-control {
  border-radius: 8px;
  background: #f4f3f0;
  padding: 0.75rem;
  margin-bottom: 0.85rem;
}

.rc-label {
  margin-bottom: 0.4rem;
  color: #66645f;
  font-size: 0.78rem;
  line-height: 1.2;
}

.rc-control input[type="range"] {
  display: block;
  width: 100%;
  height: 4px;
  margin: 0.45rem 0;
  border-radius: 999px;
  outline-offset: 4px;
  background: #d3d1c7;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.rc-control input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #534ab7;
  box-shadow: 0 0 0 1px rgba(83, 74, 183, 0.4);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.rc-control input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #534ab7;
  cursor: pointer;
}

.rc-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  color: #66645f;
  font-size: 0.75rem;
}

.rc-ticks span.is-active {
  color: #1a1a18;
  font-weight: 600;
}

.rc-plot {
  border-radius: 8px;
  background: #f4f3f0;
  padding: 0.6rem 0.6rem 0.5rem;
}

.rc-chart {
  position: relative;
  width: 100%;
  height: 330px;
}

/* identity is never colour-alone: each key repeats the mark's own shape */
.rc-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.1rem;
  margin-top: 0.55rem;
  color: #1a1a18;
  font-size: 0.82rem;
}

.rc-key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.rc-swatch {
  display: inline-block;
  width: 20px;
  height: 11px;
  border: 1px solid var(--rc-box-edge);
  background: var(--rc-box);
}

.rc-swatch-mindiv {
  height: 0;
  border: 0;
  border-top: 2px dashed var(--rc-mindiv);
  background: none;
}

.rc-swatch-dot {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  background: var(--rc-dot);
}

.rc-note {
  margin: 0.65rem 0 0;
  color: #74716a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 640px) {
  .rc-panel {
    padding: 1rem;
  }

  .rc-chart {
    height: 280px;
  }
}

/* On screen the widget stands in for the figure's static image -- but only once
   it has mounted, so that a missing Chart.js or data file leaves the published
   image visible rather than nothing at all. Print/PDF always keeps the image. */
@media screen {
  figure.rc-live > a.image-reference,
  figure.rc-live > img {
    display: none;
  }
}

@media print {
  .rc-widget {
    display: none !important;
  }
}

html[data-theme="dark"] .rc-widget {
  --rc-box: #e8705f;
  --rc-mindiv: #6f9bff;
  --rc-box-edge: #e8e6e0;
  --rc-dot: #e8e6e0;
  --rc-grid: rgba(255, 255, 255, 0.08);
  --rc-axis: #b0ada5;
  --rc-text: #d7d4cb;
  color: #e8e6e0;
}

html[data-theme="dark"] .rc-panel {
  border-color: rgba(255, 255, 255, 0.12);
  background: #242422;
}

html[data-theme="dark"] .rc-control,
html[data-theme="dark"] .rc-plot {
  background: #2e2e2b;
}

html[data-theme="dark"] .rc-label,
html[data-theme="dark"] .rc-ticks,
html[data-theme="dark"] .rc-note {
  color: #b0ada5;
}

html[data-theme="dark"] .rc-keys,
html[data-theme="dark"] .rc-ticks span.is-active {
  color: #e8e6e0;
}

html[data-theme="dark"] .rc-control input[type="range"] {
  background: #444441;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .rc-widget {
    --rc-box: #e8705f;
    --rc-mindiv: #6f9bff;
    --rc-box-edge: #e8e6e0;
    --rc-dot: #e8e6e0;
    --rc-grid: rgba(255, 255, 255, 0.08);
    --rc-axis: #b0ada5;
    --rc-text: #d7d4cb;
    color: #e8e6e0;
  }

  html:not([data-theme]) .rc-panel {
    border-color: rgba(255, 255, 255, 0.12);
    background: #242422;
  }

  html:not([data-theme]) .rc-control,
  html:not([data-theme]) .rc-plot {
    background: #2e2e2b;
  }

  html:not([data-theme]) .rc-label,
  html:not([data-theme]) .rc-ticks,
  html:not([data-theme]) .rc-note {
    color: #b0ada5;
  }

  html:not([data-theme]) .rc-keys,
  html:not([data-theme]) .rc-ticks span.is-active {
    color: #e8e6e0;
  }

  html:not([data-theme]) .rc-control input[type="range"] {
    background: #444441;
  }
}