/* ============================================================================
   Yuvijen Data Analytics — Interactive Widgets
   Shared stylesheet for all in-chapter interactives.

   Mount point in a chapter:  <div class="ya" data-ya="widget-name"></div>

   Theming: light values live on .ya; dark values are re-declared under
   body.quarto-dark (Quarto's own light/dark toggle swaps that class).
   ========================================================================== */

.ya,
.ya-fig {
  /* --- surfaces --- */
  --ya-bg:        #ffffff;
  --ya-bg-2:      #f6f8fa;
  --ya-bg-3:      #eef2f6;
  --ya-panel:     #f8fafc;

  /* --- text --- */
  --ya-fg:        #1e293b;
  --ya-fg-2:      #64748b;
  --ya-fg-3:      #94a3b8;

  /* --- lines --- */
  --ya-line:      #e2e8f0;
  --ya-line-2:    #cbd5e1;

  /* --- brand + series colours (match the book's module palette) --- */
  --ya-accent:    #31BAE9;
  --ya-accent-sf: #e6f6fd;
  --ya-green:     #28a745;
  --ya-orange:    #fd7e14;
  --ya-purple:    #6f42c1;
  --ya-red:       #dc3545;
  --ya-teal:      #20c997;
  --ya-pink:      #e83e8c;
  --ya-yellow:    #ffc107;

  /* --- geometry --- */
  --ya-r:         10px;
  --ya-r-sm:      6px;
  --ya-shadow:    0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);

  --ya-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --ya-mono: "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

  font-family: var(--ya-sans);
  color: var(--ya-fg);
  background: var(--ya-bg);
  border: 1px solid var(--ya-line);
  border-radius: var(--ya-r);
  box-shadow: var(--ya-shadow);
  margin: 0 0 1.75rem;
  overflow: hidden;
  display: block;
  container-type: inline-size;
}

body.quarto-dark .ya,
body.quarto-dark .ya-fig {
  --ya-bg:        #1e293b;
  --ya-bg-2:      #172033;
  --ya-bg-3:      #0f172a;
  --ya-panel:     #172033;
  --ya-fg:        #e2e8f0;
  --ya-fg-2:      #94a3b8;
  --ya-fg-3:      #64748b;
  --ya-line:      #334155;
  --ya-line-2:    #475569;
  --ya-accent:    #38bdf8;
  --ya-accent-sf: #0b2b3d;
  --ya-shadow:    0 1px 3px rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------------------- header -- */

.ya-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  padding: .7rem .95rem;
  background: var(--ya-bg-2);
  border-bottom: 1px solid var(--ya-line);
}

.ya-title {
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.3;
  color: var(--ya-fg);
}

.ya-title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ya-accent);
  margin-right: .5rem;
  vertical-align: middle;
}

.ya-hint {
  font-size: .78rem;
  color: var(--ya-fg-2);
  margin: 0;
  flex: 1 1 15rem;
  line-height: 1.45;
}

.ya-hint b { color: var(--ya-fg); font-weight: 600; }

/* ----------------------------------------------------------------- body --- */

.ya-body { padding: .95rem; }

.ya-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 1rem;
  align-items: start;
}

.ya-cols.rev { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.ya-cols.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@container (max-width: 640px) {
  .ya-cols, .ya-cols.rev, .ya-cols.even { grid-template-columns: minmax(0, 1fr); }
}

/* Fallback for browsers without container queries */
@media (max-width: 640px) {
  .ya-cols, .ya-cols.rev, .ya-cols.even { grid-template-columns: minmax(0, 1fr); }
}

.ya-panel {
  background: var(--ya-panel);
  border: 1px solid var(--ya-line);
  border-radius: var(--ya-r-sm);
  padding: .75rem .8rem;
}

.ya-panel + .ya-panel { margin-top: .7rem; }

.ya-legend {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ya-fg-3);
  margin: 0 0 .55rem;
  display: block;
}

/* --------------------------------------------------------------- sliders -- */

.ya-ctl { margin-bottom: .8rem; }
.ya-ctl:last-child { margin-bottom: 0; }

.ya-ctl-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .3rem;
}

.ya-ctl-lab {
  font-size: .8rem;
  color: var(--ya-fg-2);
  line-height: 1.3;
}

