/* The written pattern page (page.mjs). Every class begins wp- and sits inside the site's pattern frame (.ff-pattern,
   .ff-slot, .ff-head, .ff-note, .button from shared.css and design.css). Colors, radii, shadows and spaces are the
   site's tokens and nothing else, so linen and midnight follow from tokens.css alone. Text is never under 13px
   (.8125rem); everything tappable is at least 44px; nothing is wider than a 390px screen. The one place with colors
   of its own is the graph's drawing, whose inks are attributes of the drawing (page.mjs), as a yarn's color is. */

.wp {
  --wp-cell: 20px;
  --wp-gutter: 7.25rem;
}
.wp-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* THE TOP, IN THE ONE ORDER OF A PATTERN PAGE (CONVENTIONS.md, the pattern page), the same in every craft:
     1 the name (.wp-head), with what is chosen in a line under it (.wp-chosen)
     2 the picture (.wp-stage)
     3 the download button (.wp-download > .wp-get) and under it the one line that says what the file is (.wp-files)
     4 the facts (.wp-facts)
     5 the choices (.wp-choices > .wp-choice), what changes the pattern first, the paper last (.wp-choice-paper)
     6 the rest: the place for the share row, the way to the rows, the sentence about the pattern
   One column on a phone, where the page's two groups (.wp-lead: everything but the picture, in this order;
   .wp-look: the picture) dissolve and the picture takes its place after the name. With room (900px) the picture
   stands on the left and the other group, in the same order, on the right. Nothing is fixed to the foot of the
   screen. (The button once rode there as a strip and lay over the facts.) */
.wp-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.wp-lead,
.wp-look {
  display: contents;
}
.wp-top .wp-head {
  order: 1;
}
.wp-top .wp-stage {
  order: 2;
}
.wp-top .wp-download {
  order: 3;
}
.wp-top .wp-facts {
  order: 4;
}
.wp-top .wp-choices {
  order: 5;
}
.wp-top .wp-share {
  order: 6;
}
.wp-top .wp-next {
  order: 7;
}
.wp-top .wp-about {
  order: 8;
}
.wp-head.ff-head {
  margin: var(--space-2) 0 0;
}
.wp-head h1 {
  margin-bottom: 0;
}
/* The line of facts under the name (the frame's own look, shared.css: .ff-factline), and under it, on a graph worked
   corner to corner, the one line that says what that is. */
.wp-head .ff-factline {
  margin-top: var(--space-2);
}
.wp-head > .ff-note {
  margin: var(--space-1) 0 0;
}
/* What is chosen, under the name: "Size: Long", and the way to change it. */
.wp-chosen {
  margin: var(--space-2) 0 0;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
.wp-chosen b {
  font-weight: 600;
  color: var(--ink);
}
.wp-chosen a {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 12px 0;
  margin-block: -12px;
  color: var(--spruce-deep);
  text-underline-offset: 4px;
}
.wp-stage {
  margin: 0;
  padding: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
}
.wp-stage img {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
}
/* The picture as the frame's button for a larger look (shared/look-frame.mjs): as wide as the picture and no
   wider, so that the glass on its corner stands on the picture. */
.wp-stage .ff-look-open {
  max-width: 30rem;
  margin: 0 auto;
}
.wp-stage figcaption {
  margin-top: var(--space-2);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ink-muted);
  text-align: center;
}

/* The facts: one block, a row for each (size, skill): its name on the left, the value beside it, and
   under the skill its reason. A row is as tall as its own words, so no cell stands half empty beside a fuller one
   (they were four cells two across: the size's cell was mostly blank beside the skill and its reason). */
.wp-facts {
  display: grid;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  overflow: hidden;
}
.wp-facts div {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--hairline);
  min-width: 0;
}
.wp-facts div:first-child {
  border-top: 0;
}
.wp-facts dt {
  font-size: .875rem;
  color: var(--ink-muted);
}
.wp-facts dd {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.wp-facts small {
  display: block;
  margin-top: 2px;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--ink-muted);
}

/* The choices: each a group under its own name (a heading with the count), a grid of equal tiles. WHAT IS CHOSEN
   LOOKS ONE WAY, in every group and every craft: each group of tiles carries the site's class pick-one
   (shared/chrome.css, "The one look of chosen"), and the tile marked aria-current="true" gets from it the tinted
   ground, the spruce border with a 1px line inside it and a tick at its top right; never color alone. Nothing of
   that look is written here: only the room the tick needs. The paper is chosen the same way, two tiles, the last
   group; so are the two systems of stitch terms above the rows. */
