/* ==========================================================================
   SHARED UTILITIES — Tailwind classes remapped to design tokens
   ==========================================================================
   Loaded ONLY by the page(s) named above, after app.css and utils.css.

   Why the split: a single global stylesheet accumulated 17 rounds of patches,
   ended up defining 45 selectors three or more times, and the newest rules
   were losing to older ones. Worse, class names collide across pages —
   .hero, .tab-content, .results-section and .search-icon all mean different
   things on different pages — so a default taken from one page silently broke
   another. Per-page files make that impossible by construction.
   ========================================================================== */

   PART 1 — TAILWIND UTILITIES, REMAPPED TO THE DESIGN TOKENS
   Only the utilities actually used are defined. Colours resolve to tokens, so
   both light and dark themes work with no markup changes.
   ========================================================================== */

/* --- layout ------------------------------------------------------------- */
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.block{display:block}
.hidden{display:none}
.flex-col{flex-direction:column}
.flex-1{flex:1 1 0%;min-width:0}
.flex-shrink-0{flex-shrink:0}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.text-center{text-align:center}
.text-right{text-align:right}
.mx-auto{margin-left:auto;margin-right:auto}
.relative{position:relative}
.absolute{position:absolute}
.overflow-hidden{overflow:hidden}
.overflow-y-auto{overflow-y:auto}
.w-full{width:100%}
.h-full{height:100%}
.cursor-pointer{cursor:pointer}
.transition,.transition-all{transition:all var(--med)}
.duration-500{transition-duration:.5s}
.top-1\/2{top:50%}
.right-2{right:8px}
.-translate-y-1\/2{transform:translateY(-50%)}

.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))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px}

.p-1{padding:4px} .p-2{padding:8px} .p-3{padding:12px}
.p-4{padding:16px} .p-5{padding:20px} .p-6{padding:24px}
.px-4{padding-left:16px;padding-right:16px}
.px-6{padding-left:24px;padding-right:24px}
.py-2{padding-top:8px;padding-bottom:8px}
.py-3{padding-top:12px;padding-bottom:12px}
.py-4{padding-top:16px;padding-bottom:16px}
.py-6{padding-top:24px;padding-bottom:24px}
.py-8{padding-top:32px;padding-bottom:32px}
.py-12{padding-top:48px;padding-bottom:48px}
.pt-2{padding-top:8px} .pb-2{padding-bottom:8px}
.pb-4{padding-bottom:16px} .pr-2{padding-right:8px}

.mb-0{margin-bottom:0} .mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px}
.mt-0\.5{margin-top:2px} .mt-1{margin-top:4px} .mt-2{margin-top:8px}
.mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-6{margin-top:24px}
.mr-2{margin-right:8px}

.space-y-1 > * + *{margin-top:4px}
.space-y-2 > * + *{margin-top:8px}
.space-y-3 > * + *{margin-top:12px}
.space-y-4 > * + *{margin-top:16px}

.w-6{width:24px} .w-10{width:40px} .w-12{width:48px} .w-14{width:56px} .w-16{width:64px}
.h-2{height:8px} .h-3{height:12px} .h-6{height:24px} .h-10{height:40px}
.h-12{height:48px} .h-14{height:56px} .h-16{height:64px} .h-20{height:80px}
.max-h-32{max-height:128px} .max-h-56{max-height:224px} .max-h-64{max-height:256px}

/* --- type -------------------------------------------------------------- */
.text-xs{font-size:11.5px;line-height:1.45}
.text-sm{font-size:13px;line-height:1.5}
.text-lg{font-size:16.5px;line-height:1.35;letter-spacing:-.02em}
.text-xl{font-size:19px;line-height:1.3;letter-spacing:-.028em}
.text-2xl{font-size:24px;line-height:1.2;letter-spacing:-.035em}
.text-6xl{font-size:52px;line-height:1.02;letter-spacing:-.045em}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.uppercase{text-transform:uppercase}

