/* Compact desktop column + "Desktop site on a phone" fixes. Loaded after style.css / pro.css. */

/* widths are defined once, in theme.css (--max-width). */

/* ---- wallet dialog: comfortable size on desktop widths ---- */
@media (min-width: 720px) {
  .pw-modal-card { max-width: 480px; padding: 24px 22px 20px; border-radius: 28px; }
  .pw-modal-card::before { height: 150px; }
  .pw-modal-x { top: 14px; right: 14px; width: 36px; height: 36px; }
  .pw-modal-h { margin-bottom: 14px; padding-right: 40px; }
  .pw-modal-t { font-size: 20px; }
}

/* ---- phone in "Desktop site" mode: html is zoomed (see js/fit.js), use the phone layouts ---- */
html.fit-phone .info-grid { grid-template-columns: repeat(2, 1fr); }
html.fit-phone .steps { grid-template-columns: 1fr; }
html.fit-phone .steps li { grid-template-columns: 44px 1fr; }
html.fit-phone .px-pools { grid-template-columns: 1fr; gap: 20px; }
html.fit-phone .px-hero { padding: 36px 0 28px; }
html.fit-phone .px-pool { padding: 22px 18px 20px; border-radius: 24px; }
html.fit-phone .px-alloc-card { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px; }
html.fit-phone .px-step { padding: 24px 22px; }
html.fit-phone .px-stats.px-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
html.fit-phone .has-wallet .px-brand span { display: none; }
html.fit-phone .px-wrap { padding: 0 16px; }
html.fit-phone body { min-height: calc(100vh / var(--fit-zoom, 1)); }
html.fit-phone .pw-modal-card { max-width: 408px; padding: 22px 18px 18px; max-height: calc(100dvh / var(--fit-zoom, 1) - 36px); }
html.fit-phone .pw-wmenu { position: fixed; top: 74px; right: 16px; left: 16px; width: auto; max-width: none; }
html.fit-phone .px-modal-card { max-width: 340px; max-height: calc(100vh / var(--fit-zoom, 1) - 36px); }

/* task row while the 10-second mock check runs (no text, just a soft pulse) */
.task.checking, .px-task.checking { border-color: rgba(232, 200, 119, .45); animation: task-check 1.4s ease-in-out infinite; }
@keyframes task-check { 50% { box-shadow: 0 0 0 4px rgba(232, 200, 119, .10); } }
@media (prefers-reduced-motion: reduce) { .task.checking, .px-task.checking { animation: none; } }

/* ---- "Desktop site" phone mode: no sideways overflow, no jumping layout ---- */
html.fit-phone, html.fit-phone body { overflow-x: hidden; max-width: 100%; }
@supports (overflow: clip) { html.fit-phone body { overflow-x: clip; } }
/* vw units refer to the ~980px layout viewport, but the page is shown at ~520px: size by hand */
html.fit-phone { --h1-size: 40px; }
html.fit-phone .hero h1 .h1-l1, html.fit-phone .hero h1 .h1-l2 { white-space: normal; overflow-wrap: anywhere; }
html.fit-phone .hero h1 { max-width: 100%; }
html.fit-phone img, html.fit-phone video, html.fit-phone svg { max-width: 100%; }