.wp-choices {
  display: grid;
  gap: var(--space-4);
  scroll-margin-top: var(--space-4);
}
.wp-choice h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font: 600 1rem var(--font-sans);
  letter-spacing: 0;
}
.wp-of {
  font-size: .8125rem;
  font-weight: 400;
  color: var(--ink-muted);
}
.wp-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.wp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
  background: var(--surface-raised);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
}
.wp-tile b {
  font-weight: 600;
}
.wp-tile span {
  font-size: .8125rem;
  color: var(--ink-muted);
}
.wp-tile:hover {
  border-color: var(--spruce);
}
/* An odd tile out fills its row: three sizes are two and one across the whole width, not one beside an empty slot. */
.wp-tiles > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.wp-tile[aria-current] {
  padding-right: calc(var(--space-3) + 1.25rem);
}
.wp-dots {
  display: flex;
  gap: 4px;
}
.wp-dots i {
  width: 1.125rem;
  height: 1.125rem;
  background: var(--wp-yarn);
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-pill);
}

/* Download: the page's one button and, straight under it, the one line that says what the file is (its paper, its
   weight, what it holds). After the choices: the place for the share row, and the way on to the rows. */
.wp-download {
  display: grid;
  gap: var(--space-2);
  scroll-margin-top: var(--space-4);
}
.wp-download .button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  text-decoration: none;
}
.wp-download .ff-note {
  margin: 0;
}
/* The line under the button is a few pieces parted by dots ("PDF · US Letter · 9 pages · Change"): the dots have
   a little air each side, and "Change" is a link 44px to press. */
.wp-download .wp-files {
  word-spacing: .12em;
}
.wp-download .wp-files a {
  display: inline-block;
  padding: 12px 0;
  margin-block: -12px;
  color: var(--spruce-deep);
  text-underline-offset: 4px;
}
.wp-share:empty {
  display: none;
}
.wp-next {
  margin: 0;
  font-size: .9375rem;
}
.wp-next a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--spruce-deep);
  text-underline-offset: 4px;
}
.wp-noscript {
  margin: var(--space-2) 0 0;
}
.wp-noscript a {
  color: var(--spruce-deep);
  text-underline-offset: 4px;
}
.wp-terms {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: .875rem;
}
.wp-terms a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  color: var(--ink);
  text-decoration: none;
  background: var(--surface-raised);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-pill);
}
/* The terms in use: the one look of chosen (pick-one). The two are pills, so the group is also pick-inline: the
   site's one rule keeps the room for the tick and stands it level with the word, sized in em of the word (walk 6,
   packet 7: this sheet kept that room itself, in rem, and at 200 percent text the tick lay on the word). */
.wp-terms a[aria-current] {
  font-weight: 600;
  color: var(--spruce-deep);
}
.wp-about.ff-about {
  margin: 0;
  font-size: 1rem;
}

/* The button's own place, straight under the picture on a phone and as wide as its column everywhere; nothing is
   fixed to the foot of the screen, so nothing ever lies over the page's own words. */
.wp-get {
  scroll-margin-top: var(--space-4);
}
.wp-get .button {
  width: 100%;
}

/* Sections under the top */
.wp .ff-slot {
  max-width: 46rem;
}
.wp .ff-slot > h2 {
  margin: 0 0 var(--space-3);
  font-size: 1.5rem;
}
.wp .ff-slot h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1.1875rem;
}
.wp .ff-slot h3 small {
  font: 400 .875rem var(--font-sans);
  letter-spacing: 0;
  color: var(--ink-muted);
}
.wp-lede {
  margin: 0 0 var(--space-3);
}
.wp-more {
  margin-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.wp-more summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--spruce-deep);
  cursor: pointer;
}
/* A line that opens says so: a plus before it, a minus when it is open (round 2: "look like plain text with no
   arrow"). The flex layout above takes the browser's own triangle away, so the sign is drawn here. */
.wp-more summary::before {
  content: '+';
  flex: none;
  width: 1.25em;
  font-weight: 600;
}
.wp-more[open] summary::before {
  content: '\2212';
}
.wp-more p {
  margin: 0 0 var(--space-3);
  font-size: .9375rem;
  color: var(--ink-muted);
}
.wp-more .ff-table {
  margin: 0 0 var(--space-3);
}

/* A yarn's chip: its screen color, and on a graph its symbol. "Any color" has no color to show. */
.wp-chip {
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -.25rem;
  background: var(--wp-yarn, var(--surface-raised));
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-sm);
}
/* A yarn in the list of what is needed is a round dot of its color: never a square, which reads as a box to tick.
   Its edge is the page's ink, so a dark yarn is seen on midnight and a pale one on linen. */
/* (Small, with a ring in the page's muted ink: at 18px with a faint edge it was read as a button to press, and a
   white yarn's dot was not seen at all; walk 6, packet 15.) */
