/* PickProof — app-style layout for phones and small tablets.
   Desktop is untouched: everything here lives inside the media query, except the
   tab bar / sheets, which are hidden on desktop. */
.pp-tabbar, .pp-menu-btn, .pp-sheet-wrap { display: none; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

@keyframes pp-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  :root { --tab-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
  body { padding-bottom: calc(var(--tab-h) + var(--safe-b)); overscroll-behavior-x: none; }
  #app { animation: pp-page-in .28s ease backwards; }
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }

  /* ---------- Top app bar ---------- */
  .pp-header { position: sticky; top: 0; z-index: 40; background: rgba(10,12,15,.82) !important; -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); padding-top: var(--safe-t); }
  .pp-header > .wrap { flex-wrap: nowrap !important; padding-top: 10px !important; padding-bottom: 10px !important; gap: 8px !important; }
  .pp-header svg[width="30"] { width: 26px; height: 26px; }
  .pp-header a[aria-label="PickProof home"] span { font-size: 19px !important; }
  .pp-header nav { flex-wrap: nowrap !important; margin-left: auto; }
  .pp-header nav a:not([data-pp-account]) { display: none !important; }
  .pp-header nav a[data-pp-account] { margin-left: 0 !important; padding: 7px 12px !important; font-size: 13px !important; border-radius: 999px !important; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .pp-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: none; border: 1px solid #2A2F37; color: #E8EAED; cursor: pointer; padding: 0; }

  /* ---------- Bottom tab bar ---------- */
  .pp-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: rgba(13,15,19,.9); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-top: 1px solid #1B1F26; font-family: Inter, system-ui, sans-serif; }
  .pp-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #7E8794; font-size: 11px; font-weight: 600; text-decoration: none; position: relative; }
  .pp-tabbar a svg { width: 24px; height: 24px; }
  .pp-tabbar a.on { color: #46B8A0; }
  .pp-tabbar a.on::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: #46B8A0; }
  .pp-tabbar a:active { transform: scale(.94); }
  .pp-tabbar .pp-badge { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #E5604D; color: #fff; font-size: 10px; line-height: 16px; text-align: center; }

  /* ---------- Bottom sheets (menu, join, share) ---------- */
  .pp-sheet-wrap { display: flex; position: fixed; inset: 0; z-index: 120; background: rgba(5,6,8,.6); align-items: flex-end; animation: pp-fade-in .2s ease both; font-family: Inter, system-ui, sans-serif; color: #E8EAED; }
  .pp-sheet { width: 100%; background: #12151A; border-top: 1px solid #2A2F37; border-radius: 22px 22px 0 0; padding: 10px 16px calc(20px + var(--safe-b)); animation: pp-sheet-in .28s cubic-bezier(.2,.8,.2,1) both; max-height: 86vh; overflow-y: auto; }
  .pp-sheet::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 999px; background: #2F353F; margin: 0 auto 14px; }
  .pp-sheet a, .pp-sheet button.pp-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 12px; border-radius: 14px; color: #E8EAED; text-decoration: none; font: inherit; font-size: 16px; background: none; border: none; text-align: left; cursor: pointer; }
  .pp-sheet a:active, .pp-sheet button.pp-row:active { background: #1B1F26; }
  .pp-sheet .ico { width: 36px; height: 36px; border-radius: 10px; background: #1B1F26; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .pp-sheet .sub { display: block; font-size: 13px; color: #8B94A1; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .pp-sheet a > span:last-child { min-width: 0; }
  .pp-sheet hr { border: none; border-top: 1px solid #1B1F26; margin: 6px 0; }
  [role="dialog"][aria-modal="true"] { align-items: flex-end !important; padding: 0 !important; }
  [role="dialog"][aria-modal="true"] > div { max-width: none !important; width: 100% !important; border-radius: 22px 22px 0 0 !important; border-bottom: none !important; padding-bottom: calc(24px + var(--safe-b)) !important; animation: pp-sheet-in .28s cubic-bezier(.2,.8,.2,1) both !important; max-height: 88vh; overflow-y: auto; }

  /* ---------- Type + spacing: tighter, app-like ---------- */
  #app h1 { font-size: clamp(30px, 8.6vw, 40px) !important; letter-spacing: -1px !important; line-height: 1.08 !important; }
  #app h1.h1[style*="JetBrains"] { font-size: 26px !important; }
  #app h1.h1:not([style*="JetBrains"]) { font-size: clamp(38px, 11vw, 46px) !important; letter-spacing: -1.6px !important; line-height: 1.02 !important; }
  #app h2 { letter-spacing: -.3px !important; }
  #app h2[style*="font-size: 3"], #app h2[style*="font-size: 26px"] { font-size: 24px !important; line-height: 1.15 !important; }
  #app section[style*="padding-top: 72px"] { padding-top: 36px !important; }
  #app section[style*="padding-top: 64px"], #app section[style*="padding-top: 56px"] { padding-top: 28px !important; }
  #app section[style*="padding-top: 48px"] { padding-top: 24px !important; }
  #app [style*="padding: 48px 24px"], #app [style*="padding: 40px"], #app [style*="padding: 36px"], #app [style*="padding: 32px"] { padding: 22px 18px !important; }
  #app [style*="border-radius: 24px"] { border-radius: 20px !important; }
  #app p[style*="font-size: 19px"], #app p[style*="font-size: 18px"] { font-size: 16px !important; }
  #app footer { margin-top: 36px !important; }
  #app footer .wrap { padding-top: 18px !important; padding-bottom: 18px !important; font-size: 12px !important; gap: 8px !important; }
  #app input, #app select, #app textarea { font-size: 16px !important; } /* stops iOS zooming in */
  /* button-like links and buttons: one comfortable thumb height */
  #app a:is([style*="border-radius: 10px"], [style*="border-radius: 12px"], [style*="border-radius: 14px"])[style*="padding: 1"]:not([style*="display: flex"]):not([style*="display: block"]),
  #app button:is([style*="border-radius: 10px"], [style*="border-radius: 12px"], [style*="border-radius: 14px"]):not([style*="flex-direction: column"]) {
    min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; }
  #app button[style*="width: 100%"] { display: flex; }

  /* wide flex items: let them shrink to the screen */
  #app [style*="flex: 1 1 3"], #app [style*="flex: 1 1 4"], #app [style*="flex: 1 1 5"], #app [style*="flex: 2 1"], #app [style*="flex: 999 1"] { min-width: 0 !important; flex-basis: 100% !important; }
  #app fieldset { min-width: 0; }
  #app a[style*="flex-wrap: wrap; gap: 16px; align-items: center"] > [style*="flex: 1 1 3"] { flex: 1 1 0 !important; }
  #app a[style*="flex-wrap: wrap; gap: 16px; align-items: center"] { gap: 10px 14px !important; }
  #app a[style*="flex-wrap: wrap; gap: 16px; align-items: center"] > div:last-child:not(:nth-child(2)) { flex-basis: 100%; padding-left: 70px; }

  /* ---------- Swipe rows (cards side by side, swipe sideways) ---------- */
  #app .pp-swipe { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; margin-left: -16px; margin-right: -16px; padding: 2px 16px 8px; scroll-padding: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #app .pp-swipe::-webkit-scrollbar { display: none; }
  #app .pp-swipe > * { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
  #app .pp-grid2 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #app .pp-grid2 > * { padding: 14px !important; }
  #app .pp-grid2 [style*="font-size: 28px"] { font-size: 22px !important; }
  #app .pp-feed { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ---------- Chip rows (filters, tabs): one line you can swipe ---------- */
  #app .pp-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
  #app .pp-chips::-webkit-scrollbar { display: none; }
  #app .pp-chips > * { flex: 0 0 auto; white-space: nowrap; }
  #app .pp-actions { margin-left: 0; margin-right: 0; padding: 0; }
  #app div[style*="justify-content: space-between"] > .pp-chips { margin-left: 0; margin-right: 0; padding: 0; width: 100%; }

  /* ---------- Home ---------- */
  #app .pp-searchrow { flex-wrap: nowrap !important; gap: 8px !important; }
  #app .pp-searchrow label { flex: 1 1 auto !important; min-width: 0; }
  #app .pp-searchrow button { padding: 0 16px !important; flex: 0 0 auto; }
  #app .pp-map { aspect-ratio: 1.35 / 1 !important; }
  #app [data-pp-counter] { letter-spacing: -1px !important; }

  /* ---------- Scorecard ---------- */
  #app .pp-scorebox { flex: 1 1 100% !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap; gap: 4px 14px !important; order: -1; padding-bottom: 16px; border-bottom: 1px solid #1B1F26; }
  #app .pp-scorebox > div[style*="font-size: 72px"] { font-size: 52px !important; }
  #app .pp-scorebox > div[style*="width: 200px"] { width: 100% !important; margin-top: 4px !important; }
  #app svg[viewBox="0 0 1000 240"] { height: 170px !important; }
  /* tip log: each tip becomes a small card */
  #app .pp-tips { min-width: 0 !important; }
  #app .pp-tips thead { display: none; }
  #app .pp-tips tr { display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 2px 10px; padding: 12px 16px; }
  #app .pp-tips td { padding: 0 !important; white-space: normal !important; }
  #app .pp-tips td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; }
  #app .pp-tips td:nth-child(3) { grid-column: 2; grid-row: 1; font-size: 13px; }
  #app .pp-tips td:nth-child(5) { grid-column: 3 / 5; grid-row: 1; text-align: right; font-size: 13px; }
  #app .pp-tips td:nth-child(4) { grid-column: 1 / 5; grid-row: 2; font-size: 12px; }
  #app .pp-tips td:nth-child(1) { grid-column: 1 / 3; grid-row: 3; font-size: 12px; }
  #app .pp-tips td:nth-child(6) { grid-column: 3 / 5; grid-row: 3; text-align: right; }
  #app div[style*="overflow-x: auto"]:has(> .pp-tips) { overflow: visible !important; }
  /* simple tables become stacked rows */
  #app .pp-rows { min-width: 0 !important; }
  #app .pp-rows thead { display: none; }
  #app .pp-rows tr { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 12px 16px; }
  #app .pp-rows td { padding: 0 !important; font-size: 13px; }
  #app .pp-rows td:nth-child(3) { flex-basis: 100%; order: 3; }
  #app .pp-rows td:nth-child(4) { flex-basis: 100%; order: 4; }

  /* ---------- Blog / article ---------- */
  #app div[style*="min-height: 280px"] { min-height: 150px !important; }
  #app div[style*="height: 280px"] { height: 170px !important; border-radius: 16px !important; }
  #app article { padding-top: 20px !important; }
  #app article h1 { font-size: 28px !important; }
  #app article div[style*="font-size: 17px; line-height: 1.75"] { font-size: 16px !important; line-height: 1.7 !important; }
  #app div[style*="margin-left: 44px"] { margin-left: 22px !important; }

  /* ---------- Small screens: business plan cards etc. ---------- */
  #app .pp-swipe > [style*="padding: 28px"] { padding: 20px !important; }
}

@media (max-width: 760px) and (display-mode: standalone) {
  .pp-header { padding-top: calc(var(--safe-t) + 4px); }
}