/* ==========================================================================
   03 · KASR KOMPONENTI
   Kasrni oʻrganayotgan bola uchun "1/4" koʻrinishi notoʻgʻri: u ikkita
   alohida sonni koʻradi. Shuning uchun butun darslikda kasr HAR DOIM
   ustma-ust — surat, chiziq, maxraj — koʻrinishida chiziladi.

   Belgilanishi (JS avtomatik yasaydi, qoʻlda ham yozish mumkin):
     <span class="frac" role="img" aria-label="toʻrtdan uch">
       <span class="fr-n">3</span><span class="fr-s">/</span><span class="fr-d">4</span>
     </span>

   .fr-s — koʻzga koʻrinmaydigan "/" belgisi. U ikki ish qiladi:
     1) matnni nusxalaganda "3/4" boʻlib koʻchadi;
     2) JS uchun element.textContent oʻzgarmasdan "3/4" boʻlib qolaveradi.
   ========================================================================== */

.frac {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(1.05em, auto);
  justify-items: stretch;
  text-align: center;
  vertical-align: middle;
  margin-inline: .16em;
  line-height: 1.06;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  /* himoya: atrofdagi "span/b ga tegishli" qoidalar kasrni buzmasin */
  text-transform: none;
  letter-spacing: normal;
  font-style: normal;
}

.frac > .fr-n,
.frac > .fr-d {
  display: block;
  padding-inline: .2em;
  font-size: var(--frac-size);
}

/* kasr chizigʻi — maxrajning yuqori chegarasi */
.frac > .fr-d {
  border-top: max(1.5px, var(--frac-bar-w)) solid var(--frac-bar);
  margin-top: .08em;
  padding-top: .06em;
}

/* koʻzdan yashirilgan "/" — nusxalash va textContent uchun */
.frac > .fr-s {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

/* ---------- oʻlchamlar ---------- */
.frac--sm { --frac-size: .68em; --frac-bar-w: .1em; }
.frac--lg { --frac-size: .92em; }
.frac--xl {
  --frac-size: 1em;
  --frac-bar-w: .07em;
  margin-inline: .1em;
}

/* ---------- rangli (oʻqitish) varianti ----------
   Surat — koʻk, maxraj — yashil: anatomiya boʻlimidagi izohga mos keladi. */
.frac--tone { --frac-bar: var(--ink-2); }
.frac--tone > .fr-n { color: var(--frac-num); }
.frac--tone > .fr-d { color: var(--frac-den); }

/* ---------- MATN ICHIDA emas, YAKKA turgan kasrlar ----------
   Matn qatorida kasr biroz kichik boʻlgani maʼqul (satrlar surilib
   ketmasin). Lekin yorliq, variant, kartochka ichida u YAKKA turadi —
   u yerda kichik koʻrinsa, bola uni oʻqiy olmaydi. */
.opt > .frac:only-child,
.duel-card > .frac,
.match-card > .frac,
.size-item b > .frac,
.eq-item b > .frac,
.cmp-side b > .frac,
.read-table td b > .frac,
.game-target b > .frac,
.ro b > .frac,
.sp-eq .frac,
.big-eq .frac,
.step-eq .frac,
.mo-final .frac,
.type-card p > b:first-child > .frac,
.repr-read .frac { --frac-size: 1em; }

/* ---------- ramkali variant (kartochka, oʻyin, jadval) ---------- */
.frac--boxed {
  padding: .18em .35em .22em;
  border-radius: .5em;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent) inset;
}

/* ---------- ARALASH SON: 1 ¾ ---------- */
.mixed {
  display: inline-flex;
  align-items: center;
  gap: .12em;
  vertical-align: middle;
  white-space: nowrap;
  font-weight: 800;
}
.mixed > .mx-int { font-size: 1.05em; line-height: 1; }
.mixed > .frac { margin-inline: 0 .16em; }

/* ---------- katta koʻrgazmali kasr (anatomiya bloki) ---------- */
.frac-display {
  display: inline-grid;
  grid-template-columns: minmax(1.1em, auto);
  justify-items: stretch;
  text-align: center;
  line-height: 1;
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-variant-numeric: tabular-nums lining-nums;
}
.frac-display > .fd-n { color: var(--frac-num); padding-inline: .12em; }
.frac-display > .fd-d { color: var(--frac-den); padding-inline: .12em; padding-top: .08em; }
.frac-display > .fd-bar {
  height: .1em;
  min-height: 5px;
  margin: .1em 0;
  border-radius: 99px;
  background: var(--ink-2);
}

/* ---------- kiritiladigan kasr (kalkulyator mashinalari) ---------- */
.frac-input {
  display: inline-grid;
  grid-template-columns: auto;
  justify-items: center;
  gap: 6px;
}
.frac-input .fi-bar {
  width: 100%;
  min-width: 72px;
  height: 4px;
  border-radius: 3px;
  background: var(--ink-2);
}

/* ---------- brend belgisi va maskot yorligʻi ---------- */
.brand-mark .bm-num,
.brand-mark .bm-den { font-size: .78rem; }
.brand-mark .bm-line { width: 16px; height: 2px; background: currentColor; margin: 2px 0; border-radius: 2px; }

/* ---------- chop etishda ham chiziq koʻrinsin ---------- */
@media print {
  .frac > .fr-d,
  .frac-display > .fd-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}