/* ==========================================================================
   Understanding Distributions — tool-specific styles.

   Everything generic (cards, tables, pills, the commit card, the raw-data
   drawer, the chart furniture) comes from shared/css/concept-kit.css and is
   prefixed `ck-`. Only what is unique to THIS tool lives here, prefixed `ud-`:
   the two-tier navigation, the distribution chart's own marks, the four
   narrative blocks that make a panel an argument rather than a plot, and the
   mechanism simulator.

   Colour discipline, inherited from concept-kit and still load-bearing:
     --ck-shift  the quantity you are choosing (capacity, threshold, the bar)
     --ck-hold   the quantity that does not move (the observation, the median)
     --ck-alt    the baseline being argued against (the average, the control)
   A panel that colours its "average" line the same as its "capacity" line has
   thrown away the only visual cue distinguishing them.
   ========================================================================== */

/* ---------- two-tier navigation ----------
   Twenty-four tabs in one undifferentiated strip is a wall. Grouping them by
   what KIND of question they answer — counting, measuring, choosing — does
   most of the teaching before a student clicks anything. */
.ud-nav { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

.ud-nav-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--app-border, #d6dfea);
}
.ud-nav-row:last-child { border-bottom: none; padding-bottom: 0; }

.ud-nav-group {
  flex: none;
  width: 130px;
  padding-top: 8px;
  font-family: ui-monospace, Menlo, Consolas, 'Courier New', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--app-muted, #5f6b7a);
  cursor: help;
}

.ud-nav-strip { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }

button.ud-tab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-width: 132px;
  padding: 9px 13px;
  border: 1px solid var(--app-border, #d6dfea);
  border-radius: 7px;
  background: var(--app-card-bg, #fff);
  color: var(--app-text, #1f2a37);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
button.ud-tab:hover { border-color: var(--app-accent, #2a7de1); }
button.ud-tab:focus-visible { outline: 2px solid var(--chart-secondary, #8b5cf6); outline-offset: 2px; }
button.ud-tab.ud-active {
  background: var(--app-text, #1f2a37);
  border-color: var(--app-text, #1f2a37);
  color: #fff;
}

.ud-tab-name { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.ud-tab-hint {
  font-size: 11px;
  line-height: 1.35;
  color: var(--app-muted, #5f6b7a);
  max-width: 22ch;
}
button.ud-tab.ud-active .ud-tab-hint { color: #cfdcec; }

/* ---------- panels ---------- */
.ud-panels { margin-top: 26px; }
.ud-panel[hidden] { display: none; }
.ud-panel { padding-bottom: 40px; }

/* ---------- 2. the naive answer ----------
   Deliberately styled as a quotation rather than a warning. It is not a
   mistake yet; it is the sensible-sounding position the panel is about to
   test, and colouring it red up front would give the game away. */
.ud-naive {
  background: var(--ck-surface-sunk, #f8fafc);
  border-left: 3px solid var(--ck-alt, #f59e0b);
  border-radius: 0 8px 8px 0;
  padding: 16px 22px;
  margin: 0 0 22px;
  max-width: 76ch;
}
.ud-naive-lab {
  font-family: var(--ck-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-alt, #f59e0b);
  margin: 0 0 8px;
}
.ud-naive-claim {
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ck-ink, #1f2a37);
  margin: 0 0 10px;
}
.ud-naive-who { font-size: 14px; color: var(--ck-muted, #5f6b7a); margin: 0; }

/* ---------- 3. the figure's own marks ---------- */
.ud-panel .ud-bar { stroke: none; }
.ud-panel .ud-bar.ud-out { fill: var(--ck-hold, #2a7de1); fill-opacity: .28; }
.ud-panel .ud-bar.ud-in { fill: var(--ck-shift, #8b5cf6); fill-opacity: .72; }

.ud-panel .ud-area { stroke: none; }
.ud-panel .ud-area.ud-out { fill: var(--ck-hold, #2a7de1); fill-opacity: .14; }
.ud-panel .ud-area.ud-in { fill: var(--ck-shift, #8b5cf6); fill-opacity: .42; }
.ud-panel .ud-curve {
  fill: none;
  stroke: var(--ck-hold-deep, #1a5fb4);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.ud-panel .ud-marker { stroke-width: 2; stroke-dasharray: 6 4; }
.ud-panel .ud-marker-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  stroke: none;
}
/* The region caption sits over the bars, so it needs a halo or it disappears
   into whichever part of the distribution happens to be tall. */
.ud-panel .ud-region-label {
  font-size: 12px;
  font-weight: 700;
  fill: var(--ck-shift, #8b5cf6);
  letter-spacing: .08em;
  text-transform: uppercase;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* ---------- the Bernoulli icon array ---------- */
.ud-panel .ud-icon { stroke: none; }
.ud-panel .ud-icon.ud-in { fill: var(--ck-shift, #8b5cf6); fill-opacity: .9; }
.ud-panel .ud-icon.ud-out { fill: var(--ck-hold, #2a7de1); fill-opacity: .18; }
.ud-panel .ud-icon-caption {
  font-size: 13px;
  font-weight: 700;
  fill: var(--ck-muted, #5f6b7a);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ud-panel .ud-icon-legend {
  font-size: 15px;
  font-weight: 700;
  fill: var(--ck-ink, #1f2a37);
}
.ud-panel .ud-icon-note {
  font-size: 14px;
  fill: var(--ck-muted, #5f6b7a);
}

.ud-tone-hold { stroke: var(--ck-hold, #2a7de1); fill: var(--ck-hold, #2a7de1); }
.ud-tone-shift { stroke: var(--ck-shift, #8b5cf6); fill: var(--ck-shift, #8b5cf6); }
.ud-tone-alt { stroke: var(--ck-alt, #f59e0b); fill: var(--ck-alt, #f59e0b); }
/* Marker LABELS must not inherit the line stroke, or the glyphs come out
   outlined in their own colour and turn muddy at small sizes. */
.ud-panel text.ud-tone-hold,
.ud-panel text.ud-tone-shift,
.ud-panel text.ud-tone-alt { stroke: none; }

/* ---------- 1. what this distribution is for ----------
   Sits ABOVE the scenario on purpose. A student who meets the Poisson as
   "the chat-staffing one" has learned a story; one who meets it as "counts of
   independent events in a fixed window" has learned a tool they can carry to
   a problem nobody wrote a panel about. */
.ud-usewhen {
  background: var(--ck-hold-wash, #e7f0fc);
  border: 1px solid var(--ck-hold-line, #c3dbf6);
  border-left: 3px solid var(--ck-hold, #2a7de1);
  border-radius: 0 8px 8px 0;
  padding: 18px 24px 14px;
  margin: 0 0 26px;
  max-width: 82ch;
}
.ud-usewhen-lab {
  font-family: var(--ck-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-hold, #2a7de1);
  margin: 0 0 8px;
}
.ud-usewhen-quantity {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ck-ink, #1f2a37);
  margin: 0 0 14px;
}
.ud-usewhen-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
}
.ud-usewhen-cols h4 {
  font-family: var(--ck-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ck-muted, #5f6b7a);
  margin: 0 0 6px;
}
.ud-usewhen-cols ul { margin: 0 0 10px; padding-left: 18px; }
.ud-usewhen-cols li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ck-ink-soft, #3a4756);
  margin-bottom: 4px;
}
.ud-usewhen-not {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ck-muted, #5f6b7a);
  border-top: 1px dashed var(--ck-hold-edge, #9dc3ee);
  padding-top: 10px;
  margin: 4px 0 0;
}

/* ---------- 4. the equation ----------
   Two halves that must read as one thing: the general form on top, and the
   same expression underneath with this panel's slider values dropped into it.
   The "right now" column of the symbol table is the hinge between them. */
.ud-equation {
  background: var(--ck-panel, #fff);
  border: 1px solid var(--ck-rule, #d6dfea);
  border-top: 3px solid var(--ck-ink, #1f2a37);
  border-radius: 8px;
  padding: 20px 24px 18px;
  margin-bottom: 10px;
}
.ud-eq-lab {
  font-family: var(--ck-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-muted, #5f6b7a);
  margin: 0 0 4px;
}
.ud-eq-title {
  font-family: var(--ck-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 10px;
  color: var(--ck-ink, #1f2a37);
}
.ud-eq-general {
  background: var(--ck-surface-sunk, #f8fafc);
  border-radius: 6px;
  padding: 4px 16px;
  margin: 12px 0 18px;
  overflow-x: auto;
}

.ud-eq-where { margin-bottom: 18px; }
.ud-eq-where td, .ud-eq-where th { vertical-align: top; }
.ud-eq-where td.ud-eq-sym {
  text-align: left;
  width: 12%;
  white-space: nowrap;
  font-size: 15px;
}
.ud-eq-where td.ud-eq-meaning {
  text-align: left;
  font-family: var(--ck-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ck-ink-soft, #3a4756);
}
.ud-eq-where td.ud-eq-value {
  width: 24%;
  font-weight: 700;
  color: var(--ck-shift, #8b5cf6);
}

.ud-eq-worked-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ck-ink, #1f2a37);
  font-weight: 600;
  margin: 0 0 4px;
}
/* The worked steps are the payoff, so they get the accent border rather than
   the general form above them. */
.ud-eq-worked {
  border-left: 3px solid var(--ck-shift, #8b5cf6);
  background: var(--ck-shift-wash, #f3eefe);
  border-radius: 0 6px 6px 0;
  padding: 2px 18px;
  margin: 10px 0 12px;
  overflow-x: auto;
}
.ud-eq-step { margin: 0; }
.ud-eq-says {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ck-ink, #1f2a37);
  margin: 0;
  max-width: 78ch;
}
.ud-eq-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ck-muted, #5f6b7a);
  border-top: 1px solid var(--ck-rule-row, #eef2f8);
  padding-top: 12px;
  margin: 14px 0 0;
  max-width: 80ch;
}

/* Keep MathJax from overflowing a narrow panel silently. */
.ud-equation mjx-container { max-width: 100%; }
.ud-equation mjx-container[display="true"] { margin: 0.8em 0; }

/* ---------- 5. the answer ---------- */
.ud-answer {
  background: var(--ck-panel, #fff);
  border: 1px solid var(--ck-rule, #d6dfea);
  border-top-width: 3px;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 10px;
}
.ud-answer-lab {
  font-family: var(--ck-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-muted, #5f6b7a);
  margin: 0 0 10px;
}
.ud-answer-headline {
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  max-width: 48ch;
}
.ud-answer-headline.ud-tone-good { color: var(--ck-good, #2f9d58); }
.ud-answer-headline.ud-tone-warn { color: #b26a00; }
.ud-answer-headline.ud-tone-bad { color: var(--ck-bad, #d64747); }
.ud-answer-headline.ud-tone-hold { color: var(--ck-hold, #2a7de1); }
.ud-answer table { margin-bottom: 16px; }
.ud-answer-verdict {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ck-ink-soft, #3a4756);
  border-top: 1px solid var(--ck-rule-row, #eef2f8);
  padding-top: 14px;
  margin: 0;
  max-width: 78ch;
}

/* ---------- 4. the mechanism simulator ---------- */
.ud-mechanism { margin-top: 30px; }
.ud-sim { margin-top: 18px; }
.ud-sim-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ud-sim-readout {
  font-family: var(--ck-data);
  font-size: 12.5px;
  color: var(--ck-muted, #5f6b7a);
  margin: 6px 0 0;
  line-height: 1.7;
}
.ud-sim svg { background: var(--ck-surface-sunk, #f8fafc); border-radius: 6px; }
.ud-sim-bar-rect { fill: var(--ck-shift, #8b5cf6); fill-opacity: .55; }
.ud-sim-truth {
  fill: none;
  stroke: var(--ck-ink, #1f2a37);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

/* ---------- 7. when it breaks ---------- */
.ud-breaks {
  background: #fff8f8;
  border-left: 3px solid var(--ck-bad, #d64747);
  border-radius: 0 8px 8px 0;
  padding: 16px 22px;
  margin: 26px 0 0;
  max-width: 80ch;
}
.ud-breaks-lab {
  font-family: var(--ck-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-bad, #d64747);
  margin: 0 0 8px;
}
.ud-breaks p:last-child {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ck-ink-soft, #3a4756);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ud-nav-row { flex-direction: column; gap: 8px; }
  .ud-nav-group { width: auto; padding-top: 0; }
  button.ud-tab { min-width: 0; flex: 1 1 140px; }
  .ud-answer-headline { font-size: 18px; }
  .ud-usewhen-cols { grid-template-columns: 1fr; }
  .ud-eq-where td.ud-eq-sym { width: 18%; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  button.ud-tab { transition: none; }
  .ud-mode-pill { transition: none; }
}

/* =====================================================================
   Concept demos
   =====================================================================
   The gallery teaches one distribution at a time. These teach the thing that
   sits between them, so they get a visual identity of their own: no equation
   card, a question stated at the top instead of a company, and a chart that
   is always a COMPARISON rather than a single shaded shape. */

.ud-question {
  background: var(--ck-alt-wash, #f4f1ea);
  border: 1px solid var(--ck-alt-line, #ded6c6);
  border-left: 3px solid var(--ck-alt, #9a7b3f);
  border-radius: 0 8px 8px 0;
  padding: 16px 24px 14px;
  margin: 0 0 24px;
  max-width: 82ch;
}
.ud-question-lab {
  font-family: var(--ck-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-alt, #9a7b3f);
  margin: 0 0 8px;
}
.ud-question-text {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ck-ink, #1f2a37);
  margin: 0;
}

.ud-concept-body { margin: 0 0 20px; }

/* ---------- the overlay chart ---------- */
/* Five fixed series colours. They are assigned by POSITION rather than by
   meaning, because on these panels the series are peers being compared and
   none of them is the "good" one. */
.ud-series {
  fill: none;
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ud-series-0 { stroke: #2a7de1; }
.ud-series-1 { stroke: #9a7b3f; }
.ud-series-2 { stroke: #c2410c; }
.ud-series-3 { stroke: #15803d; }
.ud-series-4 { stroke: #7c3aed; }

.ud-legend-label {
  font-family: var(--ck-data);
  font-size: 13px;
  fill: var(--ck-ink-soft, #3a4756);
  stroke: none;
  dominant-baseline: middle;
}
.ud-empty-note {
  font-family: var(--ck-data);
  font-size: 15px;
  fill: var(--ck-muted, #5f6b7a);
  stroke: none;
}

.ud-compare-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.ud-compare-table th,
.ud-compare-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--ck-rule, #d6dfea);
  text-align: right;
  font-size: 14px;
}
.ud-compare-table thead th {
  font-family: var(--ck-data);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ck-muted, #5f6b7a);
  border-bottom: 2px solid var(--ck-ink, #1f2a37);
  vertical-align: bottom;
}
.ud-compare-table th[scope="row"],
.ud-compare-table thead th:first-child { text-align: left; font-weight: 600; }
/* The rows the argument actually turns on. Without this every row looks
   equally important and the reader has to be told in prose which to read. */
.ud-compare-table tr.ud-compare-key td,
.ud-compare-table tr.ud-compare-key th { background: var(--ck-hold-wash, #e7f0fc); font-weight: 700; }

/* ---------- the sorter ---------- */
.ud-sorter-list { margin: 0; padding-left: 22px; }
.ud-sorter-item {
  border-left: 3px solid var(--ck-rule, #d6dfea);
  padding: 4px 0 14px 16px;
  margin: 0 0 18px;
}
.ud-sorter-item.ud-sorter-right { border-left-color: var(--ck-shift, #15803d); }
.ud-sorter-item.ud-sorter-wrong { border-left-color: var(--ck-warn, #c2410c); }
.ud-sorter-item.ud-sorter-blank { border-left-color: var(--ck-muted, #5f6b7a); }
.ud-sorter-prompt {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ck-ink, #1f2a37);
  margin: 0 0 10px;
}
.ud-sorter-select {
  font-family: inherit;
  font-size: 15px;
  padding: 7px 10px;
  border: 1px solid var(--ck-rule, #d6dfea);
  border-radius: 6px;
  background: var(--ck-panel, #fff);
  color: var(--ck-ink, #1f2a37);
  min-width: 15rem;
}
.ud-sorter-feedback { margin-top: 10px; max-width: 76ch; }
.ud-sorter-verdict {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 4px;
  color: var(--ck-ink, #1f2a37);
}
.ud-sorter-right .ud-sorter-verdict { color: var(--ck-shift, #15803d); }
.ud-sorter-wrong .ud-sorter-verdict { color: var(--ck-warn, #c2410c); }
.ud-sorter-why {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ck-ink-soft, #3a4756);
  margin: 0;
}

/* ---------- process mode picker ---------- */
.ud-mode-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ud-mode-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 9px 14px;
  border: 1px solid var(--ck-rule, #d6dfea);
  border-radius: 8px;
  background: var(--ck-panel, #fff);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ud-mode-pill:hover { border-color: var(--ck-hold, #2a7de1); }
.ud-mode-pill.is-active {
  border-color: var(--ck-ink, #1f2a37);
  background: var(--ck-hold-wash, #e7f0fc);
}
.ud-mode-name { font-size: 15px; font-weight: 600; color: var(--ck-ink, #1f2a37); }
.ud-mode-hint {
  font-family: var(--ck-data);
  font-size: 11.5px;
  color: var(--ck-muted, #5f6b7a);
}
.ud-mode-blurb {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ck-ink-soft, #3a4756);
  max-width: 82ch;
  margin: 0 0 14px;
}

@media (max-width: 720px) {
  .ud-compare-table th, .ud-compare-table td { padding: 6px 7px; font-size: 13px; }
  .ud-sorter-select { min-width: 0; width: 100%; }
}

/* ---------- print ---------- */
@media print {
  .ud-nav, .ud-sim-bar, .ud-mode-pills, .professor-mode-banner { display: none; }
  .ud-panel[hidden] { display: none; }
}