.wp-dot {
  flex: none;
  width: .875rem;
  height: .875rem;
  margin-top: 6px;
  background: var(--wp-yarn);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-pill);
}
.wp-chip svg {
  display: block;
  width: 100%;
  height: 100%;
}
.wp svg.wp-chip {
  background: none;
}
.wp-yarns {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.wp-yarns li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.wp-yarns li:first-child {
  border-top: 0;
}
.wp-yarns .wp-dot {
  grid-row: 1 / span 2;
}
/* ON A GRAPH A YARN'S MARK IS THE SQUARE THE GRAPH USES (13 October 2026, walk 7, packet 21: "'ring on the graph'
   means nothing before I see the graph"): the yarn's color with its symbol, a reference to the graph's own
   drawing of it. It is a square with a faint edge, as in the key and the rows, and smaller than a row's box to
   tick, which is nowhere near it. */
.wp-yarns li > svg {
  grid-row: 1 / span 2;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-sm);
}
/* What to have in hand, in one line over the yarns of a graph: the hook, the yarn's weight, how many colors. */
.wp-need {
  margin: 0 0 var(--space-2);
}
.wp-need + .ff-note {
  margin: 0 0 var(--space-3);
}
/* How many balls, worked out on the page from the length the reader types (client.mjs, balls): the field in the
   line, as wide as five figures, and each yarn's answer at the end of its own amount. */
