/* GrowlMaster snippet card (snippet-card.js draws it). Printed-sheet look, like
   the rest of GrowlMaster: square corners, no drop shadow, parchment and ink.
   The kind's colour arrives as --snip on the card and paints the band on the
   start edge, the badge and the arrow; nothing else on the card is coloured.

   HEIGHT: exactly five lines of the story (line-height 1.5 at the story's
   size), so a page of 26 lines takes it whole and reflow stays exact. The
   summary is clamped to two lines to fit; the full text is in the data.

   Not scoped under .lb on purpose: the same rules style the card inside an
   exported page and the appendix, where there is no .lb. Every selector starts
   with .gm-snip, so it cannot leak. */

.gm-snip {
  --snip: #865309;
  --snip-ink: #3a2c17; --snip-ink2: #6f5c3c; --snip-ink3: #8f7c56;
  --snip-sheet: #faf5e8; --snip-edge: #cbb98f;
  position: relative; box-sizing: border-box;
  display: grid; grid-template-columns: 4.5em 1fr auto; gap: 0 .75em; align-items: start;
  height: calc(5 * 1.5em); margin: 0 0 1.5em; padding: .5em .75em .5em .9em; overflow: hidden;
  background: var(--snip-sheet); border: 1.5px solid var(--snip-edge); border-inline-start: 6px solid var(--snip);
  border-radius: 0; box-shadow: none;
  font-family: 'Grandstander', system-ui, sans-serif; line-height: 1.5; color: var(--snip-ink);
  break-inside: avoid; page-break-inside: avoid;
  -webkit-user-select: none; user-select: none; text-align: start;
}
.gm-snip__img {
  display: block; width: 4.5em; height: 4.5em; object-fit: cover; box-sizing: border-box;
  border: 1.5px solid var(--snip-edge); background: #f2ead6; margin-top: .25em;
}
.gm-snip__img--glyph { background: var(--snip); object-fit: contain; padding: .55em; border-color: var(--snip); }
.gm-snip__img--icon { display: grid; place-items: center; }
.gm-snip__img--icon i { font-style: normal; font-size: 2.1em; line-height: 1; }
.gm-snip__body { min-width: 0; display: flex; flex-direction: column; }
.gm-snip__name {
  font-family: 'Frank Ruhl Libre', Georgia, serif; font-weight: 800; font-size: 1.15em; line-height: 1.3;
  color: var(--snip-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm-snip__line { font-size: .92em; line-height: 1.63; color: var(--snip-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* A long line wraps to two lines and the summary keeps one, so no stat is cut
   off and the card stays five lines tall. */
.gm-snip--long .gm-snip__line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gm-snip--long .gm-snip__sum { -webkit-line-clamp: 1; }
.gm-snip__kind {
  display: inline-block; padding: 0 .45em; margin-inline-end: .1em; background: var(--snip); color: #fff;
  font-weight: 800; font-size: .82em; letter-spacing: .06em; text-transform: uppercase; line-height: 1.6; vertical-align: .05em;
}
.gm-snip__kindlocal { color: var(--snip-ink2); font-weight: 700; }
.gm-snip__stats { font-weight: 700; }
.gm-snip__pair { white-space: nowrap; }
.gm-snip__sum {
  font-size: .92em; line-height: 1.63; color: var(--snip-ink2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The ref (gm:<kind>:<uid>) stays in the card, so a file read back finds its thing, but is not shown
   (Maayan: hide the grey line on every card). */
.gm-snip__ref { display: none; }
.gm-snip__open {
  display: grid; place-items: center; width: 1.9em; height: 1.9em; margin: 0; padding: 0;
  border: 1.5px solid var(--snip); background: transparent; color: var(--snip);
  font: 800 1em/1 'Grandstander', system-ui, sans-serif; text-decoration: none; cursor: pointer; border-radius: 0;
}
.gm-snip__open:hover { background: var(--snip); color: #fff; }
/* In the app the card sits in a wrapper whose ⋮ menu floats at the top, just
   inside the arrow (app.css: .gm-snipwrap__bar, 64px from the end edge). The
   name and stats rows end before it, so a long name is cut off with "…"
   instead of running under the menu. Only in the app: exports have no menu. */
.gm-snipwrap .gm-snip__name, .gm-snipwrap .gm-snip__line { padding-inline-end: 3.4em; }
/* An action card (open a panel, ask Gorak) is a button, not a thing: its arrow
   is filled, so the eye goes to the tap. */
.gm-snip--action .gm-snip__open { background: var(--snip); color: #fff; }
.gm-snip__open:focus-visible { outline: 2px solid var(--snip); outline-offset: 2px; }

/* Right to left: the band moves to the start edge by itself (logical props);
   the ref stays readable left to right. */
[dir="rtl"] .gm-snip__ref { direction: ltr; }
/* The strict line is always written left to right (dir="ltr" on it), so its
   English stats keep their order; in a right-to-left page it still sits at the
   start edge. */
[dir="rtl"] .gm-snip__line { text-align: right; }

@media print {
  .gm-snip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gm-snip__open[type="button"] { display: none; }
}