/* ==========================================================================
   Kanga’s Kitchen — the printed how-to page

   Loaded alongside print.css, never instead of it: the masthead, the facts
   strip, the notes box and the footer are the recipe page's, unchanged, so a
   guide and a recipe sitting next to each other in the binder are plainly two
   pages of the same book. Only what's between them is new.

   What is new is that a guide page has no single layout. On a recipe the photo
   is decoration; on a how-to the photographs are the instruction, so where they
   go depends on how many of them land on each step. planGuideLayout() in
   guide-page.js chooses, and hands the answer over as four classes:

     ps--fam-side-by-side | ps--fam-stacked | ps--fam-gallery | ps--fam-words
     ps--shot-120 … ps--shot-380     the photo width, in hundredths of an inch
     ps--cols-1 … ps--cols-4         how many photos sit across a row
     ps--type-100 | ps--type-94 | ps--type-88

   Every combination that can print has its rule below. Nothing arrives here as
   a style attribute nobody has read.

   No light-dark() pairs anywhere in this file, unlike the rest of the app: a
   printed sheet is ink on white paper at every hour of the day. The greys are
   print.css's own, for the same reason.
   ========================================================================== */

/* ---- Density: the two templates the server stores ------------------------ */

/*
 * These two used to be layouts. They are now only how tight the type is set —
 * and, notably, Compact no longer shrinks the photographs. It used to take them
 * down to .95in to save a sheet, which is under the size at which you can still
 * see what a pair of hands is doing. That is the one saving this page will not
 * make; it spends another sheet instead.
 *
 * The leading is deliberately left alone here too. It belongs to the layout
 * family below, so there is one rule about it rather than two that multiply.
 */
.ps--guide,
.ps--guide-compact {
  --ps-body: calc(var(--ps-base) * var(--ps-scale, 1));
  --ps-shot: 1.5in;
  --ps-cols: 1;
}

.ps--guide         { --ps-base: 10.5pt; --ps-ing: 10pt;  --ps-title: 25pt; }
.ps--guide-compact { --ps-base: 9pt;    --ps-ing: 8.5pt; --ps-title: 20pt; }

/* Compact buys its sheet back out of the space between blocks, which costs
   nothing anyone reads. Each number here has a twin in DENSITY in
   guide-page.js, and the estimate is wrong the moment they disagree. */
.ps--guide-compact .ps__hero { height: 1.3in; }
.ps--guide-compact .ps__head { padding-bottom: .1in; margin-bottom: .13in; }
.ps--guide-compact .ps__facts { margin-bottom: .13in; padding-bottom: .08in; }
.ps--guide-compact .ps__section { margin-bottom: .14in; }
.ps--guide-compact .ps__aside { margin-top: .14in; }
.ps--guide-compact .ps__foot { margin-top: .16in; }
.ps--guide-compact h2 { font-size: 10pt; }

/* ---- The type scale ------------------------------------------------------ */

/* Two notches, and they only ever get used to pull a step back off a nearly
   empty last sheet. Anything tighter than .88 stops being a page she can read
   at arm's length on a counter, which is the whole job. */
.ps--type-100 { --ps-scale: 1; }
.ps--type-94  { --ps-scale: .94; }
.ps--type-88  { --ps-scale: .88; }

/* ---- The photo scale ----------------------------------------------------- */

/*
 * Six sizes, in real inches across, because a printed inch is a thing you can
 * hold a ruler against. 1.2in is the floor: below it you can tell a photograph
 * is there but not what it is showing you, and a how-to photograph that can't
 * be read has stopped being an instruction.
 */
.ps--shot-120 { --ps-shot: 1.2in; }
.ps--shot-150 { --ps-shot: 1.5in; }
.ps--shot-190 { --ps-shot: 1.9in; }
.ps--shot-240 { --ps-shot: 2.4in; }
.ps--shot-305 { --ps-shot: 3.05in; }
.ps--shot-380 { --ps-shot: 3.8in; }