.wp-balls label {
  font-weight: 400;
  font-size: inherit;
}
.wp-balls input {
  width: 5.5em;
  min-height: 44px;
  margin: 0 var(--space-1);
  padding: 0 var(--space-2);
  font: inherit;
}
.wp-ball-n {
  white-space: nowrap;
  color: var(--ink);
}
.wp-yarns li:not(:has(> .wp-dot)):not(:has(> svg)) {
  grid-template-columns: minmax(0, 1fr);
}
.wp-yarns li:not(:has(> .wp-dot)):not(:has(> svg)) .wp-yarn-amount {
  grid-column: 1;
}
/* A yarn's second line: what it is on the graph and how many small balls to wind, small, under its name. */
.wp-yarns li small {
  grid-column: 2;
  font-size: .875rem;
  word-spacing: .12em;
  color: var(--ink-muted);
}
.wp-yarns li:not(:has(> .wp-dot)):not(:has(> svg)) small {
  grid-column: 1;
}
.wp-balls {
  margin: var(--space-2) 0 0;
}
.wp-yarn-amount {
  grid-column: 2;
  font-size: .9375rem;
  color: var(--ink-muted);
}
.wp-yarn-amount b {
  font-weight: 600;
  color: var(--ink);
}
.wp-kit {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}
.wp-kit div,
.wp-abbrs div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-3);
}
.wp-kit dt {
  color: var(--ink-muted);
}
.wp-kit dd,
.wp-abbrs dd,
.wp-special dd {
  margin: 0;
}
.wp-gauge-line {
  margin: 0 0 var(--space-2);
  font-size: 1.0625rem;
}
/* How to count the gauge in the piece itself: the pattern's own sentence, straight under the figures. */
.wp-gauge-count {
  margin: 0 0 var(--space-2);
  font-size: .9375rem;
  line-height: 1.5;
}
.wp-abbrs {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.wp-abbrs dt,
.wp-special dt {
  font: 500 .9375rem var(--font-mono);
}
.wp-abbrs small,
.wp-special small {
  display: block;
  font: 400 .8125rem var(--font-sans);
  color: var(--ink-muted);
}
/* The other country's name of a stitch ends its own row, in brackets (walk 7, packet 5: on a line of its own it
   read as the head of the row under it: "UK dc, double crochet" stood straight over the link "double crochet"). */
/* (The bracket goes to the next line whole where the row is too short for it, and breaks inside itself only where
   it is wider than the row: held to one line, at 200 percent text it pushed the page 72px sideways.) */
.wp-abbrs small {
  display: inline-block;
  max-width: 100%;
}
.wp-special {
  margin: 0;
}
.wp-special div {
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.wp-special div + div {
  margin-top: var(--space-2);
}
.wp-special dd {
  margin-top: var(--space-1);
}
/* A link inside the pattern's own words (a stitch's page, the guide to gauge, a calculator). */
/* A word of the pattern that has a page of its own is a link and looks like one, underlined in the link's color;
   a word with no page is plain ink. (Three abbreviations of seven were links, "alike" to the four that were not.) */
.wp-link {
  color: var(--spruce-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.wp-gauge-how {
  margin: 0 0 var(--space-2);
}
/* A gauge checked on the piece (a motif has no test square): what to do and when, in the open under the figures,
   where the fold "Work a test square first" stands for a pattern that has a swatch. Set off by the same hairline. */
/* (Held to the measure the fold above it has: on a wide screen the slot itself is not.) */
.wp-gauge-on {
  max-width: 46rem;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.wp-gauge-on p {
  margin: 0 0 var(--space-2);
  font-size: .9375rem;
  line-height: 1.5;
}
/* What a special stitch leaves for the next row: a sentence of its own, under how it is made. */
.wp-leaves {
  display: block;
  margin-top: 2px;
  font-size: .9375rem;
  color: var(--ink-muted);
}
.wp-notes {
  margin: 0;
  padding-left: 1.25rem;
}
.wp-notes li + li {
  margin-top: var(--space-2);
}
.wp-part > .wp-notes {
  margin: 0 0 var(--space-3);
  font-size: .9375rem;
  color: var(--ink-muted);
}

/* Instructions. A row is three things in fixed places: its number on the left (or above, on a phone), its words,
   and its count at the end, always in the same place, so that an eye coming back finds the row by its number and
   checks it by its count. The row a reader is on is marked by a bar and a ground. */
/* WHAT IS BEING READ, straight under the heading (walk 7, packet 5): "Size: Large · Change size" and the two
   systems of terms in one line; on a narrow screen the terms go under the size, whole. */
.wp-reading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-2);
}
.wp-reading a:not([data-terms]) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: var(--space-2);
  color: var(--spruce-deep);
  text-underline-offset: 4px;
}
.wp-how {
  margin: 0 0 var(--space-3);
}
/* The notes over the rows: one thing a line, in the size of a note; a pair of brackets is one unit no line breaks. */
.wp-read {
  margin: 0;
  padding-left: 1.25rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.wp-read li + li {
  margin-top: 2px;
}
.wp-nb {
  font: 500 .9375rem var(--font-mono);
  white-space: nowrap;
  color: var(--ink);
}
.wp-how .wp-more {
  margin-top: var(--space-2);
}
.wp-how .wp-more p {
  max-width: 46rem;
}
.wp-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  overflow: hidden;
}
.wp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 5rem;
  line-height: 1.6;
}
.wp-row:first-child {
  border-top: 0;
}
.wp-row:nth-child(even) {
  background: var(--surface);
}
.wp-n {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  font: 500 .875rem var(--font-mono);
  color: var(--spruce-deep);
  text-decoration: none;
}
.wp a.wp-n {
  min-height: 44px;
  margin: calc(-1 * var(--space-2)) 0 -6px;
}
.wp-n small {
  font: 400 .8125rem var(--font-sans);
  color: var(--ink-muted);
}
/* RS and WS after a row's name: plain small capitals, no box (boxed, they were read as buttons; walk 6, packet 15). */
.wp-side {
  font: 500 .8125rem var(--font-sans);
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink-muted);
}
.wp-says {
  min-width: 0;
  overflow-wrap: break-word;
}
.wp-count {
  justify-self: end;
  max-width: 100%;
  padding-top: 2px;
  font: 500 .875rem var(--font-mono);
  line-height: 1.4;
  text-align: right;
  color: var(--ink);
}
.wp-row:target,
.wp-row[data-here] {
  background: var(--spruce-tint);
  box-shadow: inset 4px 0 0 var(--spruce);
}
.wp-row[data-here] .wp-n::after {
  content: "You are here";
  font: 400 .8125rem var(--font-sans);
  color: var(--spruce-deep);
}
/* A ROW'S BOX TO TICK (12 October 2026, walk 6, packets 15 and 18: "rows do not look tappable though it says 'Tap
   a row'", "nothing shows which row is marked"). It is drawn in front of the row's name, inside the row's own link,
   so it is in no row's markup (a long graph has two hundred rows and its page is weighed to the byte) and it works
   without script: the link names the row in the address and the row so named is ticked. With the page script the
   place is kept in the browser: the row it is at is ticked and says "You are here", and every row behind it is
   ticked more quietly (client.mjs, done). A run of rows that are all alike has a counter instead, which is its box. */
