/* Spiffy mobile polish (phones up to 640px wide).
   Dashboard and site pages: tighter spacing and type so pages fit a phone, rows wrap
   instead of spilling off screen, and tab bars wrap instead of scrolling sideways.
   The public creator profile is left alone (it has its own layout file). */
@media (max-width:640px){
  body:not(:has(.spiffy-profile-appearance)) .container{padding-left:14px;padding-right:14px}
  body:not(:has(.spiffy-profile-appearance)) main .py-8,body:not(:has(.spiffy-profile-appearance)) .container.py-8{padding-top:18px;padding-bottom:18px}
  body:not(:has(.spiffy-profile-appearance)) main .p-8{padding:18px}
  body:not(:has(.spiffy-profile-appearance)) main .p-6,body:not(:has(.spiffy-profile-appearance)) .container .p-6{padding:16px}
  body:not(:has(.spiffy-profile-appearance)) .container .mb-8{margin-bottom:18px}
  body:not(:has(.spiffy-profile-appearance)) .container .gap-8{gap:16px}
  body:not(:has(.spiffy-profile-appearance)) .container .gap-6{gap:14px}
  body:not(:has(.spiffy-profile-appearance)) .container :is(h1.text-4xl,h1.text-5xl,.text-4xl){font-size:1.75rem;line-height:1.15}
  body:not(:has(.spiffy-profile-appearance)) .container :is(h1.text-3xl,.text-3xl){font-size:1.5rem;line-height:1.2}
  /* Rows that hold a title and a button: let the button drop under the title. */
  body:not(:has(.spiffy-profile-appearance)) .container .flex.justify-between:has(> button,> a){flex-wrap:wrap;row-gap:10px}
  body:not(:has(.spiffy-profile-appearance)) .container .flex.justify-between > button.whitespace-nowrap{white-space:normal}
  /* Filter chips and tab bars wrap onto a second line instead of being cut off. */
  body:not(:has(.spiffy-profile-appearance)) .container [role="tablist"]{flex-wrap:wrap;height:auto;overflow:visible;gap:6px}
  body:not(:has(.spiffy-profile-appearance)) .container .overflow-x-auto:has(> [role="tablist"]),body:not(:has(.spiffy-profile-appearance)) .container .overflow-x-auto:has(> button){overflow:visible}
  body:not(:has(.spiffy-profile-appearance)) .container .overflow-x-auto:has(> button) {display:flex;flex-wrap:wrap;gap:6px}
  /* Wide tables scroll inside their card, never the page. */
  body:not(:has(.spiffy-profile-appearance)) .container :has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  body:not(:has(.spiffy-profile-appearance)) .container table :is(th,td){padding-left:10px;padding-right:10px}
}

/* Homepage showcase phone: carousel dots were blown up to 44px circles by the global
   touch-target rule; keep them as small pills (the arrows stay as the big tap targets). */
button[aria-label^="Switch to persona"]{min-width:0!important;min-height:0!important;padding:0!important;height:8px!important;width:8px!important;border-radius:999px!important}
button[aria-label^="Switch to persona"].bg-blue-600{width:24px!important}
@media (max-width:640px){
  /* Corner badges on the showcase phone hung off the screen edges. */
  .absolute.-top-6.-left-6.w-12.h-12,.absolute.-top-4.-right-8.w-10.h-10{display:none}
  /* Caption under the showcase sat in grey on the dark purple hero. */
  .text-center.mt-4 > p.text-sm.text-gray-600:has(> span.ml-1){color:rgba(255,255,255,.75)}
  /* Pricing cards: same content, less padding, so the four plans don't take five screens. */
  body:not(:has(.spiffy-profile-appearance)) section .p-8:has(> h3){padding:20px}
  /* Footer links: proper finger-sized spacing. */
  footer ul li a,footer nav a{display:inline-block;padding:6px 0}
}
@media (max-width:640px){
  /* Dashboard stat cards: two per row instead of one tall card per screen-third. */
  body:not(:has(.spiffy-profile-appearance)) .container .grid.grid-cols-1:has(> .unified-card-glass){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body:not(:has(.spiffy-profile-appearance)) .container .grid.grid-cols-1 > .unified-card-glass{padding:14px;min-width:0}
  body:not(:has(.spiffy-profile-appearance)) .container .grid.grid-cols-1 > .unified-card-glass .text-2xl{font-size:1.25rem}
  body:not(:has(.spiffy-profile-appearance)) .container .grid.grid-cols-1 > .unified-card-glass:last-child:nth-child(odd){grid-column:1 / -1}
  /* Analytics stat cards: keep one per row but compact. */
  body:not(:has(.spiffy-profile-appearance)) .container .grid.grid-cols-1 > div > .unified-card > .p-6{padding:16px}
  /* Add product: "Back to Products" gets its own line above the page title. */
  body:not(:has(.spiffy-profile-appearance)) .container .mb-8.flex.items-center:has(> button){flex-wrap:wrap;gap:10px}
  body:not(:has(.spiffy-profile-appearance)) .container .mb-8.flex.items-center:has(> button) > button{flex-basis:100%;justify-content:flex-start;padding-left:0}
}
@media (max-width:640px){
  /* Orders: filter buttons wrap instead of running off the card. */
  body:not(:has(.spiffy-profile-appearance)) .container .flex.items-center.gap-2:has(> .relative > button){flex-wrap:wrap}
}