/* Everything is border-box, so the keyline is drawn out of the photograph's own
   width. At the two smallest sizes 1px is a visible slice of the picture, so it
   thins to a hairline: the edge is still there and the photograph gets its
   width back. The gaps belong to the layout family rather than to the size —
   they are the same numbers LAYOUTS carries, and the estimate is wrong the
   moment the two disagree. */
.ps--shot-120 .ps__shots img,
.ps--shot-150 .ps__shots img { border-width: .5pt; }

/* ---- Which recipes this is for ------------------------------------------ */

/* One line under the facts strip rather than a block at the end: standing at
   the counter, "you'll want the sugar cookie page too" is worth knowing before
   you start, not after. */
.ps__with {
  font-size: 9.5pt; margin: -.08in 0 .18in; color: #333;
  break-after: avoid;
}
.ps__with strong {
  font-size: 7.5pt; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  font-family: Helvetica, Arial, sans-serif; color: #555; margin-right: .06in;
}

/* ---- What you'll need --------------------------------------------------- */

/*
 * The same rule the ingredient list lives by, and for the same reason: the
 * whole block refuses to split, so it either fits or it moves as one piece.
 * One item stranded on page two is one item that gets forgotten.
 */
.ps__section--supplies { break-inside: avoid; page-break-inside: avoid; }
.ps__section--supplies h3 { break-after: avoid; break-inside: avoid; }

.ps__supplies {
  list-style: none; padding: 0; margin: 0; font-size: var(--ps-ing);
  column-gap: var(--ps-gap); column-fill: balance;
}
.ps__supplies li {
  padding: .045in 0 .045in .13in; text-indent: -.13in;
  break-inside: avoid; page-break-inside: avoid;
}
.ps__supplies li::before { content: "\2022  "; font-weight: 700; }

.ps__section--c2 .ps__supplies { columns: 2; }
.ps__section--c3 .ps__supplies { columns: 3; }

/* ---- The steps ---------------------------------------------------------- */

.ps__gsteps { list-style: none; padding: 0; margin: 0; counter-reset: gs; font-size: var(--ps-body); }

/*
 * A step and its photographs are one thing. Splitting them across sheets leaves
 * a picture with no instruction on one page and an instruction with no picture
 * on the other, which is worse than either alone — the same rule, and the same
 * reason, as the ingredient list that refuses to break.
 */
.ps__gstep {
  counter-increment: gs; position: relative;
  padding-left: .38in; margin-bottom: .15in;
  break-inside: avoid; page-break-inside: avoid;
}
.ps__gstep::before {
  content: counter(gs) "."; position: absolute; left: 0; top: 0;
  font-weight: 700; font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--ps-body) + .5pt);
}

.ps__gstep-text { margin: 0; white-space: pre-wrap; }

/* Only ever empty in the page editor, where an empty step still has to be big
   enough to tap into — and 1.2em is about 17px, which is a third of a fingertip
   and less than the .15in gap to the step below it. Under a finger she aims at
   the step she just added and the caret lands in the one before it.

   `any-pointer: coarse` rather than `hover: none`: an iPad in a Magic Keyboard
   reports `hover: hover`, and it is still a finger doing the tapping. The rule
   is scoped to [contenteditable], which only exists while she is editing, so
   none of this can reach paper. */
.ps__gstep-text[contenteditable]:empty { min-height: 1.2em; }
@media (any-pointer: coarse) {
  .ps__gstep-text[contenteditable]:empty { min-height: 44px; }
}

/*
 * Every photograph prints into a 4:3 box of a known width. Phones shoot 4:3 so
 * most land in it untouched, and the odd portrait one loses a little off the
 * top and bottom — worth it, because a box of known shape is the only reason
 * guide-page.js can say "this is two sheets" before anything has been drawn.
 */
.ps__shots { display: flex; flex-wrap: wrap; gap: .1in; margin-top: .1in; }
.ps__shots img {
  width: var(--ps-shot); height: auto; aspect-ratio: 4 / 3;
  max-width: 100%; object-fit: cover; border: 1px solid #999;
  break-inside: avoid;
}

/* ---- Side by side ------------------------------------------------------- */