.wp-row[data-row] > .wp-n::before {
  content: "";
  flex: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  font: 700 .9375rem/1 var(--font-sans);
  color: var(--spruce-deep);
  background: var(--surface-raised);
  /* A SQUARE BOX, AS A BOX TO TICK IS (13 October 2026, walk 7, packet 5: three critics took the round ones for
     "either/or buttons"): 24px with a heavier line than a yarn's square in a row of colors (20px, filled with its
     yarn), so that the two are not taken for each other on a graph; its link is 44px tall, the target. With the
     page script it is a checkbox to a screen reader as well (client.mjs, done). */
  border: 2px solid var(--control-border);
  border-radius: 4px;
}
.wp-row[data-to] > .wp-n::before {
  display: none;
}
.wp-row[data-done] > .wp-n::before,
.wp-row[data-here] > .wp-n::before,
.wp-row:target > .wp-n::before {
  content: "\2713";
}
.wp-row[data-here] > .wp-n::before,
.wp-row:target > .wp-n::before {
  background: var(--spruce-tint);
  border-color: var(--spruce);
}
/* The signs of the key at the head of the rows (client.mjs, signs): the sign in the row's own face, then its words. */
.wp-key .wp-sign {
  flex: none;
  min-width: 1.25rem;
  font: 500 .875rem var(--font-mono);
  text-align: center;
}
.wp-row[data-done] > .wp-n {
  color: var(--ink-muted);
}
/* The key of yarns set again among the rows of a graph (client.mjs, keys), and folded over a page of rows. */
.wp-keyrow {
  padding: 0 var(--space-3);
  border-top: 1px solid var(--hairline);
}
.wp-keyrow .wp-more,
.wp-keyfold {
  margin-top: 0;
  border-top: 0;
}
.wp-keyrow .wp-key,
.wp-keyfold .wp-key {
  margin: 0 0 var(--space-3);
}
.wp-keyfold {
  margin-bottom: var(--space-2);
}
.wp-row-plain .wp-n {
  color: var(--ink-muted);
}
/* A piece of a row, from one comma to the next: one unit, which a line never breaks inside unless the piece is
   longer than the line itself. */
.wp-p {
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
}
/* In a long row a long repeat is a block: a bar down its side from its opening bracket to its closing bracket and
   count; a repeat inside it has a second ground and a second bar. */
.wp-blk {
  display: block;
  margin: 4px 0;
  padding: 2px var(--space-2) 2px var(--space-3);
  background: var(--mustard-tint);
  border-left: 3px solid var(--mustard);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.wp-blk-in {
  background: var(--surface-raised);
}
.wp-blk .wp-rep {
  padding: 0;
  background: none;
}
.wp-blk .wp-rep-in {
  box-shadow: none;
}
/* A length worked until it measures, and the counter of a run of rows that are all alike. */
.wp-until {
  font-size: .9375rem;
  color: var(--ink-muted);
}
.wp-tally {
  /* THE COUNTER OF A RUN IS ITS BOX TO TICK (13 October 2026, walk 7, packet 5): the line that says which row comes
     next, whole across the card, and under it the labelled pair, "Row done" then "Undo", each as wide as its own
     words. It is never wider than the card of rows it is in (7 October 2026: a counter of fixed width was cut by
     the card at 375px), and nothing in it moves when a button comes or goes: a button that is not there keeps
     its room. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  width: 100%;
  margin-top: var(--space-1);
  font-size: .9375rem;
  line-height: 1.35;
}
.wp-tally[hidden] {
  display: none;
}
.wp-tally button {
  flex: none;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: .9375rem;
}
/* A step there is no row for is not drawn, and keeps its room: the words and the other button do not move. */
.wp-tally button[hidden] {
  display: block;
  visibility: hidden;
}
.wp-tally-says {
  flex: 0 0 100%;
  min-width: 0;
}
/* "worked as row 2" stays whole: where the line is too short for both halves it goes under "On row 4 of 91,". */
.wp-tally-as {
  display: inline-block;
}
.wp-tally-says b {
  font: 500 1rem var(--font-mono);
}
/* A pattern of rows printed once and repeated to the end: the line that says which rows. The counter under it says
   which of them the row a maker is on is worked as. */
.wp-fold {
  font-weight: 500;
}
/* A place to stop and measure stands among the rows, where the maker is when it applies. */
.wp-stop {
  display: block;
  padding: var(--space-3);
  font-size: .9375rem;
  line-height: 1.5;
  background: var(--spruce-tint);
  border-top: 1px solid var(--hairline);
  box-shadow: inset 4px 0 0 var(--spruce);
}
.wp-stop b {
  display: block;
  color: var(--spruce-deep);
}
.wp-stop span {
  display: block;
}
.wp-stop span + span {
  margin-top: var(--space-2);
}
/* THE TEST SQUARE, FOLDED (13 October 2026, walk 7, packet 5): one shut line under the gauge, "Work a test square
   first (13 rows)"; open, its sentences and its rows in the ONE box rows have (it stood in a dashed box of its
   own with the rows' box inside it: "three nested boxes"). Shut, its rows cannot be taken for the pattern's. */
.wp-swatch p {
  margin: 0 0 var(--space-2);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink);
}
.wp-swatch .wp-rows-small {
  margin-bottom: var(--space-3);
}
.wp-rows-small .wp-row {
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-2) var(--space-3);
}
.wp-rows-small .wp-count {
  grid-column: 1;
}
/* A repeat: its brackets heavy, its words on a ground of their own that follows them round a line break, and how
   many times in bold. A repeat inside a repeat has a second ground. */