.ya-ctl-val {
  font-family: var(--ya-mono);
  font-size: .82rem;
  font-weight: 650;
  color: var(--ya-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ya-ctl input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  cursor: grab;
  margin: 0;
  display: block;
}
.ya-ctl input[type="range"]:active { cursor: grabbing; }

.ya-ctl input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ya-line-2);
}
.ya-ctl input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ya-line-2);
}
.ya-ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--ya-accent);
  border: 2px solid var(--ya-bg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
  transition: transform .12s;
}
.ya-ctl input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ya-accent);
  border: 2px solid var(--ya-bg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
}
.ya-ctl input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.ya-ctl input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--ya-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- buttons -- */

.ya-btns { display: flex; flex-wrap: wrap; gap: .35rem; }

.ya-btn {
  font-family: inherit;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.2;
  padding: .38rem .6rem;
  border: 1px solid var(--ya-line-2);
  border-radius: var(--ya-r-sm);
  background: var(--ya-bg);
  color: var(--ya-fg);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.ya-btn:hover { background: var(--ya-bg-3); border-color: var(--ya-accent); }
.ya-btn:active { transform: scale(.97); }
.ya-btn.on {
  background: var(--ya-accent);
  border-color: var(--ya-accent);
  color: #fff;
  font-weight: 600;
}
body.quarto-dark .ya-btn.on { color: #06283a; }
.ya-btn:focus-visible { outline: 2px solid var(--ya-accent); outline-offset: 2px; }

.ya-btn.sm { font-size: .72rem; padding: .28rem .5rem; }

/* ----------------------------------------------------------- stat tiles --- */

.ya-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: .45rem;
}

.ya-stat {
  background: var(--ya-bg);
  border: 1px solid var(--ya-line);
  border-radius: var(--ya-r-sm);
  padding: .45rem .55rem;
  min-width: 0;
}
.ya-panel .ya-stat { background: var(--ya-bg); }

.ya-stat-lab {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ya-fg-3);
  font-weight: 600;
  line-height: 1.25;
  /* wrap rather than truncate — long labels like "P(disease | positive)"
     must stay readable at narrow widths */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.ya-stat-val {
  font-family: var(--ya-mono);
  font-size: 1rem;
  font-weight: 650;
  color: var(--ya-fg);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  margin-top: .1rem;
}

.ya-stat-val small { font-size: .7em; font-weight: 500; color: var(--ya-fg-2); }

.ya-stat.hl { border-color: var(--ya-accent); background: var(--ya-accent-sf); }
.ya-stat.hl .ya-stat-val { color: var(--ya-accent); }

/* ------------------------------------------------------------- plot area -- */

.ya-plot {
  background: var(--ya-bg);
  border: 1px solid var(--ya-line);
  border-radius: var(--ya-r-sm);
  padding: .4rem;
  overflow: hidden;
}
.ya-plot svg { width: 100%; height: auto; display: block; touch-action: none; }

.ya-plot-t {
  font-size: .72rem;
  font-weight: 600;
  color: var(--ya-fg-2);
  text-align: center;
  margin: .15rem 0 .3rem;
}

/* ------------------------------------------------------------- readouts --- */

.ya-note {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ya-fg-2);
  background: var(--ya-bg-2);
  border-left: 3px solid var(--ya-accent);
  border-radius: 0 var(--ya-r-sm) var(--ya-r-sm) 0;
  padding: .5rem .7rem;
  margin-top: .7rem;
}
.ya-note b, .ya-note strong { color: var(--ya-fg); font-weight: 650; }
.ya-note.warn { border-left-color: var(--ya-orange); }
.ya-note.good { border-left-color: var(--ya-green); }

.ya-eq {
  font-family: var(--ya-mono);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ya-fg);
  background: var(--ya-bg-3);
  border-radius: var(--ya-r-sm);
  padding: .45rem .6rem;
  margin-top: .5rem;
  /* equations wrap instead of being clipped at the panel edge */
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.ya-eq em { color: var(--ya-accent); font-style: normal; font-weight: 650; }

/* ---------------------------------------------------------------- tables -- */

.ya-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.ya-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
table.ya-tbl th, table.ya-tbl td {
  padding: .3rem .5rem;
  text-align: right;
  border-bottom: 1px solid var(--ya-line);
  white-space: nowrap;
}
table.ya-tbl th {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ya-fg-3);
  font-weight: 700;
  border-bottom: 1px solid var(--ya-line-2);
}
table.ya-tbl th:first-child, table.ya-tbl td:first-child { text-align: left; }
table.ya-tbl tbody tr:hover { background: var(--ya-bg-2); }
table.ya-tbl tbody tr.on { background: var(--ya-accent-sf); }
table.ya-tbl td.mono { font-family: var(--ya-mono); }
table.ya-tbl tr:last-child td { border-bottom: none; }
table.ya-tbl tr.tot td { font-weight: 700; border-top: 1px solid var(--ya-line-2); }