/* --- colour: greys map onto the text scale ------------------------------ */
.text-gray-400{color:var(--text-3)}
.text-gray-500{color:var(--text-3)}
.text-gray-600{color:var(--text-2)}
.text-gray-700{color:var(--text-2)}
.text-gray-800{color:var(--text)}
.text-gray-900{color:var(--text)}
.text-white{color:#FAFAFA}
.text-white\/60{color:rgba(250,250,250,.6)}
.text-white\/70{color:rgba(250,250,250,.7)}
.text-white\/80{color:rgba(250,250,250,.8)}

/* Money and status keep their meaning: green up, red down, amber attention. */
.text-green-600,.text-green-700,.text-emerald-600{color:var(--gain)}
.text-green-300{color:var(--gain)}
.text-red-500,.text-red-600,.text-red-700,.text-rose-600{color:var(--loss)}
.text-red-300{color:var(--loss)}
.text-amber-500,.text-amber-600,.text-amber-700,.text-orange-500{color:var(--flag)}
.text-blue-200,.text-blue-300{color:var(--info)}
.text-blue-600,.text-blue-700,.text-blue-900{color:var(--info)}

.bg-white{background:var(--surface)}
.bg-gray-50,.bg-gray-100{background:var(--surface-2)}
.bg-gray-200{background:var(--surface-3)}
.bg-white\/10{background:rgba(255,255,255,.1)}
.bg-white\/20{background:rgba(255,255,255,.2)}
.bg-blue-50,.bg-blue-100{background:var(--info-soft)}
.bg-green-100,.bg-emerald-50{background:var(--gain-soft)}
.bg-red-100{background:var(--loss-soft)}
.bg-amber-50,.bg-amber-100{background:var(--flag-soft)}
.bg-blue-500{background:var(--info)}
.bg-green-500{background:var(--gain)}
.bg-red-500{background:var(--loss)}
.bg-amber-500{background:var(--flag)}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--surface-2),var(--surface-3))}
.from-rose-500,.to-rose-600{--x:0}   /* gradient stops are neutralised on purpose */

.border{border:1px solid var(--hair)}
.border-0{border:0}
.border-2{border-width:2px;border-style:solid;border-color:var(--hair-2)}
.border-gray-200{border-color:var(--hair)}
.border-dashed{border-style:dashed}
.border-l-4{border-left:3px solid var(--hair-2)}
.border-blue-500{border-color:var(--info)}

.rounded-lg{border-radius:var(--r-md)}
.rounded-xl{border-radius:var(--r-lg)}
.rounded-2xl{border-radius:var(--r-xl)}
.rounded-full{border-radius:var(--r-pill)}
.shadow-lg{box-shadow:var(--shadow-sm)}

/* --- interaction ------------------------------------------------------- */
.hover\:bg-gray-100:hover{background:var(--surface-2)}
.hover\:bg-blue-50:hover{background:var(--info-soft)}
.hover\:bg-white\/30:hover{background:rgba(255,255,255,.3)}
.hover\:bg-white\/90:hover{background:var(--surface)}
.hover\:border-blue-300:hover{border-color:var(--info)}
.hover\:text-blue-600:hover,.hover\:text-blue-700:hover{color:var(--info)}
.hover\:text-gray-600:hover{color:var(--text-2)}
.hover\:text-white:hover{color:var(--text)}
.hover\:underline:hover{text-decoration:underline}
.hover\:scale-105:hover{transform:translateY(-2px)}
.hover\:shadow-xl:hover{box-shadow:var(--shadow)}
.focus\:ring-2:focus,.focus\:ring-blue-500:focus{outline:2px solid var(--info);outline-offset:1px}
.focus\:border-transparent:focus{border-color:transparent}

/* --- responsive variants actually used -------------------------------- */
@media(min-width:640px){ .sm\:flex{display:flex} }
@media(min-width:768px){
  .md\:flex-row{flex-direction:row}
  .md\:items-center{align-items:center}
  .md\:justify-between{justify-content:space-between}
  .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-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1024px){
  .lg\:flex-row{flex-direction:row}
  .lg\:items-center{align-items:center}
  .lg\:justify-between{justify-content:space-between}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:text-3xl{font-size:29px;letter-spacing:-.045em}
  .lg\:w-48{width:192px}
  .lg\:w-64{width:256px}
}

/* Below tablet, force every multi-column grid to a single column. Your pages
   used lg:/md: prefixes inconsistently, which left some grids stuck at 3 or 4
   columns on a phone. */
@media(max-width:860px){
  .grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}
  .p-6{padding:16px} .p-5{padding:16px}
  .px-6{padding-left:16px;padding-right:16px}
  .text-6xl{font-size:38px}
  .text-2xl{font-size:21px}
}