/* Recipe-web (Game Factory\directions\Series\tools\recipe-web): the look the webpage-only Game Recipe adds to the
   series theme. Copied into book\theme\ by cards-web.cjs and listed in _quarto.yml. */

/* No text cursor on words the reader can't type in, as on the documentation site (docs-site myth.css). */
:root { caret-color: transparent; }
input, textarea, [contenteditable='true'], [contenteditable=''], [contenteditable='plaintext-only'] { caret-color: auto; }

/* An Event's heading: its own Name, a plain line above the Event box ("On Crystals Locked"). */
.mc-event-head {
  margin: 1.6rem 0 0.35rem; font-size: 1rem; font-weight: 760; letter-spacing: -0.01em;
  color: #17191d; line-height: 1.3;
}
.mc-event-head + .mc-event { margin-top: 0; }
.mc-event-head + .mc-event-head { margin-top: 0.2rem; }
.mc-event-head.mc-del { text-decoration: line-through; text-decoration-color: rgba(229, 83, 75, 0.7); }
.mc-event-head.mc-add, .mc-event-head.mc-del { padding: 0.15rem 0.6rem; }

/* A CHANGES card's head: an Object added to "Attach to" (green), or taken away (red, struck). */
.mc-meta-add { color: #1b6e3b; background: rgba(46, 160, 67, 0.16); padding: 0 0.35em; border-radius: 4px; }
.mc-meta-del { color: #a32a24; background: rgba(229, 83, 75, 0.12); padding: 0 0.35em; border-radius: 4px; text-decoration: line-through; }

/* A value keeps its spaces as typed ("FINAL SCORE  {$score}" has two), still wrapping where it must (asteroids recipe, pass 3). */
.mcard code.mc-v { white-space: pre-wrap; }

/* A condition row's value type, when it isn't Number (Weighted Maze recipe, pass 7): the label in front of the
   condition stands where the Logic editor's type list stands (Text, Boolean ...). The two stay together when
   the step's head wraps; a long condition wraps inside its own box. */
.mc-cond-row { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; }
.mc-cond-row code.mc-cond { min-width: 0; }
.mc-type {
  flex: none; font-size: 0.72rem; font-weight: 700; line-height: 1.3; color: #3b3f46; background: #f3efe7;
  border: 1px solid rgba(23, 25, 29, 0.16); border-radius: 999px; padding: 0.08em 0.55em;
}
.mc-type.mc-del { text-decoration: line-through; }

/* A Library card (Chess recipe, pass 3): a JavaScript build the project stores, added in Myth's Library editor
   (cards-web.cjs, "Libraries"). Its own color among the card kinds; white words on it at 5.7 to 1. */
.mcard-library { --kc: #1f6f8b; }

/* A deleted section head, row head, key or Event Logic line on a CHANGES card is struck like every other deleted
   line: Messages' old "ROWS 8" under its new "ROWS 13" was only red, and read as "delete 8 rows" (Weighted Maze
   recipe, pass 15, Chapter 4's reader round 1, M3). */
.mc-sec.mc-del > span, .mc-sec.mc-del > em, .mc-sub.mc-del > span, .mc-sub.mc-del > strong,
.mc-kv.mc-del > .mc-k, .mc-note.mc-del > .mc-k, .mc-note.mc-del > .mc-note-v {
  text-decoration: line-through; text-decoration-color: rgba(229, 83, 75, 0.7);
}

/* Column rows keep their columns at phone width (Pacific Wings recipe, pass 7; Chapter 1's reader round 2, M14). The
   series theme stacks every card row at 640 px or less, so a table's column heads ("OBJECT X Y", "NAME TYPE STARTS AT")
   stood one under another, over values stacked the same way, and the reader counted down to pair them. Each row is a
   grid of its own, so every column row here takes the same three tracks, fractions with no minimum: the rows of a table
   line up under its head, and a long word wraps inside its cell, as it does at any width. A two-cell row (a Text
   Parameter with no value, a VARIABLES row) spans its second cell over the last two columns; a four-cell row (a
   placement's "hidden" under an OBJECT X Y head) puts its fourth cell on a line of its own, under X and Y. Key and value
   rows (.mc-kv) still stack. */
@media (max-width: 640px) {
  .mcard .mc-row.mc-cols-2, .mcard .mc-row.mc-cols-3, .mcard .mc-row.mc-cols-4 {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 0.6rem;
  }
  .mcard .mc-row.mc-cols-2 > :nth-child(2), .mcard .mc-row.mc-cols-4 > :nth-child(n+4) { grid-column: 2 / -1; }
  .mcard .mc-row[class*="mc-cols-"]:not(.mc-colhead) .mc-c0, .mcard .mc-row[class*="mc-cols-"]:not(.mc-colhead) .mc-c { font-size: 0.78rem; }
}