/* Malavia Stage 8.5 — final product UX QA */

button,
input,
select,
textarea {
  min-width: 0;
  max-width: 100%;
}

button,
.button,
.head-action,
.mobile-bottom a,
.mlv-action-button,
.mlv-rating-button,
.mlv-search-submit {
  touch-action: manipulation;
}

form[aria-busy="true"] { cursor: progress; }
button.is-pending,
input.is-pending {
  opacity: .68;
  cursor: progress;
}

.brand { min-height: 2.75rem; }
.head-action { width: 2.75rem; height: 2.75rem; }
.avatar-link { position: relative; }
.avatar-link::after {
  content: "";
  position: absolute;
  inset: -.35rem;
  border-radius: 50%;
}

.desktop-nav .nav-link { min-height: 2.75rem; }
.mlv-search-submit { min-height: 2.75rem; }
.mlv-subnav a { min-height: 2.75rem; }
.mlv-entity-role-tabs .mlv-pill,
.mlv-entity-pill { min-height: 2.75rem; padding-block: .4rem; }

.mlv-ranked-actions { flex-wrap: wrap; justify-content: flex-end; }
.mlv-ranked-actions button {
  width: 2.75rem;
  height: 2.75rem;
}

.mlv-danger-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding-block: .45rem;
}

.mlv-code-input {
  direction: ltr;
  text-align: center;
  letter-spacing: .45em;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.mlv-state-page {
  width: min(100%, 38rem);
  min-height: min(35rem, calc(100dvh - var(--header-height) - var(--mobile-nav-height) - 2rem));
  margin-inline: auto;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: clamp(2rem, 9vw, 5rem) 0;
}

.mlv-state-mark {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  margin-bottom: .85rem;
  border: 1px solid var(--color-primary-line);
  border-radius: 1rem;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: 1.5rem;
  font-weight: 950;
}

.mlv-state-page h1 {
  margin: .25rem 0 .55rem;
  font-size: clamp(2rem, 9vw, 3.5rem);
}
.mlv-state-page > p {
  max-width: 34rem;
  color: var(--color-text-muted);
}
.mlv-state-actions { margin-top: 1rem; }
.mlv-support-code {
  width: 100%;
  margin-top: 1.4rem;
  padding-top: .9rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.mlv-support-code summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; }
.mlv-support-code .trace-code { margin-top: .5rem; }

.mlv-poster-title,
.mlv-work-title,
.mlv-profile-copy h1,
.mlv-profile-copy p,
.mlv-list-detail-copy h1,
.mlv-list-detail-copy p,
.mlv-list-card h2,
.mlv-list-card p,
.mlv-request-item,
.mlv-my-review,
.mlv-fact-value,
.mlv-entity-copy,
.mlv-entity-context,
.mlv-review-card,
.mlv-timeline-card,
.notice,
.field-error,
.validation-summary {
  overflow-wrap: anywhere;
  word-break: normal;
}

.ltr-value,
.mlv-work-en,
.mlv-poster-en,
.mlv-profile-handle,
.mlv-ranked-copy small,
.mlv-entity-en {
  unicode-bidi: plaintext;
}

textarea { resize: vertical; }

@media (max-width: 24rem) {
  .container { width: calc(100% - 1rem); }
  .page-shell { padding-inline: 0; }
  .mlv-page-head { align-items: stretch; }
  .mlv-page-head > .button { width: 100%; }
  .mlv-inline-form { flex-direction: column; }
  .mlv-inline-form .button { width: 100%; }
  .mlv-review-form-footer { align-items: stretch; flex-direction: column; }
  .mlv-review-form-footer .button { width: 100%; }
  .mlv-list-detail-head { grid-template-columns: 5.8rem minmax(0, 1fr); }
  .mlv-list-cover { width: 5.8rem; }
  .mlv-ranked-row { grid-template-columns: 1.3rem 2.8rem minmax(0, 1fr); }
  .mlv-ranked-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .mlv-timeline-row { grid-template-columns: 4rem .8rem minmax(0, 1fr); gap: .4rem; }
  .mlv-work-hero { grid-template-columns: 5.4rem minmax(0, 1fr); }
  .mlv-work-poster { width: 5.4rem; }
}

@media (min-width: 48rem) {
  .mlv-state-page {
    min-height: min(38rem, calc(100vh - var(--header-height) - 6rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .mlv-state-dot,
  .mlv-rating-badge,
  .mlv-pill,
  .button,
  .head-action,
  .mobile-bottom a.active {
    forced-color-adjust: auto;
  }
}