/*
 * The library, the search and the sources (plan 12, work package A): what these pages add to the
 * kit's components. A card whose picture is a button and plays the video where it stands, the
 * lines of moments under the library's search, the uploads, the sources' table and the folded
 * administration section. Everything else on these pages is the kit's.
 */

/* The filter row: the platform chips at the start, «احفظ هذا البحث» at the end. */
.lq-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.lq-filters .lq-search {
  width: 320px;
}

/* «نتائج «كلمة»» over the cards, with the way to clear it beside it. */
.lq-query {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

/* The guest's search box takes the column; the member's is in the top bar. */
.lq-explore .lq-search--lg {
  width: 100%;
  margin-block-end: 24px;
}

.lq-search-box .lq-search--lg {
  width: 100%;
}

/*
 * A playable card: the picture is a button. It keeps the thumbnail's shape and corners, and shows
 * the play mark over the scrim; the focus ring is the kit's.
 */
.lq-vcard--playable .lq-thumb {
  cursor: pointer;
}

/*
 * The picture's own box: the card's title link covers the whole card (media.f7944a48.css), so this sits
 * above it and the picture is what the pointer finds there, to preview and to play. The live
 * preview is laid over the picture inside it.
 */
.lq-vcard__media {
  position: relative;
  z-index: 1;
}

.lq-vcard__play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.lq-vcard__play:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.lq-vcard__playmark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-overlay-scrim);
  color: var(--white);
  opacity: 0;
  transform: translate(50%, -50%);
  transition: opacity 120ms;
}

.lq-vcard__play:hover .lq-vcard__playmark,
.lq-vcard__play:focus-visible .lq-vcard__playmark {
  opacity: 1;
}

/* While the frame plays over the picture the mark would only show through it. */
.lq-vcard--previewing .lq-vcard__play:hover .lq-vcard__playmark,
.lq-vcard--previewing .lq-vcard__play:focus-visible .lq-vcard__playmark {
  opacity: 0;
}

.lq-vcard__playmark .lq-icon {
  width: 20px;
  height: 20px;
}

@media (hover: none) {
  .lq-vcard__playmark {
    opacity: 1;
  }
}

.lq-vcard__topics {
  margin: 0;
}

/* Under a member's card: the platform, the studio, the pull, the licence. */
.lq-vcard__actions {
  /* Above the title's stretched link (media.f7944a48.css), so the buttons under it take the click. */
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 2px;
}

/* A long label («قصّ لقطة (مقطع افتراضي)») wraps inside a narrow card instead of sticking out. */
.lq-vcard__actions .lq-btn {
  max-width: 100%;
  min-width: 0;
}

.lq-vcard__actions .lq-btn__label {
  white-space: normal;
  text-align: start;
}

/* What a pull or a request came to, under the actions. */
.lq-vcard__note {
  margin: 0;
  color: var(--color-text-secondary);
}

.lq-vcard__note--error {
  color: var(--color-status-danger);
}

/*
 * The live preview (D22.1): the official player, muted, over the picture. It takes no pointer
 * and no focus, so the press and the hover stay with the picture's button under it; the picture
 * shows until the frame has loaded, then the frame fades in.
 */
.lq-vcard__preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--ink-950);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms;
}

.lq-vcard__preview--ready {
  opacity: 1;
}

.lq-vcard__preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * A platform's own file (D22.6): Telegram's, muted in the preview, with its controls on a press
 * and in the large view. It keeps its own shape inside the box, on the dark of the player.
 */
.lq-vcard__preview video,
.lq-player--native video,
.lq-bigplayer__frame--native video {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink-950);
  object-fit: contain;
}

.lq-player--native {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--ink-950);
}

@media (prefers-reduced-motion: reduce) {
  .lq-vcard__preview {
    transition: none;
  }
}

/*
 * The floating card of the hover preview (D23.1 to D23.3): one element on the page's top layer,
 * laid over the card the pointer rests on and grown from its picture to a size worth watching.
 * Its place and its stage's height come from the module (held by animations: the page takes no
 * inline style) and its entrance is a `transform` and `opacity` animation from the picture's place;
 * everything else is here, in the kit's tokens, so the dark theme and the reading direction follow.
 * Warming, it is laid out and loading but unseen. Once shown, the preview's element is as seen as the
 * card is (WebKit will not start a muted video, nor keep it going, that it takes for unseen: never
 * zero opacity, size or `visibility: hidden` for it), and the card's picture lies over it, with a
 * clear line moving under it, until the first frame has come; then the picture fades away (D23.7).
 */
