/*
 * The "Specialist cooked you?" post: how external results are calculated.
 * Loaded only by that post. Each figure is a frame with data-theme="dark", so
 * the tokens inside it are the dark (media) values.
 */

.rk {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.rk section,
.rk-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.rk p {
  margin: 0;
}

.rk h2,
.rk h3 {
  margin: 0;
}

.rk h3 {
  margin-top: var(--space-4);
}

.rk-lede {
  font-size: 20px;
  line-height: 30px;
}

.rk svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.rk svg text {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  fill: var(--muted);
}

/* Frames */
.rk-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4);
  background: var(--frame);
  color: var(--ink);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
}

.rk .cap {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
  color: var(--muted);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.panel-title {
  font-weight: 600;
  color: var(--muted);
}

.rk-btn {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--muted);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: 600 var(--text-small-size) / var(--text-small-line) var(--font-sans);
  cursor: pointer;
}

.rk-btn:hover {
  border-color: var(--ink);
}

.rk-btn[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--frame);
}

.seg,
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Same raw mark, three papers */
.hero-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-8);
  align-items: center;
}

.big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.big small {
  font-size: 0.42em;
  font-weight: 600;
  color: var(--muted);
}

.big--answer {
  color: var(--tangent-text);
}

.guess {
  margin-top: var(--space-2);
  color: var(--muted);
}

.rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.rk .row {
  display: grid;
  grid-template-columns: 7em 1fr 3.5em;
  gap: var(--space-2);
  align-items: center;
}

.rk .row .lbl {
  color: var(--muted);
}

.track {
  position: relative;
  height: 8px;
  background: var(--grid);
}

.fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ink);
  transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.row.on .fill {
  background: var(--tangent);
}

.val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mark25 {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 2px;
  background: var(--muted);
}

/* Numbered lists */
.rk .tldr {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: t;
}

.rk .tldr li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-2);
  margin: 0;
}

.rk .tldr li::before {
  counter-increment: t;
  content: counter(t);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  font-size: var(--text-caption-size);
  font-weight: 600;
}

/* Two years */
.yrs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.yr {
  display: grid;
  grid-template-columns: 5.5em 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}

.yr .val {
  min-width: 7.5em;
}

.arrive {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--grid);
  transition: opacity 0.6s;
}

.arrive b {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 40px;
  color: var(--tangent-text);
}

/* Sliders */
.ctrl {
  display: grid;
  grid-template-columns: 10em 1fr 3.5em;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}

.ctrl label {
  color: var(--muted);
}

.ctrl output {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rk input[type="range"] {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--ink);
}

.readout {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}

#pOut {
  color: var(--tangent-text);
}

/* Three runs */
.run-cap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 7em;
}

.rk .run-cap h3 {
  margin: 0;
  color: var(--ink);
}

.run-cap p {
  color: var(--muted);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--muted);
}

.legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--space-2);
  border-radius: 50%;
}

.sw-ia {
  background: var(--muted);
}

.sw-ea {
  background: var(--tangent);
}

.sw-gb {
  border: 1px dashed var(--ink);
}

.dot {
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

#runsSvg circle[data-kind] {
  cursor: pointer;
}

.dot-info {
  min-height: 3em;
}

/* Rulers */
.tx-out {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.tx-out .big {
  font-size: 48px;
}

.tx-out .arrow {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--muted);
}

.naive {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Adding it up */
.sum-wrap {
  padding-top: var(--space-8);
}

.sum {
  position: relative;
  display: flex;
  height: 24px;
  background: var(--grid);
}

.sum span {
  height: 100%;
  transition: width 0.5s;
}

.sum .a {
  background: var(--muted);
}

.sum .b {
  background: var(--tangent);
}

.cut {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 73%;
  width: 2px;
  background: var(--ink);
}

.cut em {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-caption-size);
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.sum-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.sum-line b {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
}

/* The 50 marks */
.m50 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.m50 .g {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.m50 .g span {
  color: var(--muted);
  font-size: var(--text-caption-size);
  font-weight: 600;
}

.m50 .g span em {
  font-style: normal;
  color: var(--ink);
}

.m50 .g b {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 224px;
}

.m50 .g i {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--ink);
  transition: background-color 0.25s ease, opacity 0.25s ease;
}

.m50 .g i.dim {
  opacity: 0.12;
}

.m50 .g i.on {
  background: var(--tangent);
}

.stu-line {
  font-variant-numeric: tabular-nums;
}

.stu-line b {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
}

.stu-note {
  min-height: 1.5em;
  color: var(--muted);
}

.m50-sum {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

/* Three boxes in a row */
.chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.chain > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--grid);
  border-radius: var(--radius-sm);
}

.chain .k {
  color: var(--muted);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: 500;
}

.chain b {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  font-variant-numeric: tabular-nums;
}

#youSvg {
  touch-action: pan-y;
  cursor: pointer;
}

/* Notes outside the frames */
.rk-note {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
}

.warn {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
}

.warn b {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.rk .quote {
  margin: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid var(--muted);
  color: var(--muted);
  font-style: italic;
}

.rk .quote ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}

.rk-sources {
  padding-top: var(--space-4);
  border-top: 1px solid var(--grid);
  color: var(--muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
}

/* Questions and myths */
.qa,
.myths {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--grid);
}

.qa > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--grid);
}

.rk .q {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
}

.myth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--grid);
}

.myth .claim {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.myth .claim::before {
  content: "Myth";
  display: block;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: 600;
}

@media (max-width: 600px) {
  .hero-grid,
  .myth {
    grid-template-columns: 1fr;
  }

  .rk .row {
    grid-template-columns: 6.5em 1fr 3.5em;
  }

  .yr {
    grid-template-columns: 5.5em 1fr;
  }

  .yr .val {
    grid-column: 1 / -1;
    text-align: left;
  }

  .ctrl {
    grid-template-columns: 1fr 3.5em;
  }

  .ctrl label {
    grid-column: 1 / -1;
  }

  .chain {
    grid-template-columns: 1fr;
  }

  .chain > div {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rk * {
    transition: none !important;
    animation: none !important;
  }
}