.wp-rep {
  padding: 2px 1px;
  background: var(--mustard-tint);
  border-radius: var(--radius-sm);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.wp-rep-in {
  background: var(--surface-raised);
  box-shadow: 0 0 0 1px var(--mustard);
}
.wp-b {
  padding: 0 1px;
  font: 500 1.0625em var(--font-mono);
  color: var(--mustard-deep);
}
.wp-times {
  font-weight: 600;
}
.wp-close {
  white-space: nowrap;
}
.wp-times-n,
.wp-uk {
  font-size: .8125rem;
  color: var(--ink-muted);
  white-space: nowrap;
}
.wp-with {
  font-weight: 600;
}
.wp-rows-small {
  margin-bottom: var(--space-3);
  font-size: .9375rem;
}
.wp-join {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  font-size: .9375rem;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}
.wp-fixed {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  background: var(--mustard-tint);
  border-radius: var(--radius-md);
}
.wp-totals {
  margin: var(--space-3) 0 0;
}

/* A row of a graph: where it lies on the graph, then its runs of color in working order, each with its chip. */
.wp-runs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-2);
}
.wp-dir {
  font: 400 .8125rem var(--font-sans);
  color: var(--ink-muted);
  white-space: nowrap;
}
/* A row of a corner-to-corner graph: how it is worked and between which edges it runs, on a line of its own above
   its colors. */
.wp-runs small {
  flex: 0 0 100%;
  font: 400 .8125rem var(--font-sans);
  color: var(--ink-muted);
}
.wp-run {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 .9375rem var(--font-mono);
  white-space: nowrap;
}
.wp-run .wp-chip {
  width: 1.125rem;
  height: 1.125rem;
}

/* The graph. It keeps its own size and pans inside its box in both directions; the page never scrolls sideways. */
.wp-key {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.wp-key li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  line-height: 1.35;
}
.wp-key small {
  display: block;
  font-size: .8125rem;
  color: var(--ink-muted);
}
.wp-grid {
  max-width: 100%;
  max-height: 58vh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.wp-grid:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.wp-grid svg {
  display: block;
  width: calc(var(--wp-w) * var(--wp-cell));
  height: calc(var(--wp-h) * var(--wp-cell));
}
.wp-grid-n {
  font-family: var(--font-mono);
  font-weight: 500;
  fill: var(--ink);
}
.wp-here {
  fill: var(--mustard);
  fill-opacity: .4;
  stroke: var(--poppy);
  stroke-width: .12;
}
.wp-grid-note {
  margin: var(--space-2) 0 0;
}
.wp-reader {
  position: sticky;
  z-index: 5;
  top: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  box-shadow: var(--shadow-sm);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.wp-reader[hidden] {
  display: none;
}
.wp-reader-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: var(--space-2);
  align-items: center;
}
.wp-reader button {
  width: 48px;
  min-height: 48px;
  padding: 0;
  font-size: 1.25rem;
}
.wp-reader-says {
  margin: 0;
  min-height: 3.2rem;
  line-height: 1.5;
}
.wp-reader-says b,
.wp-reader-says small {
  display: block;
}
.wp-reader-says b {
  font: 500 .875rem var(--font-mono);
  color: var(--spruce-deep);
}
.wp-reader-says .wp-runs {
  margin-top: 2px;
}

.wp-also-list {
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}
.wp-also-now {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: var(--space-2);
  font-weight: 600;
}
.wp-also-list li {
  margin-bottom: var(--space-1);
}
.wp-also-list .ff-note {
  display: block;
  margin: 0;
}
.wp-also-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: var(--space-2);
  color: var(--spruce-deep);
  text-underline-offset: 4px;
}


