/* framecrypt.css — post-specific styles for /blog/framecrypt.html.
   Same quiet recipe as the Hamming/Reed–Solomon posts (notes, tables,
   SVG figures), fc- prefixed, plus a pipeline chip strip for the
   encode/decode walkthroughs. */

/* ── callout note ── */
.fc-note {
  position: relative;
  margin: 1.75rem 0;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card-bg));
}

.fc-note__tag {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 5px;
  background: var(--card-bg);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.fc-note__body {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--soft);
}

.fc-note__body strong { color: var(--ink); font-weight: 600; }

.fc-note--idea {
  --idea-accent: #a07d1c;
  border-color: color-mix(in srgb, var(--idea-accent) 28%, var(--line));
  border-left-color: var(--idea-accent);
  background: color-mix(in srgb, var(--idea-accent) 6%, var(--card-bg));
}

[data-theme="dark"] .fc-note--idea {
  --idea-accent: #f9e2af;
}

.fc-note--idea .fc-note__tag {
  border-color: color-mix(in srgb, var(--idea-accent) 35%, var(--line));
  color: var(--idea-accent);
}

.fc-note__bulb {
  margin-right: 0.25rem;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -0.05em;
}

/* ── wrong-way variant for the "what went wrong" sins ── */
.fc-note--bug {
  --bug-accent: #b3565e;
  border-color: color-mix(in srgb, var(--bug-accent) 28%, var(--line));
  border-left-color: var(--bug-accent);
  background: color-mix(in srgb, var(--bug-accent) 6%, var(--card-bg));
}

[data-theme="dark"] .fc-note--bug {
  --bug-accent: #f38ba8;
}

.fc-note--bug .fc-note__tag {
  border-color: color-mix(in srgb, var(--bug-accent) 35%, var(--line));
  color: var(--bug-accent);
}

/* ── tables ── */
.fc-table-wrap { overflow-x: auto; margin: 1.5rem 0; }

.fc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12.5px;
}

.fc-table caption {
  margin-bottom: 0.6rem;
  font-size: 12px;
  color: var(--muted);
  text-align: left;
}

.fc-table th,
.fc-table td {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  text-align: center;
}

.fc-table th {
  color: var(--accent);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 7%, var(--card-bg));
}

.fc-table td { color: var(--soft); }
.fc-table td strong { color: var(--ink); }
.fc-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.fc-table .fc-table__row-head { color: var(--muted); text-align: left; white-space: nowrap; }

/* ── SVG figures ── */
.fc-svg { width: 100%; height: auto; display: block; }

.fc-figure {
  margin: 1.75rem 0;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-bg);
}

.fc-figure__title {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* plot primitives */
.fc-plot__grid { stroke: color-mix(in srgb, var(--line) 60%, transparent); stroke-width: 1; }
.fc-plot__axis { stroke: var(--muted); stroke-width: 1.4; }
.fc-plot__curve { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.fc-plot__curve--ghost { stroke: color-mix(in srgb, var(--accent) 35%, transparent); stroke-dasharray: 4 4; }
.fc-plot__dot { fill: var(--accent); stroke: var(--card-bg); stroke-width: 2; }
.fc-plot__label { fill: var(--muted); font-family: var(--mono); font-size: 9px; }
.fc-plot__label--ink { fill: var(--ink); }
.fc-plot__line--good { stroke: var(--moss); stroke-width: 2; }
.fc-plot__line--bad { stroke: #b3565e; stroke-width: 1.6; stroke-dasharray: 4 4; }
[data-theme="dark"] .fc-plot__line--bad { stroke: #f38ba8; }

/* bit blocks in the frame-grid figure */
.fc-plot__cell { stroke: var(--line); stroke-width: 1; }
.fc-plot__cell--on { fill: var(--ink); }
.fc-plot__cell--off { fill: var(--card-bg); }
.fc-plot__center { fill: var(--accent); }

/* ── pipeline chip strip ── */
.fc-pipe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: center;
  margin: 0.4rem 0;
  font-family: var(--mono);
}

.fc-pipe__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-bg);
}

.fc-pipe__label {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.fc-pipe__val {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  white-space: nowrap;
}

.fc-pipe__arrow {
  color: var(--muted);
  font-size: 0.9rem;
}

.fc-pipe__stage--shannon {
  border-color: color-mix(in srgb, var(--moss) 60%, var(--line));
  background: color-mix(in srgb, var(--moss) 12%, var(--card-bg));
}

.fc-pipe__stage--shannon .fc-pipe__val { color: var(--moss); }

.fc-pipe__stage--noise {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--rosy) 65%, var(--line));
  background: color-mix(in srgb, var(--rosy) 9%, var(--card-bg));
}

.fc-pipe__stage--noise .fc-pipe__val { color: var(--rosy); }

/* byte-layout strip for the container header */
.fc-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.4rem 0;
  font-family: var(--mono);
}

.fc-layout__field {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  text-align: center;
}

.fc-layout__field + .fc-layout__field { border-left: none; }
.fc-layout__field:first-child { border-radius: 8px 0 0 8px; }
.fc-layout__field:last-child { border-radius: 0 8px 8px 0; }

.fc-layout__name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.fc-layout__size {
  display: block;
  font-size: 10px;
  color: var(--muted);
}

.fc-layout__field--parity {
  border-color: color-mix(in srgb, var(--moss) 60%, var(--line));
  background: color-mix(in srgb, var(--moss) 12%, var(--card-bg));
}

.fc-layout__field--parity .fc-layout__name { color: var(--moss); }

/* long branch names in headings/prose (refactor/minimal-fast-core …) may
   break mid-token rather than overflow the column on narrow screens */
.post-content h2 code,
.post-content p code,
.fc-note__body code { overflow-wrap: anywhere; }

/* Em text + note label (same accents as the sibling posts) */
.em__text { color: var(--torus-1); }
.note_span { color: var(--moss); }

@media (max-width: 640px) {
  /* wide MathML (eq 4 especially): the .eq row becomes a scroller with the
     number riding along inline after the formula (never overlapping it).
     `safe center` keeps short equations centered but left-anchors a long one
     so its start is still reachable when it scrolls. Don't size the <math>
     element itself — MathML layout breaks under forced CSS widths. */
  .post-content .eq {
    display: flex;
    align-items: center;
    justify-content: safe center;
    gap: 0.6rem;
    padding: 0 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* auto side-margins center the formula in the free space while pushing the
     equation number flush to the right edge (short eqs); when a wide eq fills
     the row the autos collapse and it just scrolls, number trailing after. */
  .post-content .eq math { flex: none; margin: 0 auto; }

  .post-content .eq__n {
    position: static;
    flex: none;
    transform: none;
  }

  /* the pipeline goes vertical: one stage per row, arrows point down.
     Wrapped rows left arrows dangling at the line ends — this reads as a
     single top-to-bottom flow instead. */
  .fc-pipe { flex-direction: column; gap: 0.3rem; }
  .fc-pipe__stage { width: min(100%, 15rem); }
  .fc-pipe__arrow { transform: rotate(90deg); line-height: 1; }

  /* the byte-layout strip stacks vertically: shared edges flip from
     left/right to top/bottom, radii follow */
  .fc-layout { flex-direction: column; align-items: stretch; }
  .fc-layout__field + .fc-layout__field { border-left: 1px solid var(--line); border-top: none; }
  .fc-layout__field:first-child { border-radius: 8px 8px 0 0; }
  .fc-layout__field:last-child { border-radius: 0 0 8px 8px; }
}