/* baseer.at: Baseerat means vision. The page is a lens that brings the day's mandi rate into focus. */

@font-face {
  font-family: "Naskh";
  src: url("/fonts/NotoNaskhArabic-arabic.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Lexend";
  src: url("/fonts/Lexend-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --field: #0C3527;
  --field-up: #124434;
  --deep: #07241A;
  --light: #F2F6EE;
  --mist: #A9C6B5;
  --rule: rgba(242, 246, 238, 0.16);
  --lime: #C8F169;
  --lime-soft: rgba(200, 241, 105, 0.13);
  --urdu: "Naskh", "Noto Naskh Arabic", "Geeza Pro", serif;
  --latin: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4.5vw, 48px);
  --page: 1100px;
  --side: max(var(--gutter), calc((100% - var(--page)) / 2));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--mist) var(--deep); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--field);
  color: var(--light);
  font: 400 1.15rem/1.85 var(--urdu);
}
:lang(en) { font-family: var(--latin); line-height: 1.6; }
:lang(ur) { font-family: var(--urdu); line-height: 1.85; }
bdi, :lang(ur) bdi, [dir="ltr"], :lang(ur) [dir="ltr"] { unicode-bidi: isolate; font-family: var(--latin); }
/* Lexend sits heavier than Naskh at the same weight; lighten digits inside running Urdu */
:lang(ur) p bdi, :lang(ur) .links [dir="ltr"] { font-weight: 330; }
::selection { background: var(--lime); color: var(--field); }
a { color: var(--lime); text-underline-offset: 0.3em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--light); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
svg { display: block; }
h1, h2 { margin: 0; font-weight: 700; text-wrap: balance; }
:lang(en) h1, :lang(en) h2 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }

/* ---------- Bar ---------- */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--side);
}
.wordmark {
  font: 700 2.1rem/1.6 var(--urdu);
  color: var(--light);
  text-decoration: none;
}
.wordmark.small { font-size: 1.7rem; }
.lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font: 500 0.95rem/1 var(--latin);
  color: var(--light);
  text-decoration: none;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
}
.lang:lang(ur) { font: 700 1.05rem/1 var(--urdu); }
.lang:hover { border-color: var(--lime); color: var(--lime); }

/* ---------- Rates: the lens and what waits around it ---------- */
.rates {
  padding: 8px var(--side) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "date" "lens" "more" "rows" "source";
  justify-items: center;
}
@media (min-width: 900px) {
  .rates {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    grid-template-areas: "head head" "date date" "lens rows" "more rows" "source source";
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
    padding-top: 24px;
  }
}
.rates h1 { grid-area: head; font-size: clamp(2rem, 8.6vw, 3.8rem); line-height: 1.5; text-align: center; }
.rates h1:lang(en) { line-height: 1.15; }
.date { grid-area: date; margin: 0; color: var(--mist); font-size: 1.1rem; }
.date:lang(en), .date bdi { font-family: var(--latin); font-size: 1rem; letter-spacing: 0.01em; }

.lens {
  grid-area: lens;
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1;
  margin-top: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #18533F 0%, var(--field-up) 48%, #0A2F22 100%);
  box-shadow: 0 0 0 1px var(--rule), 0 32px 60px -28px rgba(0, 0, 0, 0.7);
  container-type: inline-size;
  outline: none;
}
@media (min-width: 900px) { .lens { width: 420px; margin-top: 30px; } }
/* the focus ring: fine ticks with a heavier mark every 30 degrees */
.lens::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -1deg, var(--lime) 0 2deg, transparent 2deg 30deg),
    repeating-conic-gradient(from -0.4deg, rgba(200, 241, 105, 0.55) 0 0.8deg, transparent 0.8deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 16px), #000 calc(100% - 16px) calc(100% - 4px), transparent calc(100% - 4px));
  mask: radial-gradient(closest-side, transparent calc(100% - 16px), #000 calc(100% - 16px) calc(100% - 4px), transparent calc(100% - 4px));
  transform: rotate(var(--turn, 0deg));
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lens::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px solid rgba(200, 241, 105, 0.28);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .lens::before { transition: none; } }

