/* "As on the page" layout of the transcription (layout.js).
   The page's columns side by side, right to left (.lay is a dir=rtl flex row,
   the right-hand column first, as in mishnah-viewer's .kr-wrap/.kr-col).
   Each column is a grid: [right margin] [line number] [text] [left margin];
   a line with margin notes is a display:contents row, so its notes sit in the
   margin tracks level with it while every line keeps one text track. */

.lay {
  display: flex; direction: rtl; align-items: flex-start;
  font-family: var(--hebrew);
}
.lines.lay-col {
  flex: 1 1 0; min-width: 0; margin: 0; padding: 0 10px;
  display: grid; grid-template-columns: auto 2em minmax(0, 1fr) auto; column-gap: 0;
  align-content: start;
  font-size: calc(1.05rem * var(--fit, 1)); line-height: 1.7;
  /* columns that begin lower on the page begin lower here */
  margin-block-start: calc(var(--top, 0) * 1lh);
}
.lines.lay-col + .lay-col { border-inline-start: 1px solid var(--line); }
.lay-col > li, .lay-row > li { grid-column: 3; }
.lay-row { display: contents; }
.lay-gap { grid-column: 1 / -1; height: calc(var(--n, 1) * 1lh); }
.lay-cap {
  grid-column: 1 / -1; font: .72rem var(--ui); color: var(--muted);
  padding-inline-start: 2.6em; margin-bottom: 2px;
}
/* a manuscript line too long for the column wraps with a hanging indent */
.lay-col > li:not(.lay-inter), .lay-row > li { padding-inline-start: calc(6px + .8em); text-indent: -.8em; }

/* written between the lines: smaller, and nudged in from the line start */
.lines li.lay-inter {
  font-size: .78em; line-height: 1.45; padding-inline-start: max(1.6em, calc(var(--at, 0) * 1%));
  color: color-mix(in srgb, var(--ink) 80%, var(--muted));
}

/* margin notes */
.lines.lay-mg {
  margin: 0; padding: 0; padding-inline-start: 1.5em; list-style-position: outside;
  max-width: 6.5em; font-size: .72em; line-height: 1.35; align-self: center;
}
.lines.lay-mg:empty { padding: 0; margin: 0; }
.lay-mg.lay-start { grid-column: 1; margin-inline-end: 4px; }
.lay-mg.lay-end { grid-column: 4; margin-inline-start: 6px; }
.lines .lay-note {
  padding: 1px 4px; margin-block: 1px;
  border: 1px dotted color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 4px;
}
.lines.lay-mg li::marker { font-size: .85em; }
/* a piece of a line beside a hole in the leaf: text, not a note */
.lines .lay-piece { padding: 1px 4px; font-size: 1.25em; line-height: 1.5; }
.lines.lay-mg:has(.lay-piece) { max-width: 9em; }

@media (max-width: 760px) {
  /* phones: the columns one after the other, the right-hand one first */
  .lay { flex-direction: column; }
  .lines.lay-col { width: 100%; flex: none; margin-block-start: 0; padding: 0; }
  .lines.lay-col + .lay-col {
    border-inline-start: 0; border-top: 1px dashed var(--line);
    margin-top: .6em; padding-top: .6em;
  }
  .lines.lay-mg { max-width: 5.5em; }
}