/* Search results: the results panel, the result rows and their actions, highlighted letters, the "იხ." look-up
   popup. The results sit on the page itself, not in a box: rows split by hairlines, with room around them. */

.results-panel {
  min-height: var(--size-pane);
}

.result-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* lets long previews shrink to an ellipsis */
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-list:empty {
  display: none;
}

.result {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.result:first-child {
  padding-top: var(--space-1);
}

.result-text {
  flex: 1;
  min-width: 0;
}

/* The play button, before the text and centred on the headword and preview together. A word without a recording has
   only a blank button, which takes no space, so its text starts at the row's edge. */
.result > .play-button {
  flex: none;
  align-self: center;
  width: var(--size-control-md);
  height: var(--size-control-md);
}

.result > .play-button .icon {
  width: 2rem;
  height: 2rem;
}

.result > .play-button[data-play=''] {
  display: none;
}

.result-word {
  display: block;
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.result-word:hover {
  color: var(--color-accent);
}

/* The letters that matched the search (`Highlighted`, public/js/highlight.js): accent colour and bold, readable in
   both themes (the browser's yellow <mark> is not). */
.result mark,
.suggestions mark {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  background: none;
}

/* A headword in Latin letters, after the Georgian spelling (English pages). */
.romanized {
  margin-left: 0.5em;
  color: var(--color-text-muted);
  font-family: var(--font-text);
  font-size: var(--text-smaller);
  font-weight: var(--weight-regular);
  font-style: italic;
}

.word-header .romanized {
  margin-left: 0;
  font-size: var(--text-xl);
}

.result-preview {
  /* The meaning wraps (the server caps it at 160 characters); three lines at most, the full text is on the word page. */
  display: -webkit-box;
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.result-preview .muted {
  color: var(--color-text-muted);
  font-style: italic;
}

/* "იხ. სიტყვა" in a meaning: the word is a button that looks it up in a popup (public/js/see-also.js). It reads as a
   link inside the text. */
.see-also-link {
  display: inline;
  padding: 0;
  border: 0;
  font: inherit;
  color: var(--color-accent);
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  background: none;
  cursor: pointer;
}

.see-also-link:hover,
.see-also-link[aria-expanded='true'] {
  text-decoration-style: solid;
}

/* The UA styles centre a popover (inset: 0; margin: auto); see-also.js places it at the button instead. */
.see-also-popup {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(26rem, calc(100vw - 12px));
  max-height: min(22rem, calc(100vh - 12px));
  overflow: auto;
  padding: var(--space-2) var(--space-3) var(--space-3);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.see-also-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.see-also-header strong {
  flex: 1;
}

.see-also-close {
  min-width: var(--size-control-sm);
  min-height: var(--size-control-sm);
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  background: none;
  cursor: pointer;
}

.see-also-close:hover {
  color: var(--color-text);
  background: var(--color-border);
}

.see-also-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.see-also-results li + li {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--color-border);
}

.see-also-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.see-also-word {
  font-weight: var(--weight-semibold);
}

.see-also-preview {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

/* "All results": a full-width page button under the list. */
.button.see-also-all {
  display: flex;
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  box-shadow: none;
  cursor: pointer;
}

.see-also-state {
  margin: 0;
  color: var(--color-text-muted);
}

.see-also-state.failed {
  color: var(--color-danger);
}

.result-actions {
  display: flex;
  flex: none;
}

/* With a mouse, a row shows only star and share until it is hovered or holds the focus; then record, edit and report
   fade in to their left. They always keep their space (only the opacity changes), so star and share never move under
   the pointer. Invisible, they stay in the tab order (focus shows them). Touch screens have no hover: they always show
   every icon. */
@media (hover: hover) {
  .result .result-actions-contribute {
    transition: opacity var(--duration-base);
  }

  .result:not(:hover, :focus-within) .result-actions-contribute {
    opacity: 0;
  }
}

/* Phones: the icons get their own row under the text (and the play button) instead of squeezing it into a narrow
   column. */
@media (max-width: 30rem) {
  .result {
    flex-wrap: wrap;
  }

  .result-actions {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}

/* Record, edit and report sit apart from star and share behind a thin divider: after them on the word page, before
   them on the result rows. */
.result-actions-contribute {
  display: flex;
  align-items: center;
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: var(--border-width) solid var(--color-border);
}

.result .result-actions-contribute {
  margin: 0 var(--space-2) 0 0;
  padding: 0 var(--space-2) 0 0;
  border-left: 0;
  border-right: var(--border-width) solid var(--color-border);
}

.result-actions .icon-button {
  width: var(--size-control-xs);
  height: var(--size-control-xs);
}

/* Play / pause (PlayButton): a triangle in a thin circle outline. While playing, a pause icon, and a thicker arc
   grows round the circle from the top, leftwards (counterclockwise), as far as the clip has played. Paused, the arc
   stays and the triangle comes back. */
.play-button .play-shape,
.play-button .pause-shape {
  fill: currentColor;
}

.play-button .play-track,
.play-button .play-ring {
  fill: none;
}

.play-button .play-track {
  stroke: currentColor;
  stroke-width: 1.5;
}

.play-button .play-ring {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.play-button .play-ring,
.play-button .pause-shape,
.play-button.playing .play-shape {
  display: none;
}

.play-button.playing .play-ring,
.play-button.paused .play-ring,
.play-button.playing .pause-shape {
  display: inline;
}

/* Once started, the outline goes faint so the arc reads as progress. */
.play-button.playing .play-track,
.play-button.paused .play-track {
  stroke: color-mix(in srgb, currentColor 25%, transparent);
}

.play-button.playing,
.play-button.paused {
  color: var(--color-accent);
}

/* A starred word: the star is filled. */
[data-favorite][aria-pressed='true'] {
  color: var(--color-accent);
}

[data-favorite][aria-pressed='true'] .icon {
  fill: currentColor;
}

.results-note:empty {
  display: none;
}

.results-note > :first-child {
  margin-top: var(--space-3);
}

.result-list:empty ~ .results-note > :first-child {
  margin-top: 0;
}

.results-empty {
  margin: 0;
  padding: var(--space-4) 0;
  color: var(--color-text-muted);
}

/* Centred under the results; `.button` (below) would make it inline. */
.button.results-more {
  display: flex;
  width: fit-content;
  margin: var(--space-6) auto 0;
}

.transliterated {
  color: var(--color-text-muted);
  font-size: var(--text-smaller);
}

.results-panel > .transliterated {
  margin: 0 0 var(--space-2);
}

.transliterated strong {
  color: var(--color-text);
}

/* Rows the server rendered (the /search page) come in one after another like the ones fetched while typing
   (`.entering`, translator.css); `translator.js` sets --stagger inline on its own rows, which wins. Capped at the
   tenth row, so a long page doesn't wait. */
.result-list > li {
  animation: result-in var(--duration-enter) var(--ease-out) both;
  animation-delay: calc(var(--stagger, 9) * var(--duration-stagger));
}

.result-list > li:nth-child(1) {
  --stagger: 0;
}
.result-list > li:nth-child(2) {
  --stagger: 1;
}
.result-list > li:nth-child(3) {
  --stagger: 2;
}
.result-list > li:nth-child(4) {
  --stagger: 3;
}
.result-list > li:nth-child(5) {
  --stagger: 4;
}
.result-list > li:nth-child(6) {
  --stagger: 5;
}
.result-list > li:nth-child(7) {
  --stagger: 6;
}
.result-list > li:nth-child(8) {
  --stagger: 7;
}
.result-list > li:nth-child(9) {
  --stagger: 8;
}

/* Starring a word: the star pops. */
[data-favorite][aria-pressed='true'] .icon {
  animation: star-pop var(--duration-reveal) var(--ease-out);
}

@keyframes star-pop {
  40% {
    scale: 1.35;
    rotate: -12deg;
  }
}