/* ------------------------------------------------------------ chi-square -- */

table.ya-tbl.ya-chi td { vertical-align: top; padding: .42rem .4rem; }
table.ya-tbl.ya-chi th { padding: .3rem .4rem; }
table.ya-tbl.ya-chi td:not(:first-child) { text-align: center; }
table.ya-tbl.ya-chi .ya-chi-o,
table.ya-tbl.ya-chi .ya-chi-e,
table.ya-tbl.ya-chi .ya-chi-r { display: block; line-height: 1.3; }
table.ya-tbl.ya-chi .ya-chi-o { font-size: .95rem; font-weight: 700; color: var(--ya-fg); }
table.ya-tbl.ya-chi .ya-chi-e { font-size: .63rem; color: var(--ya-fg-2); opacity: .8; }
table.ya-tbl.ya-chi .ya-chi-r { font-size: .68rem; font-weight: 650; color: var(--ya-fg-2); }
table.ya-tbl.ya-chi tbody tr:hover { background: transparent; }

/* ----------------------------------------------------------------- chips -- */

.ya-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.ya-chip {
  font-size: .76rem;
  padding: .3rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--ya-line-2);
  background: var(--ya-bg);
  color: var(--ya-fg);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s, transform .08s;
  user-select: none;
}
.ya-chip:hover { border-color: var(--ya-accent); background: var(--ya-bg-3); }
.ya-chip:active { transform: scale(.96); }
.ya-chip.on { background: var(--ya-accent); border-color: var(--ya-accent); color: #fff; font-weight: 600; }
body.quarto-dark .ya-chip.on { color: #06283a; }
.ya-chip.ok { background: var(--ya-green); border-color: var(--ya-green); color: #fff; }
.ya-chip.no { background: var(--ya-red); border-color: var(--ya-red); color: #fff; }

/* ----------------------------------------------------------------- misc --- */

.ya-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ya-row.between { justify-content: space-between; }
.ya-sp { margin-top: .7rem; }

.ya-num {
  font-family: var(--ya-mono);
  font-size: .8rem;
  width: 100%;
  padding: .35rem .5rem;
  border: 1px solid var(--ya-line-2);
  border-radius: var(--ya-r-sm);
  background: var(--ya-bg);
  color: var(--ya-fg);
}
.ya-num:focus { outline: none; border-color: var(--ya-accent); box-shadow: 0 0 0 2px var(--ya-accent-sf); }

textarea.ya-num { resize: vertical; min-height: 4.5rem; line-height: 1.5; white-space: pre; }

.ya-sel {
  font-family: inherit;
  font-size: .8rem;
  padding: .35rem .5rem;
  border: 1px solid var(--ya-line-2);
  border-radius: var(--ya-r-sm);
  background: var(--ya-bg);
  color: var(--ya-fg);
  cursor: pointer;
}

.ya-key { display: flex; flex-wrap: wrap; gap: .3rem .85rem; margin-top: .5rem; }
.ya-key span { font-size: .72rem; color: var(--ya-fg-2); display: inline-flex; align-items: center; gap: .3rem; }
.ya-key i {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none;
}

/* Print / PDF: interactives can't work on paper — show a note instead. */
@media print {
  .ya-body { display: none; }
  .ya-head::after {
    content: "This interactive is available in the online edition.";
    font-size: .78rem;
    color: var(--ya-fg-2);
    flex-basis: 100%;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ya *, .ya *::before, .ya *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ==========================================================================
   CHAPTER FIGURES
   Static diagrams used in chapter prose (taxonomy trees, lens grids, matrix
   panels). They inherit the .ya token set declared at the top of this file,
   so they follow the light/dark toggle with no extra work.
   ========================================================================== */

.ya-fig-head {
  padding: .7rem .95rem;
  background: var(--ya-bg-2);
  border-bottom: 1px solid var(--ya-line);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .75rem;
}

.ya-fig-t {
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ya-fg);
}

.ya-fig-cap {
  font-size: .78rem;
  color: var(--ya-fg-2);
}

/* ------------------------------------------------------- the eight lenses -- */

.ya-lens {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  padding: .95rem;
}

.ya-lens-i {
  border: 1px solid var(--ya-line);
  border-top: 3px solid var(--c, var(--ya-accent));
  border-radius: var(--ya-r-sm);
  background: var(--ya-panel);
  padding: .55rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  min-width: 0;
}

.ya-lens-i b {
  font-size: .81rem;
  font-weight: 650;
  color: var(--c, var(--ya-accent));
  letter-spacing: -.01em;
}

.ya-lens-i i {
  font-size: .755rem;
  font-style: italic;
  color: var(--ya-fg-2);
  line-height: 1.4;
}

.ya-lens-i u {
  font-size: .715rem;
  text-decoration: none;
  color: var(--ya-fg-3);
  line-height: 1.45;
  margin-top: .1rem;
  overflow-wrap: anywhere;
}

@container (max-width: 720px) { .ya-lens { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 380px) { .ya-lens { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- taxonomy tree -- */

.ya-tree,
.ya-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ya-tree { padding: .95rem 1.1rem; }

.ya-tree ul {
  margin-left: .55rem;
  padding-left: .9rem;
  border-left: 1px solid var(--ya-line-2);
}

.ya-tree li {
  position: relative;
  padding: .17rem 0;
}

.ya-tree ul > li::before {
  content: "";
  position: absolute;
  left: -.9rem;
  top: 1.05em;
  width: .68rem;
  height: 1px;
  background: var(--ya-line-2);
}

.ya-n {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: var(--ya-r-sm);
  border: 1px solid var(--c, var(--ya-line));
  color: var(--c, var(--ya-fg));
  background: var(--ya-panel);
  line-height: 1.4;
}

.ya-n-root {
  --c: var(--ya-fg);
  background: var(--ya-bg-3);
  font-weight: 700;
}

.ya-n-sub {
  --c: var(--ya-fg-2);
  font-weight: 600;
}

.ya-n-leaf {
  --c: var(--ya-line-2);
  color: var(--ya-fg);
  font-weight: 500;
}

.ya-tree em {
  display: block;
  font-style: normal;
  font-size: .745rem;
  color: var(--ya-fg-2);
  line-height: 1.45;
  margin: .12rem 0 .1rem .15rem;
}

/* ------------------------------------------------- four time structures -- */

.ya-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  padding: .95rem;
}

.ya-g {
  border: 1px solid var(--ya-line);
  border-radius: var(--ya-r-sm);
  background: var(--ya-panel);
  padding: .6rem;
  text-align: center;
  min-width: 0;
}

.ya-g-t {
  font-size: .79rem;
  font-weight: 650;
  color: var(--c, var(--ya-accent));
  margin-bottom: .5rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ya-g p {
  font-size: .73rem;
  color: var(--ya-fg-2);
  margin: .5rem 0 0;
  line-height: 1.4;
}

.ya-mx {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 4.2rem;
  margin: 0 auto;
}

.ya-mx i {
  display: block;
  aspect-ratio: 1;
  border-radius: 2px;
  border: 1px solid var(--ya-line-2);
  background: transparent;
}

.ya-mx i.on {
  background: var(--c, var(--ya-accent));
  border-color: var(--c, var(--ya-accent));
}


@container (max-width: 720px) { .ya-grid4 { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 380px) { .ya-grid4 { grid-template-columns: 1fr; } }

/* The figure blocks sit in chapter prose, where Quarto's own table/list
   styles would otherwise leak in. Keep them contained. */
.ya-fig ul,
.ya-fig li { list-style: none !important; }
.ya-fig p:last-child { margin-bottom: 0; }

/* ---------------------------------------- sampling methods explorer grid -- */

.ya-samp-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 3px;
  margin: 0 0 .9rem;
}

.ya-samp-grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  transition: background .18s ease;
}

.ya-samp-grid i.on { box-shadow: 0 0 0 1px rgba(0, 0, 0, .06) inset; }

@media (prefers-reduced-motion: reduce) {
  .ya-samp-grid i { transition: none; }
}

/* ------------------------------------- CLT widget: 3 x 2 shape button grid -- */
/* The six population shapes read as two deliberate rows rather than whatever
   the flex wrap happens to produce at a given width. */

.ya-shape-picker .ya-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
}

.ya-shape-picker .ya-btn {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container (max-width: 380px) {
  .ya-shape-picker .ya-btns { grid-template-columns: repeat(2, 1fr); }
}