/* Mobile-first repair layer for the authorized mirror. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body,
.app-container,
.v2-header,
.v2-main,
.v2-footer {
  width: 100%;
  max-width: 100%;
}

img,
svg,
canvas {
  max-width: 100%;
}

button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
  .v2-header {
    padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  }

  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "search search";
    gap: 10px 12px;
    width: 100%;
    min-width: 0;
  }

  .header-brand-group {
    grid-area: brand;
    min-width: 0;
  }

  .brand-link {
    min-width: 0;
    gap: 8px;
  }

  .brand-avatar {
    width: 36px;
    height: 36px;
  }

  .brand-name {
    font-size: 17px;
  }

  .header-search-wrap {
    grid-area: search;
    order: initial;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .search-box input {
    height: 44px;
    font-size: 16px;
  }

  .search-box input::placeholder {
    font-size: 13px;
  }

  .header-actions {
    grid-area: actions;
    gap: 8px;
    min-width: 0;
  }

  .btn-lucky-pick,
  .theme-toggle-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
  }

  .btn-lucky-pick span,
  .btn-nav-pill {
    display: none;
  }

  .v2-main {
    padding: 14px 14px 36px;
  }

  .hero-section {
    padding: 22px 16px;
    margin-bottom: 22px;
    border-radius: 22px;
  }

  .hero-content-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    min-width: 0;
  }

  .hero-left-intro,
  .hero-right-spotlight,
  .spotlight-body,
  .spotlight-meta {
    min-width: 0;
  }

  .hero-title {
    font-size: clamp(26px, 8vw, 32px);
  }

  .hero-description {
    font-size: 13.5px;
  }

  .hero-unified-capsule {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 14px 8px;
    margin-top: 8px;
  }

  .capsule-divider {
    display: none;
  }

  .capsule-metric-item {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 0 2px;
    text-align: center;
  }

  .capsule-data {
    min-width: 0;
    width: 100%;
    align-items: center;
  }

  .capsule-number {
    font-size: 20px;
  }

  .capsule-label {
    max-width: 100%;
    font-size: 9.5px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-right-spotlight {
    padding: 18px 16px;
  }

  .spotlight-body {
    align-items: flex-start;
    gap: 12px;
  }

  .spotlight-avatar {
    width: 54px;
    height: 54px;
  }

  .spotlight-name-row {
    flex-wrap: wrap;
  }

  .spotlight-name {
    max-width: 100%;
  }

  .filter-header-row,
  .discovery-meta-row,
  .discovery-bar {
    min-width: 0;
    width: 100%;
  }

  .filter-header-row {
    align-items: stretch;
  }

  .filter-pills-row {
    width: 100%;
    max-width: 100%;
    padding: 6px 2px 10px;
    margin: -6px -2px 0;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }

  .f-pill {
    min-height: 40px;
    scroll-snap-align: start;
  }

  .view-mode-tabs {
    align-self: flex-start;
  }

  .view-tab-btn {
    width: 38px;
    height: 38px;
  }

  .discovery-meta-row {
    align-items: stretch;
  }

  .sort-selector-wrap {
    width: 100%;
  }

  .custom-select-box {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .select-trigger-btn {
    min-height: 42px;
  }

  .gallery-container,
  .blogger-wall,
  .masonry-column,
  .blogger-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .blogger-wall.grid-view,
  .blogger-wall.compact-view {
    gap: 14px;
  }

  .blogger-wall.grid-view .masonry-column,
  .blogger-wall.compact-view .masonry-column {
    gap: 14px;
  }

  .blogger-card:hover,
  .blogger-card:active {
    transform: none;
  }

  .card-header-banner,
  .blogger-wall.compact-view .card-header-banner {
    height: 96px;
  }

  .card-main-content,
  .blogger-wall.compact-view .card-main-content {
    padding-inline: 16px;
  }

  .card-name-row {
    min-width: 0;
    flex-wrap: wrap;
  }

  .card-user-name {
    max-width: 100%;
  }

  .card-bio-content,
  .polaroid-bio-card,
  .spotlight-bio-snippet {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .card-action-footer {
    padding: 10px 16px;
  }

  .btn-inspect-profile,
  .btn-visit-x {
    min-height: 40px;
    padding-inline: 12px;
  }

  .inspector-drawer {
    max-width: 100%;
    border-left: 0;
  }

  .drawer-header {
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  }

  .drawer-body {
    padding: 18px 14px max(20px, env(safe-area-inset-bottom));
  }

  .roulette-backdrop {
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  }

  .roulette-frameless-wrapper {
    max-height: 100%;
  }

  .v2-footer {
    padding: 18px 14px max(18px, env(safe-area-inset-bottom));
  }

  .footer-shortcuts {
    display: none;
  }
}

@media (max-width: 430px) {
  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .spotlight-bio-snippet {
    -webkit-line-clamp: 3;
  }

  .polaroid-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-cell {
    min-height: 48px;
  }

  .polaroid-actions-row,
  .roulette-outside-actions {
    flex-direction: column;
  }

  .btn-drawer-primary,
  .btn-drawer-secondary,
  .btn-roulette-visit,
  .btn-reshuffle {
    flex: none;
    width: 100%;
  }
}

@media (hover: none), (pointer: coarse) {
  .blogger-card:hover .card-header-banner,
  .blogger-card:hover .card-avatar-wrap,
  .spotlight-avatar-wrap:hover .spotlight-avatar {
    transform: none;
  }
}