.lq-hovercard {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: 360px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow:
    var(--shadow-overlay),
    0 0 0 1px var(--color-border-default);
  color: var(--color-text-primary);
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 0;
  container-type: inline-size;
}

.lq-hovercard--shown {
  opacity: 1;
  pointer-events: auto;
}

.lq-hovercard--leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
}

/* Where the video plays: the card's picture, blurred, behind a contained video of any shape. */
.lq-hovercard__stage {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-950);
}

.lq-hovercard__backdrop,
.lq-hovercard__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lq-hovercard__backdrop {
  object-fit: cover;
  filter: blur(24px);
  transform: scale(1.2);
}

/* The video is whole and seen from the start; the card's own picture lies over it until it plays. */
.lq-hovercard__media {
  position: absolute;
  inset: 0;
}

.lq-hovercard__still {
  object-fit: contain;
  transition: opacity 200ms;
}

.lq-hovercard--ready .lq-hovercard__still {
  opacity: 0;
}

.lq-hovercard__media video,
.lq-hovercard__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

/* A press on the picture switches the sound (or plays the card); the buttons are above it. */
.lq-hovercard__hit {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* A frame that would not start by itself takes the press itself: its own play button is there. */
.lq-hovercard--through .lq-hovercard__hit {
  pointer-events: none;
}

/* The thin line that moves while the first frame is on its way. */
.lq-hovercard__loading {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--white) 40%, transparent);
  direction: ltr;
}

.lq-hovercard__loading[hidden] {
  display: none;
}

.lq-hovercard__loading span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-accent-amber);
  animation: lq-hover-load 900ms ease-in-out infinite alternate;
}

@keyframes lq-hover-load {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(150%);
  }
}

/* A local video's place in its length. */
.lq-hovercard__progress {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  width: 100%;
  height: 3px;
  border: 0;
  background: color-mix(in srgb, var(--white) 24%, transparent);
  -webkit-appearance: none;
  appearance: none;
}

.lq-hovercard__progress[hidden] {
  display: none;
}

.lq-hovercard__progress::-webkit-progress-bar {
  background: transparent;
}

.lq-hovercard__progress::-webkit-progress-value {
  background: var(--color-accent-amber);
}

.lq-hovercard__progress::-moz-progress-bar {
  background: var(--color-accent-amber);
}

/* «جارٍ التحميل…»: said once a card has been loading for a second, beside the line. */
.lq-hovercard__loadword,
.lq-hovercard__hint {
  position: absolute;
  margin: 0;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--color-overlay-scrim);
  color: var(--white);
  pointer-events: none;
}

.lq-hovercard__loadword {
  inset-block-end: 14px;
  inset-inline-start: 8px;
  max-width: calc(100% - 16px);
}

/* «اضغط في أي مكان لتفعيل الصوت»: the corner opposite the sound switch. */
.lq-hovercard__hint {
  inset-block-start: 8px;
  inset-inline-start: 8px;
  max-width: calc(100% - 64px);
}

.lq-hovercard__loadword[hidden],
.lq-hovercard__hint[hidden] {
  display: none;
}

/* The sound switch: pressed means muted, drawn with a stroke across the speaker. */
.lq-hovercard__mute {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
}

.lq-hovercard__mute[hidden] {
  display: none;
}

.lq-hovercard__mute[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 22px;
  height: 2px;
  margin-block-start: -1px;
  margin-inline-start: -11px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 0 1.5px var(--color-overlay-scrim);
  transform: rotate(45deg);
}

/* «المعاينة متاحة بعد لحظات», «لا تتوفر معاينة، اضغط للتشغيل», «اضغط للتشغيل»: the picture stays. */
.lq-hovercard__note {
  position: absolute;
  pointer-events: none;
  inset-block-end: 12px;
  inset-inline-start: 8px;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--color-overlay-scrim);
  color: var(--white);
}

/* Under the stage: the title (a link, as the card's is), the source, and the buttons. */
.lq-hovercard__info {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: var(--color-bg-surface);
}