@media (max-width: 767px) {
  /* A very short row: its count beside its words, on a phone as well. */
  .wp-row-tiny {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
  }
  .wp-row-tiny .wp-n,
  .wp-row-tiny .wp-until,
  .wp-row-tiny .wp-tally {
    grid-column: 1 / -1;
  }
  .wp-row-tiny .wp-count {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    padding-top: 4px;
  }
}
@media (min-width: 768px) {
  .wp {
    --wp-cell: 15px;
  }
  .wp-row {
    grid-template-columns: var(--wp-gutter) minmax(0, 1fr);
    column-gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  .wp-n,
  .wp a.wp-n {
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: baseline;
    gap: 2px var(--space-2);
    min-height: 0;
    margin: 0;
    padding-top: 2px;
  }
  .wp-count,
  .wp-until,
  .wp-tally {
    grid-column: 2;
  }
  /* A short row: its count stands at the right end of its own line. */
  .wp-row-short {
    grid-template-columns: var(--wp-gutter) minmax(0, 1fr) auto;
  }
  .wp-row-short .wp-count {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    padding-top: 3px;
  }
  .wp-rows-small .wp-row-short {
    grid-template-columns: minmax(0, 1fr);
  }
  .wp-rows-small .wp-n,
  .wp-rows-small a.wp-n {
    padding-top: 0;
  }
  .wp-yarns li {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }
  .wp-yarns .wp-dot {
    grid-row: auto;
    margin-top: 0;
  }
  .wp-yarns li:not(:has(> .wp-dot)):not(:has(> svg)) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .wp-yarns li:not(:has(> .wp-dot)):not(:has(> svg)) .wp-yarn-amount {
    grid-column: auto;
  }
  .wp-yarn-amount {
    grid-column: auto;
    text-align: right;
  }
  .wp-abbrs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}
/* With room for two columns: the picture on the left; on the right the name, the button and its line, the facts,
   the choices and the sentence about the pattern, in the page's one order. The right column is the longer, so the
   picture stays in view beside it while it goes by, and no column ends in a hole beside the other's boxes (the
   facts stood under the picture, and the right column ended a hand's height before them). */
@media (min-width: 900px) {
  .wp-top {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  .wp-look,
  .wp-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    grid-row: 1;
    min-width: 0;
  }
  .wp-look {
    grid-column: 1;
    position: sticky;
    top: var(--space-4);
  }
  .wp-lead {
    grid-column: 2;
  }
  .wp-top .wp-head,
  .wp-top .wp-stage,
  .wp-top .wp-facts,
  .wp-top .wp-choices,
  .wp-top .wp-download,
  .wp-top .wp-share,
  .wp-top .wp-next,
  .wp-top .wp-about {
    order: 0;
  }
  .wp-top .wp-head.ff-head {
    margin-top: 0;
  }
}
/* With room, THE PAGE USES ITS WHOLE WIDTH, and has one width from its name to its last row: the top's two columns
   and the body's two (the instructions, and beside them a rail that stays in view with what a maker looks back at:
   the yarn, the abbreviations) both run from the page's left edge to its right, so the right edges of the name, the
   tiles, the button and the two cards of the rail are one line down the page, and it is the edge the shelves of
   related patterns under them end on. (The top and the body stopped at 64rem and left a blank column down the right
   of a wide screen; the words inside stopped at a third width.) A line of words is still held to a width it can be
   read at; the boxes (rows, the swatch, the graph, a table) take the column. */
@media (min-width: 900px) {
  .wp.ff-pattern {
    max-width: none;
  }
  .wp-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    column-gap: var(--space-6);
    align-items: start;
  }
  .wp-main .ff-slot {
    max-width: none;
  }
  .wp-main .ff-slot > p:not(.wp-fixed, .wp-join),
  .wp-main .ff-slot > ul,
  .wp-main .ff-slot > details,
  .wp-main .wp-part > .wp-notes {
    max-width: 46rem;
  }
  .wp-main {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  /* Nothing in the rail is ever cut off: it is as long as what is in it. Each part is a card. The rail is as tall as
     the instructions beside it, and the abbreviations, its last part, stay in view while the rows go by when the page
     script has found that they fit the window whole (data-stick); otherwise they scroll with the page. */
  .wp-rail {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-self: stretch;
    margin-top: var(--space-6);
  }
  .wp-rail .ff-slot {
    margin-top: 0;
    padding: var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
  }
  .wp-rail .wp-abbr[data-stick] {
    position: sticky;
    top: var(--space-4);
  }
  .wp-rail .ff-slot > h2 {
    font-size: 1.1875rem;
  }
  .wp-rail .wp-yarns,
  .wp-rail .wp-special div {
    background: var(--surface);
  }
  .wp-rail .wp-yarns li,
  .wp-rail .wp-yarns li:not(:has(> .wp-dot)):not(:has(> svg)) {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .wp-rail .wp-yarns li:not(:has(> .wp-dot)):not(:has(> svg)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .wp-rail .wp-yarn-amount {
    grid-column: 2;
    text-align: left;
  }
  .wp-rail .wp-yarns li:not(:has(> .wp-dot)):not(:has(> svg)) .wp-yarn-amount {
    grid-column: 1;
  }
  .wp-rail .wp-abbrs {
    grid-template-columns: minmax(0, 1fr);
  }
  .wp-grid {
    max-height: 86vh;
  }
}
/* On a wider screen the picture's column, the rail and the room between the two are a little larger, and three or
   four choices stand in one row. */
@media (min-width: 1100px) {
  .wp-top {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    column-gap: var(--space-7);
  }
  .wp-body {
    grid-template-columns: minmax(0, 1fr) 21rem;
    column-gap: var(--space-7);
  }
  /* Three choices stand three across and four four across, with no empty cell beside the last. */
  .wp-tiles:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wp-tiles:has(> :nth-child(3):last-child) > :last-child {
    grid-column: auto;
  }
  .wp-tiles:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media print {
  .wp-tally,
  .wp-choices,
  .wp-download,
  .wp-terms,
  .wp-reader {
    display: none;
  }
}

.wp-after {
  margin-top: var(--space-6);
}

/* A LONG PATTERN'S ROWS IN PAGES (rows.mjs). On the pattern's page, under the rows that fit: the one plain button
   to the next rows ("Rows 41 to 96"), as wide as the rows above it, in the look of the page's other plain controls
   and never the primary button's (the page has one primary button, Download PDF). On a page of rows (page.mjs,
   rowsPage): the line that says which rows it holds, then the way back to the pattern and to every other page of
   its rows, each a target of 44px, the page it is on marked as chosen; the rows; and the same button under them.
   A page of rows is one column at the width a pattern's page has before its rail, in the middle of a wider screen. */
.wp-rows-on {
  margin: var(--space-3) 0 0;
}
.wp-rows-on a,
.wp-rows-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-1) var(--space-4);
  box-sizing: border-box;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  background: var(--surface-raised);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-pill);
}
.wp-rows-on a {
  display: flex;
  gap: var(--space-2);
}
/* As wide as the rows it stands under, where the page's other lines of words are held to a reading width. */
.wp-main .ff-slot > p.wp-rows-on {
  max-width: none;
}
.wp-rows-on a:hover,
.wp-rows-nav a:hover {
  background: var(--surface-sunken);
}
.wp-rows-says {
  margin: var(--space-1) 0 0;
  font-size: 1.0625rem;
  font-weight: 500;
}
.wp-rows-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-5);
}
/* The way back to the pattern is a line of its own over the pages of rows, a plain link as "Go to the
   instructions" is on the pattern's page. */
