/* Linger (modules/linger-row.js): one quiet mark per poem and how many
   hands lingered on it, on a Kukai tile, under a master's poem in read and
   on its own page; the whole word is the target, not just the mark. The
   ink a hand leaves is --linger-c, the season's accent unless the holder
   sets its own (a tile, its season's). */

.tlinger {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px;
  font-family: var(--font-label); font-weight: 300; font-size: var(--type-2); letter-spacing: var(--track-quiet);
  cursor: default;
}
.tlinger-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: none; border: none; padding: 6px 8px 6px 0; border-radius: 2px; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--paper-dim);
  transition: color var(--dur-hover) var(--ease-breath);
}
.tlinger-btn:hover, .tlinger-btn[aria-pressed="true"] { color: var(--paper); }
/* 韻 drawn in the quiet ink until a hand lingers; ::before is the same
   glyph in the season's ink, uncovered from the centre. The transparent
   ring shows only where forced colours paint every glyph alike */
.tlinger-mark {
  position: relative; flex: none; border-radius: 50%;
  font-family: var(--font-glyph); font-size: 20px; line-height: 1; letter-spacing: 0;
  color: var(--paper-faint);
  transition: color var(--dur-hover) var(--ease-breath);
}
.tlinger-btn:hover .tlinger-mark,
.tlinger-btn:focus-visible .tlinger-mark { color: color-mix(in srgb, var(--linger-c, var(--accent)) 40%, var(--paper-faint)); }
.tlinger-mark::before {
  content: attr(data-mark); position: absolute; inset: 0; color: var(--linger-c, var(--accent));
  clip-path: circle(0% at 50% 55%);
}
.tlinger-btn[aria-pressed="true"] .tlinger-mark { outline: 1px solid transparent; outline-offset: 4px; }
.tlinger-btn[aria-pressed="true"] .tlinger-mark::before { clip-path: circle(75% at 50% 55%); }
.tlinger-count { color: var(--paper-faint); font-variant-numeric: tabular-nums; }

/* under a master's poem in read: its own row, the first of the ways hung
   under the author (read.css), out of reach until the poem has settled, as
   the pointer to the Kukai is. The button stays centred and its count stands
   beside it out of the flow, so a press never moves it. The column's foot
   makes room for twice the row (--linger-room, read.css): the column rises
   by the row, and the ways keep their place */
.read-linger {
  min-height: var(--linger-h); margin-bottom: var(--linger-gap);
  visibility: hidden; transition: visibility 0s linear var(--dur-exit);
}
.meta.show .read-linger { visibility: visible; transition: visibility 0s; }
.read-linger .tlinger { position: relative; width: max-content; margin-inline: auto; }
.read-linger .tlinger-count { position: absolute; left: 100%; white-space: nowrap; }
.read-linger .tlinger-btn, .linger-slot .tlinger-btn { min-height: var(--linger-h); }
.stage:has(.read-linger:not([hidden])) { --linger-room: calc(2 * (var(--linger-h) + var(--linger-under, 0px) + var(--linger-gap))); }

/* on a master's own page: a slot as tall as the row, so the row drawn
   into it moves nothing, and empty without JS */
.linger-slot { min-height: var(--linger-h); margin-top: 32px; }
.linger-slot .tlinger { justify-content: flex-start; }

/* short screens: the ways join the column's flow (read.css), and Linger
   shares the pointer's line, the room for its count kept beside it */
@media (max-height: 880px) {
  .stage:has(.read-linger:not([hidden])) { --linger-room: 0px; }
  .read-linger { margin-bottom: 0; }
  .read-linger .tlinger { padding-right: var(--linger-count-w); }
  .read-linger .tlinger-count { left: auto; right: 0; width: var(--linger-count-w); }
}

/* phones: the count on a line of its own under the button, kept for it, as
   wide as it may grow; where the ways join the flow, the offer follows
   Linger and the pointer */
@media (max-width: 640px) {
  .read-linger .tlinger { flex-direction: column; gap: 0; padding-right: 0; min-width: var(--linger-count-w); }
  .read-linger .tlinger-count { position: static; min-height: var(--linger-count-h); }
  .stage:has(.read-linger:not([hidden])) { --linger-under: var(--linger-count-h); }
  .read-ways:has(.read-linger:not([hidden])) .read-offer { order: 1; flex-basis: 100%; }
}

/* the narrowest phones and landscape phones: Linger as tall as the
   pointer, which goes by its name beside it, 句会 its gloss, so the two
   keep one line */
@media (max-width: 340px), (max-height: 480px) and (max-width: 900px) {
  .read-linger, .read-linger .tlinger-btn { min-height: 0; }
  .read-linger .tlinger-btn { padding-block: 3px; }
  .read-ways:has(.read-linger:not([hidden])) .pointer-gloss { display: none; }
}

/* landscape phones: one short line, the count beside Linger */
@media (max-height: 480px) and (max-width: 900px) {
  .read-linger .tlinger { flex-direction: row; padding-right: var(--linger-count-w); }
  .read-linger .tlinger-count { position: absolute; min-height: 0; }
  .read-ways:has(.read-linger:not([hidden])) { align-items: center; }
}

/* a hand lingering spreads the ink through 韻 from its centre, and letting
   go draws it back; without this, the glyph fills and empties at once */
@media (prefers-reduced-motion: no-preference) {
  .tlinger-mark::before { transition: clip-path var(--dur-state) var(--ease-breath); }
  .tlinger-btn[aria-pressed="true"] .tlinger-mark::before { transition-timing-function: var(--ease-ink); }
}