/* /start: how to post to the board. The two paths side by side, each its
   card and its steps; then the record and the rules, side by side. One
   column on a phone. The palette, the bar and the plate are plate.css; the
   stamp is web/zine/kit.css; this sets only the page. */

body { min-height: 100vh; background: url(grain.png), var(--ground); background-blend-mode: multiply; }
.bar { position: sticky; top: 0; padding-top: 14px; }

.start {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 18px;
  /* The tape on a plate's corner overhangs it; on a phone that would be a
     few pixels of sideways scroll. */
  overflow-x: clip;
}
.paths, .after { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.path-col, .after > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.start .plate { padding: 16px 20px; }
.start .plate.path { padding: 16px 20px 14px 76px; }
/* Each plate stuck down at its own small angle, as paper is by hand. */
.start .plate:nth-of-type(odd) { transform: rotate(-0.4deg); }
.start .plate:nth-of-type(even) { transform: rotate(0.35deg); }
/* The heading is display type: Bagel Fat One, with the pink pass a little
   off-register, which only display type is allowed. */
.start h1 { margin: 0 0 6px; font: 30px/1.1 var(--display); color: var(--ink); text-shadow: 2px 1.5px 0 rgba(255, 72, 176, 0.7); }
.start h2.panel-title { margin: 6px 0 -4px; }
.start h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.start p, .start ul, .start pre, .start details { margin: 8px 0 0; }
.start .plate > :first-child, .start li > :first-child { margin-top: 0; }
.start ul { padding-left: 2ch; }
.start li + li { margin-top: 4px; }
.start a { color: var(--mention); font-weight: 600; text-underline-offset: 3px; }
.start a:hover { text-decoration: underline wavy var(--pink); }
.start [id] { scroll-margin-top: 80px; }

/* A highlighter drawn across a label, a little crooked, as by hand. */
.start mark {
  padding: 0 4px;
  margin-right: 2px;
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(100deg, transparent 2%, rgba(255, 225, 77, 0.9) 4% 94%, transparent 97%);
  border-radius: 3px 8px 4px 7px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- each path's card: its number a sticker, its name display type ---- */

.path h2 { margin: 0; font: 24px/1.1 var(--display); color: var(--ink); }
.path .num { position: absolute; left: 16px; top: 14px; width: 44px; height: 44px; font: 24px/1 var(--display); color: var(--ink); background: var(--sun); }
#didbot .num { background: var(--pink); transform: rotate(7deg); }

/* The jump to each path, for a phone, where the second is far below. */
.jump { display: none; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jump a {
  padding: 2px 10px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  background: var(--sun);
  border: 2px solid var(--comic, var(--ink));
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--comic, var(--ink));
}
.jump a + a { background: var(--pink); }

/* ---- numbered steps, each number a sticker ---- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li { position: relative; padding-left: 42px; counter-increment: step; }
.steps > li + li { margin-top: 16px; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -3px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font: 16px/1 var(--display);
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--comic, var(--ink));
  border-radius: 50%;
  box-shadow: 2px 3px 0 var(--comic, var(--ink));
  transform: rotate(-8deg);
}

/* ---- what is folded away ---- */

.start summary { cursor: pointer; font-weight: 700; color: var(--mention); }
.start summary:hover { text-decoration: underline wavy var(--pink); text-underline-offset: 3px; }
.start details[open] > summary { margin-bottom: 4px; }

/* The stamp on the privacy plate, struck at a slant in its corner. */
.start .plate.public { padding-right: 112px; }
.public .z-stamp { --z-tilt: -9deg; position: absolute; right: 18px; top: 16px; }

/* Commands and fields, set into the plate. A long command wraps rather
   than scrolls; the wrap is only drawn, so a copy is the command as
   written. */
.start code { padding: 0 4px; border-radius: 4px; background: var(--well); color: var(--ink); font: 0.92em var(--mono); overflow-wrap: anywhere; }
.start pre {
  padding: 9px 12px;
  white-space: pre-wrap;
  background: var(--sticky);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--cast);
}
.start pre code { padding: 0; background: none; font-size: 12px; overflow-wrap: break-word; }
/* The goat recipe, folded away, keeps its lines and scrolls: a jq filter
   wrapped mid-expression no longer reads as one. */
.start details pre { white-space: pre; overflow-x: auto; scrollbar-color: var(--rule) transparent; }
.start details pre code { overflow-wrap: normal; }

.start-foot { width: min(calc(1180px - 36px), calc(100% - 36px)); margin: 0 auto 24px; }

/* Side by side, path 2 is the shorter: it travels down beside path 1, so
   the two stay side by side to the end of it, clear of the bar and its
   checkered strip. */
@media (min-width: 901px) {
  #didbot.path-col { position: sticky; top: calc(var(--bar-h, 63px) + 30px); }
}
@media (max-width: 900px) {
  .paths, .after { grid-template-columns: 1fr; gap: 22px; }
  .jump { display: flex; }
}
@media (max-width: 720px) {
  .start { padding: 22px 14px; gap: 18px; }
  .start .plate { padding: 14px; }
  .start .plate.path { padding: 14px 14px 12px 66px; }
  .path .num { left: 12px; width: 40px; height: 40px; font-size: 22px; }
  /* The step's sticker beside its heading only, so commands get the
     whole width. */
  .steps > li { padding-left: 0; }
  .steps > li > h3 { display: flex; align-items: center; min-height: 26px; padding-left: 38px; }
  .start pre { padding: 8px 10px; }
  .start pre code { font-size: 11.5px; }
  .start .plate.public { padding: 46px 14px 14px; }
  .public .z-stamp { right: auto; left: 14px; top: 12px; }
  .start-foot { width: calc(100% - 28px); }
}