/*
 * Photo in a column of its own, its step beside it, one step per row. The eye
 * runs straight down the pictures, which is how you find your place again after
 * looking away at the bowl. It is also the only family where a photograph costs
 * no height of its own — it sits in the space the words leave.
 *
 * Explicit grid positions rather than `order`, so the reading order the browser
 * and a screen reader see is still text-then-photo.
 */
.ps--fam-side-by-side .ps__gstep {
  display: grid;
  grid-template-columns: var(--ps-shot) 1fr;
  column-gap: .14in;
  align-items: start;
  margin-bottom: .15in;
}
.ps--fam-side-by-side .ps__shots { grid-column: 1; grid-row: 1; flex-direction: column; gap: .14in; margin-top: 0; }
.ps--fam-side-by-side .ps__gstep-text { grid-column: 2; grid-row: 1; }

/* A step that never got a photograph shouldn't leave a hole where one would
   have been; it takes the whole width instead. */
.ps--fam-side-by-side .ps__gstep-text:only-child { grid-column: 1 / -1; }

/* ---- Stacked ------------------------------------------------------------ */

/*
 * Photograph first, words under it, both the width of the column. For a guide
 * of a few steps where the picture is the point — a shape, a fold, a piped
 * edge — and needs to be big enough to copy.
 */
.ps--fam-stacked .ps__gstep { display: grid; margin-bottom: .2in; }
.ps--fam-stacked .ps__shots { grid-row: 1; gap: .12in; margin: 0 0 .12in; }
.ps--fam-stacked .ps__gstep-text { grid-row: 2; }

/* ---- Gallery ------------------------------------------------------------ */

/*
 * The step, then its photographs in a row underneath. Three pictures of one
 * step have nowhere else to go: beside the words they'd be stamps, above them
 * they'd be a page each.
 */
.ps--fam-gallery .ps__gstep { margin-bottom: .17in; }
.ps--fam-gallery .ps__shots { display: grid; }

/* How many across, as a number the page carries about with it. */
.ps--cols-1 { --ps-cols: 1; }
.ps--cols-2 { --ps-cols: 2; }
.ps--cols-3 { --ps-cols: 3; }
.ps--cols-4 { --ps-cols: 4; }

/* Written out one row count at a time rather than repeat(var(--ps-cols), …).
   A variable inside repeat() is legal and is also the sort of thing an older
   Safari drops on the floor, and what it drops here is the whole grid. Four
   lines are cheaper than a sheet of photographs printed in a single column.

   minmax(0, …) rather than the width on its own, because a bare length is a
   track that cannot shrink. On paper it never has to — four across is capped at
   1.5in against a 6.37in column — but the page editor draws this same markup on
   screen, and below 1100px the stage is the width of the phone. A row of four
   would have run about two and a half inches off the right-hand edge of the
   sheet. With a floor of 0 the tracks give way instead, and paper is unchanged:
   the free space is still there, so each track still reaches --ps-shot. */
.ps--fam-gallery.ps--cols-1 .ps__shots { grid-template-columns: minmax(0, var(--ps-shot)); }
.ps--fam-gallery.ps--cols-2 .ps__shots { grid-template-columns: repeat(2, minmax(0, var(--ps-shot))); }
.ps--fam-gallery.ps--cols-3 .ps__shots { grid-template-columns: repeat(3, minmax(0, var(--ps-shot))); }
.ps--fam-gallery.ps--cols-4 .ps__shots { grid-template-columns: repeat(4, minmax(0, var(--ps-shot))); }

/* ---- Words only --------------------------------------------------------- */

/*
 * No photographs, and the leading pulled in a little because there is nothing
 * to look at between the lines. Not two columns, though: a numbered instruction
 * read off a counter from two feet away needs to run the full measure, the way
 * the ingredient list does not.
 */
.ps--fam-words .ps__gsteps { line-height: 1.34; }
.ps--fam-words .ps__gstep { margin-bottom: .13in; }

/* Belt and braces. The renderer prints no photo markup at all in this family,
   so this only ever catches a plan that was saved before the photographs were
   added — and an empty box is worse than no box. */
