/* Telling people what happened, what is happening, and what is left. */
.lq-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--color-rights-embedded-bg);
}

.lq-banner > .lq-icon {
  margin-block-start: 2px;
  color: var(--color-rights-embedded);
}

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

.lq-banner__title {
  color: var(--color-text-primary);
  font: 500 16px / 24px var(--font-ui);
}

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

.lq-banner__action {
  flex: none;
}

.lq-banner--warning {
  background: var(--color-rights-pending-bg);
}

.lq-banner--warning > .lq-icon {
  color: var(--color-rights-pending);
}

.lq-banner--success {
  background: var(--color-status-success-bg);
}

.lq-banner--success > .lq-icon {
  color: var(--color-status-success);
}

.lq-banner--danger {
  background: var(--color-status-danger-bg);
}

.lq-banner--danger > .lq-icon {
  color: var(--color-status-danger);
}

@media (max-width: 767px) {
  .lq-banner {
    flex-wrap: wrap;
  }

  .lq-banner__body {
    flex-basis: 220px;
  }

  .lq-banner__action {
    margin-inline-start: 32px;
  }
}

/* A neutral tag beside a title: «نسخة تجريبية». Amber stays for moments alone. */
.lq-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font: 500 12px / 16px var(--font-ui);
  white-space: nowrap;
}

/* A line of small print with its icon: "we record this pledge…", "not counted against…". */
.lq-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

.lq-note .lq-icon {
  width: 18px;
  height: 18px;
  margin-block-start: 3px;
}

/* Dialogs: native <dialog>, a bottom sheet on phones. */
.lq-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-overlay);
}

/* A dialog with little in it (the pull's progress, Figma 50:1364): 480 wide; a sheet on phones.
   Its note stays beside its button, as drawn, taking two lines rather than a row of its own. */
@media (min-width: 768px) {
  .lq-dialog--narrow {
    width: min(480px, calc(100vw - 32px));
  }

  .lq-dialog--narrow .lq-dialog__foot {
    flex-wrap: nowrap;
  }

  .lq-dialog--narrow .lq-dialog__foot > .lq-note > span {
    text-wrap: balance;
  }
}

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

.lq-dialog[open] {
  animation: lq-rise var(--duration-open) var(--ease-out);
}

.lq-dialog__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
}

/* The slot a page module says a refusal in, under the head: no room, and no gap, while empty. */
.lq-dialog__inner > [data-lq-slot="banner"]:empty {
  display: none;
}

.lq-dialog__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

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

.lq-dialog__title {
  font: 700 22px / 34px var(--font-heading);
}

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

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

.lq-dialog__foot--end {
  justify-content: flex-end;
}

.lq-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-inline-start: auto;
}

.lq-dialog__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
}

@keyframes lq-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (max-width: 767px) {
  .lq-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 90vh;
    margin: auto 0 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .lq-dialog__inner {
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  }

  .lq-dialog__actions {
    width: 100%;
  }

  .lq-dialog__actions .lq-btn {
    flex: 1;
  }
}

