/*
 * Portgainy phone layout. Loaded last. Compact, app-like and balanced: 13px base text, tight
 * 8px rhythm, ~34px controls, and an auth screen that always fits one viewport without scrolling.
 */

@media (max-width: 639px) {
  :root { --tab-h: 54px; --top-h: 46px; }
  body { font-size: 13px; }
  .content { padding: 4px 10px 14px; }
  .page { gap: 8px; }

  /* ----- top bar & tab bar */
  .topbar { gap: 8px; padding: var(--safe-t) 10px 0; }
  .hexbadge.is-sm { width: 30px; height: 34px; }
  .hexbadge.is-sm b { font-size: 15px; }
  .search-pill { height: 34px; padding: 0 10px; font-size: 12.5px; gap: 8px; }
  .search-pill .ic { width: 15px; height: 15px; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn .ic { width: 17px; height: 17px; }
  .icon-btn .dot { top: 6px; right: 7px; width: 6px; height: 6px; }
  .tab-item { font-size: 10px; gap: 2px; }
  .tab-item .ic { width: 20px; height: 20px; }
  .tab-item.is-active::before { left: 32%; right: 32%; height: 2px; }
  .tab-item.is-hero .nav-ic { width: 38px; height: 42px; margin-top: -13px; }
  .tab-item.is-hero .nav-ic .ic { width: 20px; height: 20px; }

  /* ----- surfaces & headings */
  .card { --cut: 9px; padding: 10px; }
  .sec-head { margin-bottom: 6px; }
  .sec-head h2 { font-size: 16px; }
  .tag { padding: 2px 7px; font-size: 9.5px; }
  .page-head { padding: 2px 0 0; }
  .page-head h1 { font-size: 24px; }
  .page-head p { margin-top: 1px; font-size: 11.5px; }
  .btn { --cut: 7px; min-height: 40px; padding: 0 14px; font-size: 11.5px; }
  .btn-sm { min-height: 32px; padding: 0 11px; font-size: 10.5px; }
  .btn-lg { min-height: 46px; font-size: 12.5px; }
  .btn-chip { min-height: 26px; padding: 0 11px; font-size: 10px; }
  .btn-row { gap: 6px; margin-top: 8px; }
  .tabs { margin-bottom: 6px; }
  .tabs > button:not(.more-link) { padding: 6px 9px 8px; font-size: 12px; }
  .tabs > button:not(.more-link).is-on::after { left: 9px; right: 9px; height: 2px; }
  .chips { margin-bottom: 6px; }
  .chips button { padding: 5px 10px; font-size: 10.5px; }
  .search-field { height: 38px; margin-bottom: 6px; }
  .search-field input { font-size: 13px; }
  .control { height: 42px; }
  .control input, .control select { font-size: 14px; }
  .field { gap: 4px; }
  .field > span { font-size: 9.5px; }
  .form { gap: 9px; }
  .empty { padding: 18px 10px; }
  .empty-ic { width: 38px; height: 43px; }
  .fine { margin-top: 8px; font-size: 11px; }
  .note { padding: 8px 10px; margin: 6px 0; font-size: 11.5px; }

  /* ----- home hero */
  .hero-card { --cut: 12px; padding: 12px 12px 10px; }
  .hero-label { font-size: 10px; }
  .hero-num { margin-top: 2px; gap: 6px; }
  .hero-num strong { font-size: 34px; }
  .hero-num span { font-size: 12px; }
  .hero-sub { margin-top: 2px; font-size: 11.5px; }
  .pnl { font-size: 11.5px; }
  .earn-meter { margin-top: 8px; padding: 7px 9px; font-size: 11px; gap: 5px; }
  .earn-meter .bar { height: 5px; }
  .earn-meter:not(.is-active) > span { display: block; }
  .earn-meter:not(.is-active) .ic { display: inline-block; vertical-align: -2px; margin-right: 5px; }
  .quick { gap: 6px; margin-top: 10px; }
  .quick button { gap: 5px; font-size: 10.5px; }
  .quick-ic { height: 38px; max-width: 64px; }
  .quick-ic .ic { width: 18px; height: 18px; }
  .hero-card.is-compact .hero-num strong { font-size: 30px; }

  .claim-strip { --cut: 9px; gap: 10px; padding: 8px 10px; }
  .claim-gem { width: 32px; height: 36px; }
  .claim-gem .ic { width: 16px; height: 16px; }
  .claim-copy small { font-size: 9.5px; }
  .claim-copy strong { font-size: 13px; line-height: 1.25; }

  .alloc-bar { height: 7px; }
  .alloc-legend { gap: 4px 12px; margin-top: 8px; }
  .alloc-legend li { font-size: 11.5px; }
  .alloc-legend b { font-size: 11.5px; }

  /* ----- market rows */
  .mrow { gap: 9px; padding: 7px 0; }
  .mrow .coin-mark, .pos-row .coin-mark, .bal .coin-mark, .pair-btn .coin-mark { --s: 32px !important; }
  .mrow-name b { font-size: 13.5px; }
  .mrow-name small, .mrow-price small { font-size: 10.5px; }
  .mrow-price b { font-size: 13.5px; }
  .chg { min-width: 62px; height: 26px; font-size: 12px; }
  .mhead { padding: 8px 10px 6px; font-size: 9.5px; }
  .card.flush .mlist { padding: 0 10px 4px; }
  .movers { gap: 6px; }
  .mover { --cut: 8px; padding: 9px; gap: 2px; }
  .mover strong { font-size: 20px; }
  .mover-top b { font-size: 12.5px; }
  .mover-top .coin-mark { --s: 20px !important; }
  .mood-top b { font-size: 15px; }
  .mood-bar { height: 6px; margin: 8px 0 6px; }

  /* ----- activity */
  .act { gap: 9px; padding: 8px 0; }
  .act-ic { width: 30px; height: 34px; }
  .act-ic .ic { width: 14px; height: 14px; }
  .act-copy b { font-size: 12.5px; }
  .act-copy small { font-size: 10.5px; }
  .act-amt { font-size: 13px; }

  /* ----- trade: chart + order ticket fit together */
  .pair-head { padding: 2px 0 0; }
  .pair-btn b { font-size: 22px; }
  .pair-btn b small { font-size: 13px; }
  .pair-btn em { font-size: 10.5px; }
  .pair-actions { gap: 4px; }
  .trade-grid { gap: 8px; }
  .px-big { font-size: 30px; }
  .px-sub { margin-top: 2px; font-size: 11px; }
  .stat-row { margin: 8px 0 6px; gap: 6px; }
  .stat-row span { font-size: 9px; }
  .stat-row b { font-size: 12px; }
  .ranges button { min-height: 26px; font-size: 11px; }
  .chart-wrap { height: 150px; }
  .range-bar { display: none; }
  .order-card { gap: 8px; }
  .seg button { min-height: 34px; font-size: 11.5px; }
  .avail { font-size: 10px; }
  .avail b { font-size: 12px; }
  .pcts button { min-height: 28px; font-size: 11px; }
  .est { font-size: 11.5px; }
  .est b { font-size: 13px; }
  .order-card .fine { display: none; }
  .pos-row button { padding: 8px 0; }
  .pos-name b, .pos-val b { font-size: 13px; }
  .quote-hero strong { font-size: 32px; }
  .facts > div { padding: 7px 0; }
  .facts dt { font-size: 11.5px; }
  .facts dd { font-size: 12px; }

  /* ----- assets */
  .acct > strong { font-size: 24px; }
  .bal { gap: 8px; padding: 9px 0; }
  .bal-name b, .bal-val b { font-size: 14px; }
  .bal-name small, .bal-val small { font-size: 10.5px; }

  /* ----- earn */
  .earn-hero { --cut: 12px; grid-template-columns: 84px 1fr; align-items: center; gap: 10px 12px; padding: 12px; }
  .gauge-wrap { width: 84px; height: 84px; }
  .gauge-in b { font-size: 26px; }
  .gauge-in b small { font-size: 13px; }
  .gauge-in em { font-size: 8px; letter-spacing: 0.1em; }
  .earn-hero-copy { text-align: left; gap: 3px; }
  .earn-hero-copy .eyebrow { font-size: 9px; }
  .earn-hero-copy h2 { font-size: 17px; }
  .earn-hero-copy p { display: none; }
  .earn-hero > .claim-box, .earn-hero > .earn-gate { grid-column: 1 / -1; }
  .claim-box { gap: 6px 10px; padding: 9px 10px; }
  .claim-box small { font-size: 9.5px; }
  .claim-box strong { font-size: 21px; }
  .earn-gate { padding: 9px 10px; gap: 6px; }
  .earn-gate-top { font-size: 11.5px; }
  .earn-gate p { font-size: 11px; }
  .tiles { gap: 6px; }
  .tile { --cut: 8px; padding: 10px; gap: 2px; }
  .tile small { font-size: 9.5px; }
  .tile strong { font-size: 21px; }
  .tile-ic { width: 28px; height: 32px; margin-bottom: 2px; }
  .tile .btn-row { margin-top: 6px; }
  .tile .btn { padding: 0 6px; font-size: 10px; min-height: 30px; }
  .tile .big { font-size: 34px; }
  .calc-out span { padding: 8px 4px; }
  .calc-out b { font-size: 11.5px; }
  .rules article { padding: 9px 10px; gap: 10px; }
  .rules b { font-size: 12.5px; }
  .rules p { font-size: 11.5px; }

  /* ----- referrals / profile / support / about */
  .invite { --cut: 12px; padding: 12px; gap: 8px; }
  .invite-code code { font-size: 28px; }
  .invite-link { padding: 8px 10px; font-size: 11px; }
  .profile-hero { --cut: 12px; padding: 16px 12px 12px; gap: 6px; }
  .profile-hero h1 { font-size: 24px; }
  .hexbadge.is-xl { width: 64px; height: 72px; }
  .hexbadge.is-xl b { font-size: 32px; }
  .setting b { font-size: 12.5px; }
  .links button { padding: 11px 0; font-size: 13px; }
  .chat-log { max-height: 230px; min-height: 110px; }
  .msg { padding: 7px 10px; font-size: 12.5px; }
  .chat-form input { height: 40px; }
  .faq-item summary { padding: 11px 12px; font-size: 12.5px; }
  .faq-item p { padding: 0 12px 11px; font-size: 12px; }
  .about-hero { --cut: 14px; padding: 18px 12px; gap: 8px; }
  .about-hero h1 { font-size: 28px; }
  .about-hero p { font-size: 12.5px; }
  .wordmark.is-lg { font-size: 34px; }
  .facts-strip div { padding: 10px 6px; }
  .facts-strip b { font-size: 26px; }
  .about-sec h2 { font-size: 22px; }
  .about-sec p { font-size: 12.5px; }
  .pillars article { --cut: 8px; padding: 11px; gap: 4px; }
  .pillars h3 { font-size: 17px; }
  .pillars p { font-size: 12px; }
  .metric-grid { gap: 6px; }
  .metric { padding: 9px; }
  .metric strong { font-size: 17px; }
  .admin-card { padding: 10px; gap: 6px; }

  /* ----- sheets */
  .sheet { padding: 6px 14px calc(14px + var(--safe-b)); max-height: 90dvh; }
  .sheet-grip { margin: 0 auto 8px; }
  .sheet-head { margin-bottom: 10px; }
  .sheet-head h2 { font-size: 22px; }
  .sheet-head p { font-size: 11.5px; }
  .sheet-x { width: 30px; height: 34px; }
  .sheet-actions { margin-top: 10px; }
  .summary { padding: 9px 10px; font-size: 12px; gap: 4px 8px; }
  .route { padding: 9px; font-size: 12px; }
  .steps { font-size: 12px; gap: 6px; }
  .toasts { top: calc(6px + var(--safe-t)); }
  .toast { padding: 8px 12px 8px 10px; }
  .toast-badge { width: 30px; height: 34px; }

  /* ===== Auth: one screen, no page scroll ===== */
  html:has(body[data-view='auth']), body[data-view='auth'] { height: 100dvh; overflow: hidden; }
  .auth { display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .auth-hero { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; padding: calc(10px + var(--safe-t)) 14px 6px; }
  .auth-top { flex: none; }
  .auth-top .mark { width: 28px; height: 28px; }
  .auth-top .wordmark { font-size: 20px; }
  .auth-links { gap: 12px; }
  .auth-links .link-btn { font-size: 11.5px; }
  .auth-stage { flex: 1 1 auto; min-height: 0; justify-content: center; align-content: center; gap: 4px; padding: 0; }
  .auth-cube { --c: clamp(64px, 20dvh, 150px); width: var(--c); height: var(--c); }
  .auth-cube .mark { width: var(--c); height: var(--c); }
  .auth-cube .ring { width: calc(var(--c) * 1.45); height: calc(var(--c) * 1.45); margin: calc(var(--c) * -0.725) 0 0 calc(var(--c) * -0.725); }
  .auth-cube .ring.r2 { width: calc(var(--c) * 1.85); height: calc(var(--c) * 1.85); margin: calc(var(--c) * -0.925) 0 0 calc(var(--c) * -0.925); }
  .auth-stage .wordmark.is-xl { margin-top: 10px; font-size: clamp(32px, 9.5dvh, 46px); }
  .auth-tag { font-size: 15px; letter-spacing: 0.1em; }
  .auth-sub { font-size: 12px; max-width: 280px; }
  .auth-stats { display: none; }
  .auth-card { flex: none; gap: 9px; margin-top: 0; padding: 12px 14px calc(12px + var(--safe-b)); border-radius: 18px 18px 0 0; }
  .auth-card .seg button { min-height: 34px; font-size: 11.5px; }
  .auth-card h1 { display: none; }
  .auth-lead { display: none; }
  .auth-card .form { gap: 8px; }
  .auth-card .btn-lg { min-height: 44px; }
  .auth-fine { display: none; }
  .form-msg { font-size: 11.5px; }
}

/* very short phones: drop the optional marketing line */
@media (max-width: 639px) and (max-height: 700px) {
  .auth-sub { display: none; }
  .auth-card .field > span { display: none; }
  .auth-card .control { height: 40px; }
  .hero-card .quick-ic { height: 34px; }
}
@media (max-width: 639px) and (max-height: 600px) {
  .auth-tag { display: none; }
  .auth-cube { --c: 56px; }
}

/* very narrow screens */
@media (max-width: 359px) {
  .hero-num strong { font-size: 30px; }
  .quick button { font-size: 10px; }
  .chg { min-width: 56px; font-size: 11.5px; }
  .tab-item { font-size: 9.5px; }
}

/* ===== Desktop / tablet auth: two columns ===== */
@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr) 480px; min-height: 100dvh; }
  .auth-hero { padding: 24px 40px; align-content: space-between; min-height: 100dvh; }
  .auth-stage { align-self: center; }
  .auth-card { align-content: center; margin: 0; padding: 40px; border-radius: 0; box-shadow: inset 1px 0 0 var(--line-2); }
}

/* Keep editable controls at a readable size on touch devices. iOS Safari otherwise
   zooms the page when a small-text field receives focus. Pinch zoom stays enabled. */
@media (max-width: 639px), (pointer: coarse) {
  input:not([type="hidden"]):not([type="range"]), textarea, select,
  .control input, .control select, .control.addr input, .search-field input, .chat-form input {
    font-size: 16px;
  }
}