.wp-rows-nav a.wp-rows-back {
  flex: 0 0 100%;
  justify-content: flex-start;
  padding: 0;
  color: var(--spruce-deep);
  font-weight: 400;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
  background: none;
  border: 0;
  border-radius: 0;
}
/* The pages of the rows are one group of boxed links; the one on show is marked by the site's one look of chosen
   (pick-one: the tinted ground, the green border with a second line inside it, the tick). It was plain bold words
   beside an outlined pill for the page a visitor was not on, which read the wrong way round. */
.wp-rows-pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.wp-rows-pages a[aria-current] {
  color: var(--spruce-deep);
}
.wp.wp-rows-page.ff-pattern {
  max-width: 60rem;
  margin-inline: auto;
}
/* The rows take the page's column; a line of words keeps the width it is read at. */
.wp-rows-page > .ff-slot {
  max-width: none;
}
.wp-rows-page .wp-how {
  max-width: 46rem;
}
/* On paper there is nothing to press, so the ways between the pages go. The line under the rows stays, as words:
   a printed page of a long pattern still says that its rows go on, which they are and where (hidden, the print
   ended on the page's last row with nothing to say there were more), and a printed last page of rows still says
   that the finishing is on the pattern's page. */
@media print {
  .wp-rows-nav {
    display: none;
  }
  .wp-rows-on a {
    display: block;
    min-height: 0;
    padding: 0;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .wp-rows-on a span[aria-hidden] {
    display: none;
  }
  .wp-rows-on a[data-rows-page]::after {
    content: " are on the next page of this pattern on the site. The PDF holds every row.";
  }
}

/* THE BROWSER'S OWN TEXT SET LARGE (13 October 2026, walk 7, packet 8: at 200 percent "on three pattern pages no
   download button is on the first screen"). On a phone whose text is set to 125 percent and more (an em in a media
   query is the reader's own text size: shared/chrome.css has the rule whole, and NOTHING HERE CHANGES A PIXEL AT
   THE USUAL SIZE) the name and its line of facts fill most of the first screen by themselves, so the picture
   gives way and never the button: the one button and its line stand straight under the name's block, the picture
   follows them, and it is held to a third of the screen's height so that the facts under it are near. The order
   of everything else is the one order of a pattern page. */
@media (max-width: 19.99em) {
  .wp-top .wp-download {
    order: 2;
  }
  .wp-top .wp-stage {
    order: 3;
  }
  .wp-stage img {
    width: auto;
    max-width: 100%;
    max-height: 34vh;
  }
}