.focus {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 0 11cqi;
  transition: filter 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.focus.blurring { filter: blur(10px); opacity: 0; transform: scale(0.96); transition-duration: 180ms; }
.focus.sharpening { filter: blur(14px); opacity: 0; transform: scale(1.05); transition: none; }
.emblem {
  width: 44px;
  height: 44px;
  padding: 5px;
  border-radius: 50%;
  background: var(--light);
  flex: 0 0 auto;
}
.focus .emblem { width: 15cqi; height: 15cqi; padding: 2.2cqi; margin-bottom: 1cqi; }
.focus .crop { font-size: min(1.9rem, 8.4cqi); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.focus .mandi { font-size: min(1.15rem, 5.2cqi); color: var(--mist); line-height: 1.5; }
.focus .mid { font-size: min(3.3rem, 14cqi); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin-top: 1.5cqi; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs { font-family: var(--latin); font-weight: 400; font-size: max(12px, 0.42em); letter-spacing: 0; color: var(--mist); margin-inline-end: 0.28em; vertical-align: 0.72em; }
.focus .per { color: var(--mist); font-size: min(1rem, 4.4cqi); line-height: 1.5; white-space: nowrap; display: flex; gap: 0.5em; }
.focus .per .range { font-variant-numeric: tabular-nums; }

.more {
  grid-area: more;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  min-height: 54px;
  padding: 8px 28px;
  font: 700 1.25rem/1.4 var(--urdu);
  color: var(--field);
  background: var(--lime);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 12px 24px -14px rgba(200, 241, 105, 0.6);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), background-color 160ms;
}
.more:lang(en) { font: 600 1.05rem/1.4 var(--latin); }
.more svg { width: 22px; height: 22px; }
.more:hover { background: #D8FA8A; }
.more:active { transform: scale(0.97); }
.more:disabled { cursor: progress; opacity: 0.75; }

.rows {
  grid-area: rows;
  width: 100%;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) { .rows { margin-top: 30px; max-width: 480px; justify-self: start; } }
.row {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 6px;
  font: inherit;
  color: inherit;
  text-align: start;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background-color 160ms;
}
.row { color: #CFDDD3; }
.row .mid { color: #CFDDD3; }
.row:hover, .row:focus-visible { background: var(--lime-soft); color: var(--light); }
.row:hover .mid, .row:focus-visible .mid { color: var(--light); }
.row .emblem { opacity: 0.82; transition: opacity 160ms, box-shadow 160ms; }
.row:hover .emblem, .row:focus-visible .emblem { opacity: 1; }
.row.swapped .emblem { opacity: 1; box-shadow: 0 0 0 3px var(--field), 0 0 0 5px var(--lime); }
.row .what { display: grid; min-width: 0; }
.row .crop { font-size: 1.25rem; font-weight: 700; line-height: 1.45; }
.row .mandi { font-size: 1rem; color: var(--mist); line-height: 1.5; }
.row .how { display: grid; justify-items: end; }
.row .rs { vertical-align: 0.5em; }
.row .mid { font-size: 1.4rem; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .unit { font-size: 0.95rem; color: var(--mist); line-height: 1.5; }
.row:lang(en) .crop, .row:lang(en) .mandi, .row:lang(en) .unit { line-height: 1.35; }
.row:lang(en) .crop { font-size: 1.1rem; font-weight: 600; }

.source { grid-area: source; margin: 18px 0 0; max-width: 60ch; text-align: center; text-wrap: balance; font-size: 0.98rem; color: var(--mist); }
.source:lang(en) { font-size: 0.9rem; }

/* ---------- The app ---------- */
.app {
  padding: 56px var(--side);
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .app .steps { grid-row: 1 / span 2; grid-column: 2; width: 100%; max-width: 480px; justify-self: start; }
}
.app h2 { font-size: clamp(1.8rem, 7vw, 3rem); line-height: 1.5; }
.app h2:lang(en) { line-height: 1.15; }
.lede { margin: 8px 0 24px; color: var(--mist); font-size: 1.2rem; text-wrap: balance; }
.lede:lang(en) { font-size: 1.05rem; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.steps li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--mist); font-size: 1.1rem; line-height: 1.6; }
.steps li:lang(en) { font-size: 1rem; }
.steps svg { flex: 0 0 auto; width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: var(--lime-soft); color: var(--lime); }
.steps b { display: block; color: var(--light); font-size: 1.35rem; line-height: 1.5; }
:lang(en) .steps b { font-size: 1.15rem; font-weight: 600; line-height: 1.35; }

/* ---------- Baseerat Dost: the one field in the accent ---------- */
.dost {
  padding: 48px var(--side) 52px;
  background: var(--lime);
  color: var(--field);
}
.dost h2 { font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: 1.5; }
:lang(en) .dost h2 { line-height: 1.15; }
.dost p { margin: 6px 0 22px; max-width: 58ch; font-size: 1.2rem; }
:lang(en) .dost p { font-size: 1.05rem; }
.mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 24px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--lime);
  background: var(--field);
  border-radius: 999px;
  text-decoration: none;
}
:lang(en) .mail { font-weight: 600; font-size: 1rem; }
.mail svg { width: 22px; height: 22px; }
.mail:hover { color: var(--light); }

/* ---------- Footer ---------- */
.foot { padding: 40px var(--side) 44px; background: var(--deep); color: var(--mist); }
.foot p { margin: 0; }
.foot .links { margin-top: 10px; font-size: 1rem; }
.foot .links a[dir="ltr"], .foot .links a:lang(en) { font-size: 0.92rem; }

/* ---------- Reading pages (privacy, not found) ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: 24px var(--gutter) 56px; }
.doc h1 { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.5; }
.doc h1:lang(en) { line-height: 1.15; }
.doc h2 { margin-top: 28px; font-size: 1.3rem; line-height: 1.6; color: var(--lime); }
.doc h2:lang(en) { font-size: 1.1rem; line-height: 1.4; }
.doc p { margin: 6px 0 0; color: var(--light); }
.doc .updated { color: var(--mist); }
.doc + .doc { border-top: 1px solid var(--rule); padding-top: 48px; }