/* /noodles: let's code some noodles. The reading layout, the chrome, the
   notes, the photos (plates) and the section dots come from
   /lib/article/article.css. What is this page's own: the diagrams' thin
   lines, solid fills and words held at the meta size; the code (the list's
   two columns, the pasta's loop, the install lines); the list's grid; the
   pasta's code beside its grid. Colours, type scale and spacing tokens come
   from /style.css; nothing here sets a font-size outside that scale or adds
   a colour. */

/* ---------- the diagrams ---------- */

/* An svg scales with its viewBox, and so would its words. The renderer
   measures the scale (--svg-scale: viewBox width over rendered width) and
   this cancels it, so the words stand at the meta size on the page at every
   width, like the caption under them. */
.fig .fig__svg text { font-size: calc(var(--t-meta) * var(--svg-scale, 1)); }

/* a leader, the wall as it was: thinner than the ink */
.fig .fig__svg .thin {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.75;
  stroke-linecap: round;
}

/* a leader's end, the seam; the bead in the bulges */
.fig .fig__svg .dot,
.fig .fig__svg .solid { fill: var(--ink); }

/* ---------- code ---------- */

.fig .code {
  margin: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--ink);
  white-space: normal; /* the breaks are the lines' own: one element per line */
}

/* a line that wraps continues indented, so it still reads as one line */
.fig .code .code__line {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-left: 4ch;
  text-indent: -4ch;
}

.fig .code .code__c { color: var(--ink-muted); }

/* inside a block (the pasta's loop) a line that wraps continues deeper than
   the block's own indent, so it can't be read as the next line */
.fig .code .code__line--in { padding-left: 8ch; text-indent: -8ch; }
.fig .code .code__line--in2 { padding-left: 12ch; text-indent: -12ch; }

/* and it breaks only between these: a group that reads as one */
.fig .code .nw { white-space: nowrap; }

/* ---------- the list: the drawing, the python, the G-code ---------- */
/* On a phone the three stack. With room for two columns the drawing goes
   on top and the code's rows line up side by side; with room for three, the
   drawing stands to their left. The rows are the grid's: each column of
   code is a subgrid, so a line that wraps makes its row taller in both. */

.fig--list { container: list / inline-size; }

.list {
  display: grid;
  gap: 1.25rem;
  justify-content: start;
}

.list__draw { width: 10rem; max-width: 100%; }

/* the G-code's blank rows (the list's opening, the extruder, the closing)
   only matter where the rows line up */
.list .code__line:empty { display: none; }

.list .code__line[data-point] { border-radius: 2px; }

/* one point lit in all three: the row inverted, the corner and its number
   filled, the segment that leads to it thicker */
.list .code__line.is-lit {
  background: var(--ink);
  color: var(--paper);
}

.list__svg .list__num circle {
  r: calc(0.95 * var(--t-meta) * var(--svg-scale, 1));
  fill: transparent;
}

.list__svg .list__num.is-lit circle { fill: var(--ink); }
.fig .list__svg .list__num.is-lit text { fill: var(--paper); }

.list__svg .list__dot {
  fill: var(--ink);
  transform-box: fill-box;
  transform-origin: center;
}

.list__svg .list__dot.is-lit { transform: scale(1.7); }
.fig .list__svg .list__seg.is-lit .ink { stroke-width: 3; }

@container list (min-width: 34rem) {
  .list {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: auto repeat(8, auto);
    column-gap: 1.5rem;
    row-gap: 0;
  }

  .list__draw {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 8rem;
    margin-bottom: 1rem;
  }

  .list .code {
    grid-row: 2 / -1;
    display: grid;
    grid-template-rows: subgrid;
  }

  .list .list__py { grid-column: 1; }
  .list .list__gc { grid-column: 2; }
  .list .code__line:empty { display: block; }
}