.lq-hovercard__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font: 500 15px / 22px var(--font-ui);
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

a.lq-hovercard__title:hover {
  text-decoration: underline;
}

.lq-hovercard__source {
  margin: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-hovercard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 8px;
}

/* A narrow card (a tall video in a low window): words alone, and the buttons one under the other, whole. */
@container (max-width: 280px) {
  .lq-hovercard__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lq-hovercard__actions .lq-icon {
    display: none;
  }
}

/* Reduced motion: it shows at once, and what was a moving line is a still one. */
@media (prefers-reduced-motion: reduce) {
  .lq-hovercard--leaving,
  .lq-hovercard__still {
    transition: none;
  }

  .lq-hovercard__loading span {
    width: 100%;
    animation: none;
    opacity: 0.5;
  }
}

/*
 * A playing card's tools under the player: close, and the large view beside it. The title's link
 * covers the whole card, so the player and its tools are raised above it, as the picture is:
 * the frame's own controls and these buttons are what a press on them reaches.
 */
.lq-vcard__playtools {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lq-vcard--playing .lq-player {
  position: relative;
  z-index: 1;
}

/*
 * The large view (D22.5): the same official player in a dialog the size of the screen, so the
 * platform picks a higher quality for the room. 16:9 up to 1280 wide, 9:16 as tall as the screen.
 */
.lq-bigplayer {
  --lq-big-bar: 56px;
  --lq-big-room: 32px;
  max-width: 100vw;
  max-height: 100dvh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--ink-950);
  color: var(--white);
  box-shadow: var(--shadow-overlay);
}

.lq-bigplayer[open] {
  display: flex;
  flex-direction: column;
}

.lq-bigplayer::backdrop {
  background: var(--backdrop);
}

.lq-bigplayer__close {
  align-self: flex-end;
  margin: 8px;
}

.lq-bigplayer__stage {
  display: flex;
  justify-content: center;
}

.lq-bigplayer__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.lq-bigplayer__frame--16x9 {
  aspect-ratio: 16 / 9;
  width: min(
    1280px,
    calc(100vw - var(--lq-big-room)),
    calc((100dvh - var(--lq-big-room) - var(--lq-big-bar)) * 16 / 9)
  );
}

.lq-bigplayer__frame--9x16 {
  aspect-ratio: 9 / 16;
  width: min(
    calc(100vw - var(--lq-big-room)),
    calc((100dvh - var(--lq-big-room) - var(--lq-big-bar)) * 9 / 16)
  );
  margin-inline: auto;
}

.lq-bigplayer__frame--auto {
  width: min(560px, calc(100vw - var(--lq-big-room)));
  height: calc(100dvh - var(--lq-big-room) - var(--lq-big-bar));
  max-height: 720px;
}