.ps--fam-words .ps__shots { display: none; }

/* ---- Step titles ---------------------------------------------------------
   A short verb phrase above the words. It does two jobs, and the second is the
   one that matters on paper: while writing it is the outline, and while reading
   it is the bookmark. The failure mode of cooking from a sheet is losing your
   place in it, and a number plus three words finds it again in a glance.
   ------------------------------------------------------------------------- */
.ps__gstep-title {
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--ps-body) - 1pt);
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0 0 .05in;
  /* Never the last thing before a break — a title alone at the foot of a sheet
     is the label without the thing it labels. */
  break-after: avoid;
}

/* ---- Photographs, and what they are showing you --------------------------
   A caption is not alt text. `alt` describes the picture to someone who cannot
   see it; a caption tells someone who CAN what to look for — and on a printed
   how-to page that is where the best writing ends up.

   The figure letter only appears once a step carries three or more photos:
   below that "the second picture" is unambiguous by pointing, and a label
   nobody needs is furniture.
   ------------------------------------------------------------------------- */
.ps__shot { margin: 0; break-inside: avoid; }
.ps__shot figcaption {
  font-size: 8.5pt;
  line-height: 1.3;
  color: #444;
  margin-top: .035in;
}
.ps__shot figcaption b {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 7.5pt;
  color: #000;
}

/* ---- Callouts ------------------------------------------------------------
   The things that are not instructions. Named, because a reader skimming for
   what will bite them has to be able to find it — an unlabelled indented
   paragraph reads as another step.

   Set in the same ink as everything else. A colour that means something on
   screen means nothing on the black-and-white printer in the study, so the
   label carries the meaning and the rule carries the emphasis.
   ------------------------------------------------------------------------- */
.ps__calls { list-style: none; padding: 0; margin: .07in 0 0; }
.ps__call {
  font-size: calc(var(--ps-body) - 0.5pt);
  line-height: 1.35;
  padding: .02in 0 .02in .16in;
  border-left: 2px solid #999;
  margin: .05in 0 0;
  break-inside: avoid;
}
.ps__call b {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* Careful gets the heavier rule. It is the one with a cost attached. */
.ps__call--caution { border-left-color: #000; border-left-width: 3px; }
.ps__call--ahead { border-left-style: double; border-left-width: 4px; }

/* Words-only pages print no photo markup at all, so a caption cannot strand. */
.ps--fam-words .ps__shot { display: none; }

/* ---- Pinned notes --------------------------------------------------------
   A note attached to a spot on a photograph, stored as a fraction of the image
   box so the same pin lands in the same place whether the photo prints at 1.2
   inches or 3.8.

   ── Why the note is NOT drawn on the photograph ──────────────────────────
   On screen you can float the words over the picture and it reads well. On
   paper you cannot: at the 1.2-inch floor this page is willing to print, a
   sentence laid over the image is either unreadable or covers the thing it is
   pointing at — and the whole argument for that floor is that you can still
   see what her hands are doing.

   So the pin on the photograph is only a NUMBER, and the words live in a key
   underneath it. That is also how a printed manual has always done it, which
   is not a coincidence.
   ------------------------------------------------------------------------- */
.ps__shot-frame {
  position: relative;
  display: block;
  /* line-height:0 is load-bearing. The image is inline-level, so without it the
     frame keeps a baseline gap underneath — five pixels on a 225-pixel frame,
     which drifts every pin about two per cent down the photograph. Invisible on
     any one photo, and exactly what makes a pinned note point just below the
     thing it means. */
  line-height: 0;
}

.ps__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: .17in; height: .17in;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #000;
  color: #000;
  font: 700 7pt/.17in Helvetica, Arial, sans-serif;
  text-align: center;
  /* Printers drop backgrounds by default, which would leave a number floating
     on the photograph with nothing behind it. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.ps__pins {
  margin: .04in 0 0;
  padding-left: .2in;
  font-size: 8.5pt;
  line-height: 1.3;
  color: #333;
}
.ps__pins li { margin: .015in 0; break-inside: avoid; }