@container list (min-width: 41.5rem) {
  .list {
    grid-template-columns: 6.5rem max-content minmax(0, 1fr);
    grid-template-rows: repeat(8, auto);
    column-gap: 1rem;
  }

  .list__draw {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: auto;
    margin: 0;
  }

  .list .code { grid-row: 1 / -1; }
  .list .list__py { grid-column: 2; }
  .list .list__gc { grid-column: 3; margin-left: 0.5rem; }
}

/* ---------- the pasta: the loop beside eight drawings at one scale ---------- */
/* The code first: the numbers, a blank line, the loop. On a phone and up to
   the wide layout it stands above the pictures, and the numbers stay in
   view below the wordmark while the pictures scroll past (sticky; pasta.js
   says when they stick, and then the space above them is covered in paper,
   so nothing shows between them and the top of the window). With the
   margin beside the text, the figure takes the margin too: the code on the
   left, the pictures beside it, the code staying in view. */

.pastafig__nums,
.pastafig__loop { padding: 0.3rem 0; }

.fig .pastafig__loop { margin-top: 0.75rem; }

.fig .pastafig .pasta { margin-top: 1.75rem; }

/* the numbers that differ from ziti's: inverted, like the list's lit rows.
   The ink reaches a little past the digits (padding), and the margin takes
   that back, so nothing after them moves and the comma stays clear */
.pastafig__v.is-diff {
  background: var(--ink);
  color: var(--paper);
  padding: 0.12em 0.14em;
  margin: 0 -0.14em;
  border-radius: 2px;
}

/* the pasta whose numbers the code shows: its name inverted the same way */
.fig--pasta.is-live .pasta > li { cursor: pointer; }

.fig .pasta > li.is-shown .pasta__name {
  background: var(--ink);
  color: var(--paper);
  padding: 0.1em 0.25em;
  margin: 0 -0.25em;
  border-radius: 2px;
}

/* (Only with the script, .is-live: without it nothing can be picked, so
   nothing needs to stay in view.) */
@media (max-width: 1099px) {
  .pastafig__code { display: contents; }

  .is-live .pastafig__nums {
    position: sticky;
    top: calc(clamp(1rem, 2.5vw, 2rem) + 3rem);
    z-index: 2;
    background: var(--paper);
  }

  /* stuck: paper from the top of the window down to the numbers, and a
     short fade under them for what scrolls in beneath */
  .pastafig__nums.is-stuck::before,
  .pastafig__nums.is-stuck::after {
    content: "";
    position: absolute;
    left: calc(-1 * var(--edge));
    right: calc(-1 * var(--edge));
    pointer-events: none;
  }

  .pastafig__nums.is-stuck::before {
    bottom: 100%;
    height: 100vh;
    background: var(--paper);
  }

  .pastafig__nums.is-stuck::after {
    top: 100%;
    height: 1rem;
    background: linear-gradient(var(--paper), transparent);
  }
}

@media (min-width: 1100px) {
  .pastafig {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
    margin-right: calc(-1 * (var(--note-w) + var(--note-gap)));
  }

  .is-live .pastafig__code {
    position: sticky;
    top: clamp(4.5rem, 10vh, 7rem);
  }

  .fig .pastafig .pasta { margin-top: 0.3rem; }
}

/* Each picture is the same 36 mm wide, so at the same width on the page
   they share one scale; they stand on a common line, their names under
   them. Four across, two on a phone. */

.fig .pasta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fig .pasta > li {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0.4rem;
}

.fig .pasta img {
  align-self: end;
  width: 100%;
  height: auto;
  border: 0;
  background: none;
}

.fig .pasta p {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.35;
  color: var(--ink-muted);
}

.fig .pasta .pasta__name { color: var(--ink); }

@media (max-width: 720px) {
  .fig .pasta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the margin, below the wide layout ---------- */
/* where the lib leaves a margin figure in the column, it keeps a margin
   figure's size instead of the column's: a photo, not a poster */
@media (max-width: 1099px) {
  .fig--margin { max-width: min(100%, 22rem); }
}