/* «التشغيل: …» in the head: its words beside the two choices; they wrap on a narrow screen. */
.lq-playback {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.lq-playback__label {
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-playback .lq-seg__option {
  min-height: 32px;
  padding-inline: 12px;
}

/* A card playing takes the row; the player sits in the middle, no wider than a studio's. */
.lq-vcard--playing {
  grid-column: 1 / -1;
}

.lq-vcard--playing .lq-player {
  width: 100%;
  max-width: 896px;
  margin-inline: auto;
}

.lq-vcard--playing .lq-player--auto iframe {
  max-width: 560px;
  margin-inline: auto;
}

/* The one card the alerts page linked to (`?v=`): outlined in the moment's amber. */
.lq-vcard--linked .lq-thumb {
  box-shadow: 0 0 0 3px var(--color-accent-amber);
}

/* Moments under the library's search: the time, the words, the file; one link a line. */
.lq-momentlines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  list-style: none;
}

/* The link fills the line; what the caller puts beside it (the save button) keeps its size. */
.lq-momentline {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lq-momentline > a {
  flex: 1 1 auto;
  min-width: 0;
}

.lq-momentline a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: baseline;
  min-height: var(--target-min);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-decoration: none;
}

.lq-momentline a:hover {
  background: var(--color-bg-subtle);
}

.lq-momentline__at {
  color: var(--color-status-live);
}

.lq-momentline__text {
  font: 400 16px / 28px var(--font-ui);
}

.lq-momentline__of {
  grid-column: 2;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

/* «ملفاتي»: the uploads, each with its name, its state and what to do with it. */
.lq-uploads {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.lq-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.lq-upload__body {
  display: flex;
  flex: 1 1 240px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lq-upload__name {
  overflow-wrap: anywhere;
  font: 500 14px / 20px var(--font-ui);
}

.lq-upload__state {
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-upload__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* The administration section folded away: the summary is the panel's heading. */
.lq-details > summary {
  min-height: var(--target-min);
  cursor: pointer;
  list-style: none;
}

.lq-details > summary::-webkit-details-marker {
  display: none;
}

.lq-details > summary::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 10px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 120ms;
}

.lq-details[open] > summary::before {
  transform: rotate(-135deg) translateY(-2px);
}

.lq-details[open] > summary {
  margin-block-end: 16px;
}

/* An invitation's address, a link that reads left to right and wraps anywhere. */
.lq-invite {
  display: inline-block;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* The licence request's ready message: the whole of it, read in its own direction. */
.lq-ask__message {
  min-height: 12rem;
  resize: vertical;
}

/* The search's source line: the avatar, the name and its platform, the way to its videos. */
.lq-sourceline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-sourceline__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lq-sourceline__name {
  overflow: hidden;
  font: 500 14px / 20px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-sourceline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The sources page: the counts over the table, then the table itself. */
.lq-summary {
  padding: 0;
  list-style: none;
  --lq-gap: 16px;
}

.lq-source {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}

.lq-source__names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lq-source__name {
  overflow: hidden;
  font: 500 14px / 20px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-source__handle {
  overflow: hidden;
  color: var(--color-text-muted);
  font: 400 12px / 16px var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: end;
}

.lq-source__error {
  max-width: 260px;
  margin-block-start: 4px;
  white-space: normal;
}

.lq-source__priority {
  min-width: 96px;
  height: 36px;
  padding-block: 0;
}

.lq-source__tools {
  flex-wrap: nowrap;
}

.lq-sources-table td {
  white-space: nowrap;
}

.lq-sources-table .lq-switch {
  min-height: 0;
}

@media (max-width: 767px) {
  .lq-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .lq-filters .lq-search {
    width: 100%;
  }

  .lq-source {
    min-width: 160px;
  }

  .lq-source__error {
    max-width: 200px;
  }
}

/*
 * Plan 12 stage 8, package G: the explore page (Figma 24:2135). A card's actions behind «⋯» at
 * the end of its meta line, the platforms as quiet pills, and the grid under its own heading.
 */
.lq-vcard__more {
  position: relative;
  z-index: 1;
  flex: none;
  margin-inline-start: auto;
}

.lq-vcard__more[aria-expanded="true"] {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

/* The platforms (Figma 24:2044 «FilterPill»): 32px, the subtle ground, no stroke; pressed, the
   muted ground and the primary ink. */
.lq-filters .lq-chip {
  padding-inline: 10px;
  border-color: transparent;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font: 500 12px / 16px var(--font-ui);
}

.lq-filters .lq-chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .lq-filters .lq-chip {
    height: 32px;
  }
}

.lq-libhead {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Cards or rows (Figma 24:2171): two toggles on the subtle ground, the pressed one raised. */
.lq-viewtoggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.lq-viewtoggle .lq-iconbtn[aria-pressed="true"] {
  background: var(--color-bg-surface);
  box-shadow: 0 0 0 1px var(--color-border-default);
  color: var(--color-text-primary);
}

/* As rows, from the tablet up: the picture at the start, the words beside it (the kit's «Row»
   card); a phone keeps one card a row either way. */
@media (min-width: 768px) {
  .lq-cards.lq-cards--rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .lq-cards--rows .lq-vcard {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-auto-rows: min-content;
    gap: 8px 20px;
    align-content: start;
  }

  .lq-cards--rows .lq-vcard > .lq-vcard__media,
  .lq-cards--rows .lq-vcard > .lq-player,
  .lq-cards--rows .lq-vcard > .lq-thumb {
    grid-row: 1 / span 4;
    grid-column: 1;
  }

  .lq-cards--rows .lq-vcard__body > * {
    grid-column: 2;
  }

  .lq-cards--rows .lq-vcard--playing {
    display: flex;
  }
}

@media (max-width: 767px) {
  .lq-viewtoggle {
    display: none;
  }
}

/* The tabs' row, and at its far end when the cards were fetched (Figma 24:2212). */
.lq-feedtabs {
  position: relative;
}

.lq-feedtabs__updated {
  position: absolute;
  inset-block-start: 15px;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
  pointer-events: none;
}

.lq-feedtabs__updated .lq-icon {
  width: 14px;
  height: 14px;
}

@media (max-width: 1023px) {
  .lq-feedtabs__updated {
    display: none;
  }
}

.lq-libhead p {
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

/*
 * Plan 12 stage 8, package G: the search (Figma 23:20, 26:553, 52:234). The words in the top bar
 * (the page's own box on a phone), «نتائج» in the lighter ink, the moments' platforms, the
 * moments in nine columns beside the saved search, and «لا نتائج» drawn as an empty range.
 */
.lq-searchpage__lead {
  color: var(--color-text-secondary);
}

.lq-searchpage__head {
  margin-block-end: 0;
}

/* The moments' platforms, over the moments and their side (Figma 23:257). */
.lq-searchpage__filters {
  min-width: 0;
}

.lq-searchpage__cols {
  align-items: start;
}

.lq-searchpage__cols--alone > .lq-span-9 {
  grid-column: 1 / -1;
}

.lq-searchpage__cols--alone > .lq-span-3 {
  display: none;
}

.lq-searchpage__more {
  display: flex;
  justify-content: center;
}

.lq-searchpage .lq-moment__where {
  gap: 8px 12px;
}

.lq-searchpage .lq-moment__at {
  font-weight: 500;
}

/* The frame's mini track: a hairline in the strong border's ink under the ticks and the range
   (Figma 10:163), where the kit's is a softer bar. */
.lq-searchpage .lq-track__base {
  y: 4px;
  height: 2px;
  fill: var(--color-border-strong);
}

.lq-searchpage__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block-end: 24px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-searchpage__asidehead {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
  font: 600 18px / 28px var(--font-ui);
}

.lq-searchpage__asidehead .lq-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

.lq-searchpage__aside .lq-btn {
  width: 100%;
}

/* «مصادر ظهرت كثيراً» (Figma 23:630): a quieter head, each source's line with «تابع» at its end. */
.lq-searchpage__asidehead--sm {
  font: 500 14px / 22px var(--font-ui);
  color: var(--color-text-secondary);
}

.lq-searchpage__top .lq-btn {
  width: auto;
}

.lq-topsource {
  border-block-end: 0;
}

/* The frame's 32px face, and under the name one line: the platform's glyph, then the count. */
.lq-topsource .lq-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 12px;
}

.lq-topsource .lq-sourceline__meta {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px;
}

/* The glyph alone on the page; its name stays for screen readers. */
.lq-topsource .lq-sourceline__meta .lq-platform {
  gap: 0;
  padding: 0;
  margin-block-start: 1px;
  background: none;
  font-size: 0;
}

.lq-topsource__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.lq-topsource__link:hover {
  text-decoration: underline;
}

.lq-topsource__followed {
  flex: none;
}

.lq-searchpage__summary {
  display: none;
}

/* «لا نتائج»: the empty range, why, what to try, and the saved search under a hairline. */
.lq-noresults {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-block-start: 32px;
  text-align: center;
}

.lq-noresults__art {
  width: min(320px, 100%);
  height: auto;
}

.lq-noresults__bed {
  fill: var(--color-bg-subtle);
}

.lq-noresults__line {
  fill: var(--color-border-strong);
}

.lq-noresults__gap {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-dasharray: 3 3;
  stroke-width: 2;
}

.lq-noresults__tick {
  fill: var(--color-text-muted);
  opacity: 0.6;
}

.lq-noresults__mark {
  fill: none;
  stroke: var(--color-accent-amber);
  stroke-width: 4;
}

.lq-noresults__tc {
  fill: var(--color-text-muted);
  font: 500 12px var(--font-mono);
}

.lq-noresults__text {
  max-width: 600px;
  color: var(--color-text-secondary);
  font: 400 16px / 28px var(--font-ui);
}

.lq-noresults h2 + .lq-noresults__text {
  margin-block-start: -16px;
}

.lq-noresults__try {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lq-noresults__label {
  color: var(--color-text-muted);
  font: 500 12px / 16px var(--font-ui);
}

.lq-noresults__save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(100%, 480px);
  padding-block-start: 32px;
  border-block-start: 1px solid var(--color-border-default);
}

@media (max-width: 1279px) {
  .lq-searchpage__cols > .lq-span-9,
  .lq-searchpage__cols > .lq-span-3 {
    grid-column: 1 / -1;
  }
}

/* The words in the top bar from 768 up; the page's own box is a phone's (the bar has none). */
@media (min-width: 768px) {
  .lq-searchpage .lq-search-box {
    display: none;
  }
}

/* A phone (Figma 52:234): the box first, no heading to read over it, and the count of what was
   found with the saved search on one line. */
@media (max-width: 767px) {
  .lq-searchpage__head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lq-searchpage__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
  }

  /* The saved search is the summary's line here; the side would say it again at the end. */
  .lq-searchpage__cols > .lq-span-3 {
    display: none;
  }
}

/*
 * Plan 12 stage 8, package M: the filters of the explore page and the search on what the API
 * takes since plan 19a (R4; Figma 24:2135 and 23:20), and the upright videos' row (24:2747).
 */

/* A filter chosen from a list (Figma 24:2048): the native select lies unseen over the face that
   shows the choice, so a press anywhere opens it and the keyboard works as on any select. */
.lq-fselect {
  position: relative;
  display: inline-flex;
  flex: none;
  max-width: 100%;
}

.lq-fselect__control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  font: 400 16px / 24px var(--font-ui);
  cursor: pointer;
}

.lq-fselect__face {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 32px;
  padding-inline: 8px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font: 500 12px / 16px var(--font-ui);
  white-space: nowrap;
}

.lq-fselect__face .lq-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.lq-fselect__value {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lq-fselect--quiet .lq-fselect__face {
  background: var(--color-bg-subtle);
}

/* «رتّب حسب» (Figma 24:2167): the same box with the strong border. */
.lq-fselect--boxed .lq-fselect__face {
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-subtle);
}

/* The search's chips (Figma 23:296): the filter chip's pill, filled with ink once chosen. */
.lq-fselect--chip .lq-fselect__face {
  gap: 6px;
  height: 36px;
  padding-inline: 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  font: 500 14px / 20px var(--font-ui);
}

/* «الترتيب: الأكثر صلة» (Figma 23:251): words on nothing, the lead in the muted ink. */
.lq-fselect--plain .lq-fselect__face {
  gap: 6px;
  color: var(--color-text-primary);
  font: 500 14px / 20px var(--font-ui);
}

/* Chosen: the muted ground and the primary ink, as the quiet pills are when pressed. */
.lq-fselect--quiet.lq-fselect--set .lq-fselect__face {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.lq-fselect--chip.lq-fselect--set .lq-fselect__face {
  border-color: var(--color-bg-inverse);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

/* The select takes the focus; its face shows the ring. */
.lq-fselect__control:focus-visible + .lq-fselect__face {
  box-shadow: var(--focus-ring);
}

/* Pointed at, an unchosen face darkens its ink; a chip its border too. */
.lq-fselect:not(.lq-fselect--set) > .lq-fselect__control:hover + .lq-fselect__face {
  color: var(--color-text-primary);
}

.lq-fselect--chip:not(.lq-fselect--set) > .lq-fselect__control:hover + .lq-fselect__face {
  border-color: var(--color-border-strong);
}

.lq-fselect__lead {
  color: var(--color-text-muted);
}

/* The order's chevron in the secondary ink, as its words' lead (Figma 23:254). */
.lq-fselect--plain .lq-fselect__chevron {
  color: var(--color-text-secondary);
}

.lq-fselect-field {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.lq-fselect-field__label {
  color: var(--color-text-muted);
  font: 500 12px / 16px var(--font-ui);
  white-space: nowrap;
}

/* A filter on or off (Figma 24:2327): its icon, its words, the kit's switch at the end. */
.lq-fswitch {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
  font: 500 14px / 20px var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}

.lq-fswitch > .lq-icon,
.lq-fswitch__hint .lq-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.lq-fswitch > .lq-icon {
  color: var(--color-text-secondary);
}

.lq-fswitch__hint {
  display: inline-flex;
  color: var(--color-text-muted);
}

.lq-fswitch__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The explore page's second row (Figma 24:2276): the platforms, a hairline, the selects; the
   switches at the row's far end. */
.lq-filterbar {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  min-width: 0;
}

.lq-filterbar__group,
.lq-filterbar__selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lq-filterbar__switches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.lq-filterbar__divider {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--color-border-default);
}

/* The search's tools at the tabs' far end (Figma 23:226), on the tabs' own hairline. */
.lq-searchtools {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 49px;
  padding-inline-start: 16px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-searchpage__results {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  row-gap: 24px;
}

.lq-searchpage__results > .lq-tabs {
  grid-row: 1;
  grid-column: 1;
}

.lq-searchpage__results > .lq-searchtools {
  grid-row: 1;
  grid-column: 2;
}

.lq-searchpage__results > .lq-tabpanel {
  grid-column: 1 / -1;
}

/* A tab's platforms at the start, the period and the length at the end (Figma 23:257). */
.lq-searchpage__filterrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.lq-searchchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* What the search looked in, and «بكل اللهجات» beside it (Figma 23:217), 6px under the title. */
.lq-searchpage__meaning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-block-start: -10px;
}

.lq-searchpage__lede {
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

/* «مقاطع عمودية» (Figma 24:2747): the heading and its way to all of them, then the row. */
.lq-shorts {
  --lq-gap: 20px;
}

.lq-shorts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
}

.lq-shorts__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
}

.lq-short__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--color-text-primary);
  text-decoration: none;
}

.lq-short .lq-thumb {
  aspect-ratio: 200 / 356;
}

.lq-short__title {
  display: -webkit-box;
  overflow: hidden;
  font: 500 14px / 20px var(--font-ui);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lq-short__link:hover .lq-short__title {
  text-decoration: underline;
}

.lq-short__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 6px;
  font: 400 12px / 18px var(--font-ui);
}

.lq-short__source {
  color: var(--color-text-secondary);
}

.lq-short__time {
  color: var(--color-text-muted);
}

@media (max-width: 1279px) {
  .lq-shorts__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 1023px) {
  .lq-shorts__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A phone: the targets a thumb can take, the tools under the tabs, the lede left to screen
   readers as the heading is (D12.195), and the upright videos two a row. */
@media (max-width: 767px) {
  .lq-fselect__face,
  .lq-fswitch {
    min-height: var(--target-min);
  }

  .lq-searchpage__results {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .lq-searchpage__results > .lq-searchtools {
    grid-row: 2;
    grid-column: 1;
    flex-wrap: wrap;
    padding-inline-start: 0;
    border-block-end: 0;
  }

  .lq-searchpage__meaning {
    margin-block-start: 0;
  }

  /* The rows wrap on a phone; a hairline alone on a line would say nothing. */
  .lq-filterbar__divider {
    display: none;
  }

  .lq-searchpage__lede {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lq-shorts__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/*
 * Package M against the frames (D12.313): the search's heading in the H2 style (Figma 23:216, 28
 * on 42; the explore's is the H1), a moment's picture at the top of its row in 16:9 as the
 * component draws it (10:141), the explore's line of today on 14 by 24 (24:2164), and the
 * switches at the far end of their line when the filters wrap (24:2327).
 */
.lq-searchpage__head h1 {
  font: 700 28px / 42px var(--font-heading);
}

.lq-searchpage .lq-moment > .lq-thumb {
  align-self: flex-start;
}

.lq-page-head__text p:has(> .lq-today) {
  font: 400 14px / 24px var(--font-ui);
}

@media (min-width: 768px) {
  .lq-filterbar__switches {
    margin-inline-start: auto;
  }
}

/* A phone (Figma 52:269): the search's three tabs share the width, each word in its middle. */
@media (max-width: 767px) {
  .lq-searchpage__results > .lq-tabs {
    gap: 0;
  }

  .lq-searchpage__results > .lq-tabs .lq-tab {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* An element hidden by its attribute stays hidden whatever display its class gives it: this
   sheet comes after the kit's, and this rule after the sheet's own, so the attribute wins at
   the same specificity (it was at the top, and «مسح» over the cards showed with no words to
   clear: D12.197). */
[hidden] {
  display: none;
}