/* ============================================
   Mobile Viewer — Device Compare Tool
   Reuses the same design tokens as styles.css
   (falls back to sensible defaults if that file
   isn't loaded on this page for some reason).
   ============================================ */

.mv-page {
  --mv-bg: var(--bg, #FAF8F4);
  --mv-bg-alt: var(--bg-alt, #F1EDE3);
  --mv-card: var(--card, #FFFFFF);
  --mv-ink: var(--ink, #20242C);
  --mv-ink-soft: var(--ink-soft, #5B6472);
  --mv-ink-faint: var(--ink-faint, #8A8F98);
  --mv-accent: var(--accent, #4A5FE8);
  --mv-accent-dark: var(--accent-dark, #3648C4);
  --mv-line: var(--line, #E6E0D2);
  --mv-line-strong: var(--line-strong, #D8D0BC);
  background: var(--mv-bg);
}

.mv-hero {
  padding: 56px 0 36px;
  text-align: center;
}

.mv-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 4vw, 40px);
  margin: 14px 0 12px;
  color: var(--mv-ink);
}

.mv-hero-lead {
  color: var(--mv-ink-soft);
  font-size: 16.5px;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------------- Layout ---------------- */

.mv-layout {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 28px 90px;
}

/* ---------------- Device picker (now inline, not a sidebar) ---------------- */

.mv-device-panel {
  background: var(--mv-card);
  border: 1px solid var(--mv-line);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 26px;
}

.mv-sidebar-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  color: var(--mv-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.mv-sidebar-tip {
  font-size: 13px;
  color: var(--mv-ink-soft);
  background: var(--mv-bg-alt);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.55;
  margin: 0 0 18px;
}

.mv-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.mv-tab {
  flex: 0 1 auto;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--mv-line-strong);
  background: transparent;
  color: var(--mv-ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mv-tab.active {
  background: var(--mv-ink);
  border-color: var(--mv-ink);
  color: #fff;
}

.mv-search-row {
  position: relative;
  margin-bottom: 16px;
  max-width: 320px;
}

.mv-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--mv-ink-faint);
}

.mv-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 32px;
  border-radius: 999px;
  border: 1px solid var(--mv-line-strong);
  background: var(--mv-bg-alt);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--mv-ink);
}

.mv-search:focus-visible {
  outline: 2px solid var(--mv-accent);
  outline-offset: 1px;
}

.mv-device-list {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.mv-brand-group {
  margin-bottom: 14px;
}

.mv-brand-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-ink-faint);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mv-brand-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mv-accent);
  display: inline-block;
}

.mv-brand-devices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}

.mv-device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--mv-ink);
  transition: background 0.15s ease;
}

.mv-device-row:hover { background: var(--mv-bg-alt); }

.mv-device-row.selected {
  background: var(--mv-accent);
  color: #fff;
}

.mv-device-row.selected .mv-device-res {
  color: rgba(255,255,255,0.75);
}

.mv-device-row input[type="checkbox"] {
  margin: 0;
  accent-color: var(--mv-accent);
  flex-shrink: 0;
}

.mv-device-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-device-res {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--mv-ink-faint);
  flex-shrink: 0;
}

/* ---------------- Main panel ---------------- */

.mv-main { min-width: 0; }

.mv-form {
  background: var(--mv-card);
  border: 1px solid var(--mv-line);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 26px;
}

.mv-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mv-bg-alt);
  border: 1px solid var(--mv-line-strong);
  border-radius: 999px;
  padding: 6px 8px 6px 16px;
}

.mv-form-icon { color: var(--mv-ink-faint); font-size: 14px; flex-shrink: 0; }

.mv-form-row input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--mv-ink);
  min-width: 0;
}

.mv-form-row input::placeholder { color: var(--mv-ink-faint); }

.mv-form-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 11px 20px;
}

/* Mobile-only single device dropdown; hidden on desktop, shown via media query below */
.mv-single-select-row {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  min-width: 0;
}

.mv-single-select-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mv-ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
}

/* This select had no width/box-sizing rule at all before, so on small
   screens it rendered at its intrinsic content width (driven by the
   longest option text) instead of respecting the row's available space,
   which is what was causing the slight horizontal scroll on mobile. */
.device-select {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--mv-line-strong);
  background: var(--mv-bg-alt);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--mv-ink);
}

.device-select:focus-visible {
  outline: 2px solid var(--mv-accent);
  outline-offset: 1px;
}

/* ---------------- Results / compare cards ---------------- */

.mv-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 24px;
  padding: 6px 4px 14px;
  min-height: 200px;
  scroll-margin-top: 96px;
}

.mv-empty-hint {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--mv-ink-faint);
}

.mv-empty-icon { font-size: 30px; display: block; margin-bottom: 10px; }

.mv-card {
  background: var(--mv-card);
  border: 1px solid var(--mv-line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 20px 45px -25px rgba(32,36,44,0.2);
  min-width: 0;
}

.mv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.mv-card-title {
  min-width: 0;
}

.mv-card-name {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--mv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mv-card-res {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--mv-ink-faint);
}

.mv-card-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--mv-line-strong);
  background: none;
  color: var(--mv-ink-soft);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.mv-card-close:hover { border-color: var(--mv-ink-faint); color: var(--mv-ink); }

.mv-card-frame-wrap {
  position: relative;
  background: #14161a;
  border-radius: 20px;
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}

.mv-card-frame-inner {
  transform-origin: top left;
  position: relative;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.mv-card-frame-inner iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #fff;
}

.mv-card-loading {
  position: absolute;
  inset: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--mv-ink-faint);
}

/* ---------------- Note ---------------- */

.mv-note {
  font-size: 13px;
  color: var(--mv-ink-faint);
  max-width: 640px;
}

/* ---------------- Responsive: mobile can only preview ONE device ---------------- */

@media (max-width: 860px) {
  .mv-layout {
    padding: 0 20px 70px;
  }

  .mv-device-panel {
    display: none; /* no multi-device compare on mobile */
  }

  .mv-single-select-row {
    display: flex; /* single-device dropdown takes over instead */
  }

  .mv-form-row {
    flex-wrap: wrap;
  }

  .mv-form-row .btn {
    width: 100%;
  }

  .mv-results {
    grid-template-columns: 1fr;
  }

  .mv-card {
    width: 100%;
  }
}