/* The video an action applies to: thumbnail with its duration, title, publisher, platform, rights. */
.lq-vrow {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.lq-vrow > .lq-thumb {
  flex: none;
  width: 112px;
}

.lq-vrow .lq-thumb__slot--bottom {
  inset-block-end: 6px;
  inset-inline-end: 6px;
}

/* A duration the platform did not give is not drawn. */
.lq-vrow .lq-thumb__slot[hidden] {
  display: none;
}

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

.lq-vrow__title {
  overflow: hidden;
  font: 500 16px / 24px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-vrow__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-rights-change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-rights-change__badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lq-rights-change__badges > .lq-icon {
  width: 16px;
  height: 16px;
}

/* Progress of long work (a pull, an export): real progress, filling from the start. */
.lq-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lq-progress__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

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

.lq-progress__value {
  font: 600 16px / 24px var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.lq-progress progress,
.lq-meter {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: var(--color-bg-muted);
  appearance: none;
}

.lq-progress progress::-webkit-progress-bar {
  background: var(--color-bg-muted);
}

.lq-progress progress::-webkit-progress-value {
  border-radius: 3px;
  background: var(--color-action-primary);
}

.lq-progress progress::-moz-progress-bar {
  border-radius: 3px;
  background: var(--color-action-primary);
}

/* The pull's (Figma 50:1391): the figure as a heading, the time left at body size, a bar of 8. */
.lq-progress--lg {
  gap: 10px;
}

.lq-progress--lg .lq-progress__label {
  font: 400 14px / 24px var(--font-ui);
}

.lq-progress--lg .lq-progress__value {
  color: var(--color-text-primary);
  font: 700 22px / 34px var(--font-heading);
}

.lq-progress--lg progress {
  height: 8px;
  border-radius: 4px;
}

.lq-progress--lg progress::-webkit-progress-value {
  border-radius: 4px;
}

/* Usage: a <meter>, filling from the start (the right), in the control colour. */
.lq-meter::-webkit-meter-bar {
  height: 6px;
  border: 0;
  border-radius: 3px;
  background: var(--color-bg-muted);
}

.lq-meter::-webkit-meter-optimum-value,
.lq-meter::-webkit-meter-suboptimum-value,
.lq-meter::-webkit-meter-even-less-good-value {
  border-radius: 3px;
  background: var(--color-control-on);
}

.lq-meter::-moz-meter-bar {
  border-radius: 3px;
  background: var(--color-control-on);
}

/* Steps of a long job: done, current, to come. */
.lq-steps {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lq-step {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-step__mark {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
}

.lq-step--done {
  color: var(--color-text-primary);
}

.lq-step--done .lq-step__mark {
  border-color: var(--color-status-success);
  background: var(--color-status-success);
}

.lq-step--done .lq-step__mark::before {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 4.5px;
  width: 4px;
  height: 8px;
  border: solid var(--color-bg-surface);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.lq-step[aria-current="step"] {
  color: var(--color-text-primary);
}

.lq-step[aria-current="step"] .lq-step__mark {
  border-color: var(--color-text-primary);
}

.lq-step[aria-current="step"] .lq-step__mark::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-text-primary);
}

.lq-steps__line {
  flex: 1;
  min-width: 16px;
  height: 1.5px;
  background: var(--color-border-strong);
}

.lq-steps__line--done {
  background: var(--color-status-success);
}

.lq-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 400 14px / 24px var(--font-ui);
}

.lq-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.lq-checklist .lq-icon {
  width: 18px;
  height: 18px;
  margin-block-start: 3px;
  color: var(--color-status-success);
}

/* Quota: what is left this month. Few units show as pills; many as a bar. */
.lq-quota {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lq-quota__text {
  font: 500 14px / 20px var(--font-ui);
}

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

.lq-quota__pills {
  display: flex;
  gap: 4px;
}

.lq-quota__pill {
  width: 28px;
  height: 6px;
  border-radius: 3px;
  background: var(--color-action-primary);
}

.lq-quota__pill--used {
  background: var(--color-border-strong);
}

.lq-quota--empty .lq-quota__text {
  color: var(--color-status-danger);
}

/* The side nav's monthly usage. */
.lq-usage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.lq-usage__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--color-text-secondary);
  font: 500 12px / 16px var(--font-ui);
}

.lq-usage__row strong {
  color: var(--color-text-primary);
  font-weight: 500;
}

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

/* Status of a source or a job: a dot and a word. */
.lq-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font: 500 12px / 16px var(--font-ui);
  white-space: nowrap;
}

.lq-status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.lq-status--healthy::before {
  background: var(--color-status-success);
}

.lq-status--checking::before {
  background: var(--color-accent-amber);
  animation: lq-pulse 1.4s ease-in-out infinite;
}

/* Being checked right now (R8's `checking`): the focus ring's blue, as the design draws it. */
.lq-status--now::before {
  background: var(--color-border-focus);
  animation: lq-pulse 1.4s ease-in-out infinite;
}

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

.lq-status--failed::before {
  background: var(--color-status-danger);
}

.lq-status--paused::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-text-muted);
}

@keyframes lq-pulse {
  50% {
    opacity: 0.35;
  }
}

/* Toasts: short news that goes away; screen readers hear it from a live region. */
.lq-toasts {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}

.lq-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  padding-inline-start: 16px;
  border-radius: var(--radius-md);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font: 500 14px / 24px var(--font-ui);
  box-shadow: var(--shadow-raised);
  pointer-events: auto;
  animation: lq-rise var(--duration-open) var(--ease-out);
}

.lq-toast__text {
  flex: 1;
  padding-block: 4px;
}

.lq-toast .lq-iconbtn {
  color: inherit;
}

.lq-toast .lq-iconbtn:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.lq-toast--danger {
  background: var(--red-600);
  color: var(--white);
}

@media (max-width: 767px) {
  .lq-toasts {
    inset-inline: 16px;
    inset-block-end: calc(var(--tabbar-height) + 16px + env(safe-area-inset-bottom));
    width: auto;
  }
}

/* Empty: say why, and offer the first step. */
.lq-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}

.lq-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-block-end: 4px;
  border-radius: 50%;
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.lq-empty__icon .lq-icon {
  width: 24px;
  height: 24px;
}

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

.lq-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-block-start: 8px;
}

/* Loading: placeholders in the shape of what comes, not spinners. */
.lq-skel {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--color-bg-surface) 60%, transparent) 50%,
      transparent 100%
    )
    var(--color-bg-muted);
  background-size: 200% 100%;
  animation: lq-shimmer 1.4s linear infinite;
}

.lq-skel--thumb {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
}

.lq-skel--title {
  height: 16px;
  width: 85%;
}

.lq-skel--short {
  width: 45%;
}

@keyframes lq-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}