/* ============================================================
   YIZZOO - The Secret Code Maker
   Three parts: the controls, the coded note and its key (styled
   ONCE, in em, so the same rules draw the preview and the paper),
   and a preview that is the printed sheet to scale.

   Load after print-sheet.css.
   ============================================================ */

/* ============================================================
   THE CONTROLS
   ============================================================ */

.yz-cm__head{ padding-block: var(--sp-8) var(--sp-6); }

.yz-cm__grid{
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: var(--sp-8);
  align-items: start;
  padding-block: var(--sp-8);
}
@media (max-width: 900px){ .yz-cm__grid{ grid-template-columns: 1fr; gap: var(--sp-6); } }

.yz-cm__panel{
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: var(--sp-4);
}
@media (max-width: 900px){ .yz-cm__panel{ position: static; } }

.yz-cm__group + .yz-cm__group{
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}
.yz-cm__h{
  display: block;
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
  color: var(--color-ink);
}
.yz-cm__label{
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
}
.yz-cm__note{
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-soft-ink);
  margin: var(--sp-2) 0 0;
}

.yz-cm__msg{
  width: 100%;
  min-height: 5.2em;
  resize: vertical;
  font-size: 1.05rem;
  line-height: 1.45;
}

/* ---- the codes: a card each, one chosen ----------------------- */

.yz-cm__codes{ display: grid; gap: var(--sp-2); }

