/* ============================================================
   JIYŪ NANDA — utility classes
   A focused, build-free subset of the Tailwind utilities used by
   the v5 design markup. Reproduces the exact spacing/layout the
   design relies on, without shipping the Tailwind Play CDN
   (which is not for production). If you later add a real Tailwind
   build step in Claude Code, you can delete this file.
   ============================================================ */

/* display */
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.grid{display:grid;}
.block{display:block;}
.hidden{display:none;}
.relative{position:relative;}
.absolute{position:absolute;}

/* flex */
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.flex-nowrap{flex-wrap:nowrap;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.items-end{align-items:flex-end;}
.items-baseline{align-items:baseline;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.flex-1{flex:1 1 0%;}
.w-full{width:100%;}
.mt-auto{margin-top:auto;}
.text-center{text-align:center;}

/* gaps */
.gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;} .gap-5{gap:20px;}
.gap-6{gap:24px;} .gap-8{gap:32px;} .gap-10{gap:40px;} .gap-12{gap:48px;}
.gap-14{gap:56px;} .gap-16{gap:64px;}

/* grid */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}

/* margins */
.mb-2{margin-bottom:8px;} .mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;}
.mb-5{margin-bottom:20px;} .mb-6{margin-bottom:24px;} .mb-8{margin-bottom:32px;}
.mb-10{margin-bottom:40px;} .mb-12{margin-bottom:48px;}
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;}
.mt-5{margin-top:20px;} .mt-6{margin-top:24px;} .mt-7{margin-top:28px;} .mt-8{margin-top:32px;}
.mt-9{margin-top:36px;} .mt-10{margin-top:40px;} .mt-12{margin-top:48px;} .mt-14{margin-top:56px;}
.mt-24{margin-top:96px;}
.pt-5{padding-top:20px;} .pt-6{padding-top:24px;} .pt-7{padding-top:28px;} .pt-8{padding-top:32px;}
.pt-10{padding-top:40px;}
.p-4{padding:16px;} .p-5{padding:20px;}

/* spacing between children */
.space-y-3 > * + *{margin-top:12px;}
.space-y-4 > * + *{margin-top:16px;}
.space-y-5 > * + *{margin-top:20px;}
.space-y-6 > * + *{margin-top:24px;}

/* responsive: md (>=768px) */
@media (min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr));}
  .md\:col-span-5{grid-column:span 5/span 5;}
  .md\:col-span-7{grid-column:span 7/span 7;}
  .md\:flex-row{flex-direction:row;}
  .md\:items-center{align-items:center;}
  .md\:order-1{order:1;}
  .md\:order-2{order:2;}
  .md\:inline-flex{display:inline-flex;}
}
.order-1{order:1;} .order-2{order:2;}

/* responsive: lg (>=1024px) */
@media (min-width:1024px){
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:768px){
  .md\:grid-cols-3.lg-keep{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* hidden on mobile, shown md+ (design used `hidden md:inline-flex`) */
.hidden.md\:inline-flex{display:none;}
@media (min-width:768px){ .hidden.md\:inline-flex{display:inline-flex;} }