/* Generative Cryptography post — directions table, autoresearch graph, video embed.
   Styles carried over from the original post (nicola.io), matching how it actually
   renders: the base Tufte table (serif, right-aligned, ruled top and bottom) — the
   original's own #three-directions override never matches on the live page. Widths
   are adapted from his wide Tufte column to this site's 640px text measure. */

.table-wrapper {
  overflow-x: auto;
}

table.gc-directions {
  width: 100%;
  max-width: 640px;
  text-align: right;
  font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-size: 1.4rem;
  line-height: 1.4;
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
  border-top: 2px solid #333333;
  border-bottom: 2px solid #333333;
  border-collapse: separate;
  border-spacing: 0 5px;
  font-feature-settings: "tnum";
}

table.gc-directions thead th {
  border-bottom: 1px solid #333333;
  font-weight: 400;
}

table.gc-directions th,
table.gc-directions td {
  padding: 0.15rem 0.5rem;
}

@media screen and (max-width: 760px) {
  table.gc-directions {
    font-size: 1.1rem;
  }
  table.gc-directions th,
  table.gc-directions td {
    padding: 0.15rem 0.3rem;
  }
}

.video-embed {
  width: 100%;
  max-width: 640px;
  margin: 1.4rem 0 2.8rem;
  aspect-ratio: 16/9;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.autoresearch-graph {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 2.8rem 0 3.2rem;
  padding: 1.4rem 1.6rem 1.2rem;
  border: 1px solid rgba(51, 51, 51, 0.22);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.45);
}

.autoresearch-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  font-family: "Gill Sans", "Gill Sans MT", "Lato", Calibri, sans-serif;
}

.autoresearch-kicker,
.autoresearch-heading > div > strong,
.autoresearch-result span {
  display: block;
}

.autoresearch-kicker {
  margin-bottom: 0.25rem;
  color: #828282;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.autoresearch-heading > div > strong {
  font-size: 1.45rem;
  font-weight: 500;
}

.autoresearch-result {
  color: #0099FF;
  text-align: right;
  white-space: nowrap;
}

.autoresearch-result strong {
  font-size: 1.8rem;
  line-height: 1;
}

.autoresearch-result span {
  margin-top: 0.2rem;
  color: #737373;
  font-size: 0.75rem;
}

.autoresearch-graph svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.8rem;
  overflow: visible;
  font-family: "Gill Sans", "Gill Sans MT", "Lato", Calibri, sans-serif;
}

.graph-grid line {
  stroke: rgba(51, 51, 51, 0.13);
  stroke-width: 1;
}

.graph-axis-labels text {
  fill: #949494;
  font-size: 13px;
  text-anchor: end;
}

.graph-axis-labels .axis-title {
  fill: #737373;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-anchor: start;
}

.candidate-points circle {
  fill: silver;
  opacity: 0.7;
}

.improvement-area {
  fill: rgba(0, 153, 255, 0.08);
}

.improvement-line {
  fill: none;
  stroke: #0099FF;
  stroke-width: 4;
  stroke-linejoin: round;
}

.accepted-points circle {
  fill: rgb(249, 249, 249);
  stroke: #0099FF;
  stroke-width: 4;
}

.graph-annotations line {
  stroke: rgba(59, 59, 59, 0.45);
  stroke-dasharray: 3 3;
}

.graph-annotations text {
  fill: dimgray;
  font-size: 14px;
}

.graph-annotations .baseline-label,
.graph-annotations .result-label {
  fill: #0099FF;
  font-size: 16px;
  font-weight: 600;
}

.autoresearch-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem;
  border-radius: 3px;
  background: rgba(0, 153, 255, 0.06);
  color: #5a5a5a;
  font-family: "Gill Sans", "Gill Sans MT", "Lato", Calibri, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.015em;
}

.autoresearch-loop b {
  color: #0099FF;
  font-weight: 400;
}

/* The site's tufte.css floats figcaptions into the margin column; the
   original page has no such rule, its caption sits inside the figure box. */
.autoresearch-graph figcaption {
  float: none;
  clear: both;
  max-width: none;
  margin-top: 0.8rem;
  color: #6e6e6e;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.35;
}

@media screen and (max-width: 760px) {
  .video-embed {
    width: 100%;
  }
  .autoresearch-graph {
    width: 100%;
    padding: 1rem 0.7rem;
  }
  .autoresearch-heading {
    gap: 1rem;
  }
  .autoresearch-heading > div > strong {
    font-size: 1.2rem;
  }
  .autoresearch-loop {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .autoresearch-graph figcaption {
    font-size: 0.9rem;
  }
}