.yz-cm__code{
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-parchment);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-ink);
  transition: background .12s, border-color .12s;
}
.yz-cm__code:hover{ border-color: var(--color-teal); }
.yz-cm__code[aria-checked="true"]{
  background: var(--color-midnight);
  border-color: var(--color-midnight);
  color: var(--color-parchment);
}
.yz-cm__code-top{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.yz-cm__code-name{ font-weight: 700; font-size: 0.98rem; }
.yz-cm__code-ages{ font-size: 0.74rem; opacity: .7; white-space: nowrap; }
.yz-cm__code-what{ display: block; font-size: 0.8rem; line-height: 1.35; margin-top: 2px; opacity: .78; }

.yz-cm__shift{ margin-top: var(--sp-4); }

.yz-cm__slider{ display: block; margin-top: var(--sp-5); font-size: 0.9rem; color: var(--color-soft-ink); }
.yz-cm__shift .yz-cm__slider{ margin-top: 0; }
.yz-cm__slider input[type="range"]{ display: block; width: 100%; margin: 0 0 var(--sp-2); accent-color: var(--color-teal); }
.yz-cm__slider strong{ color: var(--color-ink); }

/* ---- where the key goes: two halves of one control ------------- */

.yz-cm__keyplace{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.yz-cm__kp{
  padding: 10px var(--sp-2);
  background: var(--color-paper);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.87rem;
  color: var(--color-soft-ink);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.yz-cm__kp:hover{ border-color: var(--color-teal); }
.yz-cm__kp[aria-checked="true"]{
  background: var(--color-teal-08);
  border-color: var(--color-teal);
  color: var(--color-ink);
  font-weight: 700;
}

.yz-cm__actions{
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}

/* ---- the preview ----------------------------------------------- */

.yz-cm__previewhead{ margin-bottom: var(--sp-4); }
.yz-cm__previewhead .yz-cm__h{ margin-bottom: 2px; }
.yz-cm__flourish{ display: block; width: 58px; height: auto; margin: 4px 0 0; opacity: .42; }

/* THE PREVIEW IS THE SHEET, TO SCALE. The paper's type is sized from
   its own width (cqi) in the same ratio as 11.5pt is to a 7.5 inch
   printed line, and every rule below is in em. So a message that
   would spill off the printed page spills off this one first, where
   somebody can see it and shorten it. */
.yz-cm__paper{
  container-type: inline-size;
  max-width: 660px;
}
.yz-cm__paper .yz-pp{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;               /* fallback; the line below wins where supported */
  font-size: 2.13cqi;
  line-height: 1.5;
  color: #1a1a1a;
  background: #fff;
  padding: 3.2%;
  margin-bottom: var(--sp-5);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(23,49,58,.08), 0 8px 26px rgba(23,49,58,.12);
}
/* The frame, in em versions of print-sheet.css's inches and points. */
.yz-cm__paper .yz-pp__page{
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 7.5 / 9.55;
  border: 1px solid #444;
  padding: 2.13em 2.63em 2.9em;
  text-align: center;
}
.yz-cm__paper .yz-pp__corner{ position: absolute; width: 2.63em; height: 2.63em; }
.yz-cm__paper .yz-pp__corner--tl{ top: -1px;    left: -1px;  }
.yz-cm__paper .yz-pp__corner--tr{ top: -1px;    right: -1px; transform: rotate(90deg); }
.yz-cm__paper .yz-pp__corner--br{ bottom: -1px; right: -1px; transform: rotate(180deg); }
.yz-cm__paper .yz-pp__corner--bl{ bottom: -1px; left: -1px;  transform: rotate(270deg); }
.yz-cm__paper .yz-pp__h1{ font-size: 2.09em; line-height: 1.15; margin: 0; font-weight: 700; }
.yz-cm__paper .yz-pp__divider{ display: block; width: 15em; height: auto; margin: .45em auto 1em; }
.yz-cm__paper .yz-pp__nameline{ width: 20em; margin: .6em auto 1.5em; }
.yz-cm__paper .yz-pp__rule{ display: block; border-bottom: 1px solid #444; }
.yz-cm__paper .yz-pp__namelabel{
  display: block; margin-top: .25em;
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
  font-size: .7em; letter-spacing: .12em; text-transform: uppercase; color: #777;
}
.yz-cm__paper .yz-pp__slug{
  position: absolute; left: 2.63em; right: 2.63em; bottom: 1.06em;
  display: flex; justify-content: space-between;
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
  font-size: .65em; letter-spacing: .08em; text-transform: uppercase; color: #999;
  border-top: 1px solid #ddd; padding-top: .4em;
}

/* ---- the words underneath -------------------------------------- */

.yz-cm__words{
  max-width: var(--reading-max);
  margin: 0 auto;
  padding-block: var(--sp-8) var(--sp-10);
  border-top: 1px solid var(--color-border);
}
.yz-cm__words h2{ font-size: var(--fs-h3); line-height: var(--lh-h3); margin: var(--sp-7) 0 var(--sp-3); }
.yz-cm__words h2:first-child{ margin-top: 0; }
.yz-cm__words p{ margin: 0 0 var(--sp-4); line-height: var(--lh-body); }

/* ============================================================
   THE NOTE AND THE KEY
   One set of rules for the preview and the paper, all in em, so the
   two cannot drift apart. Everything that has to print is a BORDER:
   a printer with background graphics off drops backgrounds and
   keeps borders, and the code still prints.
   ============================================================ */

.yz-note__how{
  font-size: .92em;
  line-height: 1.45;
  max-width: 34em;
  margin: 0 auto 1.1em;
  color: #333;
}

.yz-note{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1em 1.5em;              /* rows, then the space between words */
  margin: .3em 0 1.2em;
}
.yz-pp.is-dense .yz-note{ font-size: .84em; gap: .9em 1.3em; }

.yz-note__word{ display: inline-flex; gap: .24em; }

.yz-note__cell{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 2em;
}
.yz-note__g{
  height: 1.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* THE BOX ARRIVES EMPTY. It is where the answer gets written, one
   letter at a time, which is how codes actually get cracked. */
.yz-note__box{
  width: 1.9em;
  height: 2.05em;
  margin-top: .2em;
  border: 0.75pt solid #444;
}

/* Punctuation and anything not coded: printed as it is, with no box,
   because there is nothing to crack. */
.yz-note__cell--plain{ min-width: .5em; }
.yz-note__cell--plain .yz-note__g{ font-size: 1.3em; height: 1.46em; }

.yz-num{ font-size: 1.22em; font-weight: 700; font-variant-numeric: tabular-nums; }
.yz-let{ font-size: 1.4em; font-weight: 700; letter-spacing: .02em; }
.yz-pig{ width: 1.8em; height: 1.8em; display: block; }

/* Morse, drawn: a dot is a ring filled by its own border, a dash is a
   top border. Neither is a background, so both survive any printer. */
.yz-morse{ display: inline-flex; align-items: center; gap: .17em; padding: 0 .12em; }
.yz-morse__dot{
  display: block;
  width: .44em; height: .44em;
  border: .22em solid #1a1a1a;
  border-radius: 50%;
  box-sizing: border-box;
}
.yz-morse__dash{
  display: block;
  width: 1em; height: 0;
  border-top: .24em solid #1a1a1a;
  border-radius: 1px;
}

/* Mirror writing: one block, flipped, and lines to write on. */
.yz-note__mirror{ margin: .6em 0 1em; }
.yz-note__mirror span{
  display: inline-block;
  transform: scaleX(-1);
  font-size: 2em;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .03em;
  max-width: 13em;
}
.yz-note__lines{ margin: 0 1.2em 1em; }
.yz-note__lines span{ display: block; height: 2.4em; border-bottom: 0.75pt solid #444; }

.yz-note__empty{ margin: 2.5em 0; color: #888; font-style: italic; }
.yz-note__find{ margin-top: auto; padding-top: 1em; font-style: italic; color: #444; }

/* ---- the cut line ---------------------------------------------
   Pale, the way every cut line in the printables is: a cut that
   wanders a little leaves nothing anybody notices. */
.yz-cut{
  position: relative;
  margin: auto 0 1.1em;
  padding-top: 1.1em;
  border-top: 0.75pt dashed #aaa;
}
.yz-cut span{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -55%);
  padding: 0 .7em;
  background: #fff;
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
  font-size: .62em;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #999;
  white-space: nowrap;
}
/* On its own card, the key is the page, so it sits in the middle. */
.yz-pp--key .yz-key{ margin: auto 0; }

.yz-key__label{
  margin: 0 0 .7em;
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
  font-size: .72em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #555;
}

/* A = 1: thirteen pairs to a row, number over letter. */
.yz-key__row--pairs{ display: grid; grid-template-columns: repeat(13, 1fr); }
.yz-key__pair{
  display: flex;
  flex-direction: column;
  padding: .25em 0;
  border: 0.5pt solid #999;
  margin: -0.25pt;
}
.yz-key__top{ font-weight: 700; font-variant-numeric: tabular-nums; }
.yz-key__bot{ color: #333; border-top: 0.5pt solid #ddd; margin-top: .15em; padding-top: .1em; }

/* Shift: what is in the message on top, what it means underneath. */
.yz-key__strip{ display: grid; grid-template-columns: auto repeat(26, 1fr); font-size: .9em; }
.yz-key__labels{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-right: .6em;
  text-align: right;
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
  font-size: .62em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #555;
  line-height: 1.2;
}
.yz-key__col{ display: flex; flex-direction: column; border: 0.5pt solid #999; margin: -0.25pt; }
.yz-key__col span{ padding: .2em 0; }
.yz-key__col span:first-child{ font-weight: 700; border-bottom: 0.5pt solid #ccc; }

/* Morse: six to a row, letter then code. */
.yz-key__morse{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .45em .9em;
  text-align: left;
  font-size: .95em;
}
.yz-key__m{ display: flex; align-items: center; gap: .45em; }
.yz-key__m b{ width: 1em; text-align: center; }

.yz-key__pigsvg{ display: block; width: 100%; max-width: 32em; height: auto; margin: 0 auto; }

.yz-key__mirror{ max-width: 30em; margin: 0 auto; font-size: .95em; line-height: 1.5; }

/* MORSE NEEDS ROOM BETWEEN LETTERS. With the ordinary gap, "E E" (two
   dots) sat so close it read as "I" (one letter, two dots), which is
   the one ambiguity Morse cannot afford. Each letter is its own island
   here, with a clear gap either side and its box underneath. */
.yz-pp--morse .yz-note__word{ gap: .8em; }
.yz-pp--morse .yz-note{ gap: 1.2em 2.2em; }

/* The message settles into the space between the heading and the cut
   line, rather than hugging the top with an empty middle beneath it.
   Two auto margins in the column share the spare height between them. */
.yz-pp__page > .yz-note,
.yz-pp__page > .yz-note__mirror{ margin-top: auto; }