/* Fraction Tools. Each denominator has a hue (--h); pieces mix it softly
   into the stage color, and shaded pieces show it in full. */

.fr {
  display: flex; flex-direction: column; gap: clamp(4px, 1.4cqmin, 16px);
  padding: clamp(6px, 2cqmin, 22px) clamp(6px, 2.4cqmin, 26px);
  --fr-ink: #14202e;
}
.fr-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.fr-view { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(4px, 1.4cqmin, 16px); }
.fr-view[hidden] { display: none; }
.fr-box { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; }
.fr-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* ---- mode tabs ---- */
.fr-tabs {
  align-self: center; display: flex; gap: 3px; padding: 3px; border-radius: 999px; max-width: 100%;
  background: color-mix(in srgb, var(--stage-ink) 6%, var(--stage-bg)); border: 1px solid color-mix(in srgb, var(--stage-ink) 10%, transparent);
}
.fr-tab {
  border: 0; background: transparent; color: color-mix(in srgb, var(--stage-ink) 70%, transparent); border-radius: 999px;
  padding: 0 clamp(10px, 2.4cqmin, 26px); min-height: clamp(30px, 6.4cqmin, 54px);
  font: 650 clamp(12px, 2.7cqmin, 24px)/1 var(--font-display); white-space: nowrap;
}
.fr-tab:hover { color: var(--stage-ink); background: color-mix(in srgb, var(--stage-ink) 6%, transparent); }
.fr-tab[aria-pressed="true"] { background: var(--card); color: var(--cat); box-shadow: var(--shadow-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--cat) 45%, transparent); }

/* ---- pieces ---- */
.fr text { font-family: var(--font-display); font-weight: 600; fill: currentColor; }
.fr .fr-sf line { stroke: currentColor; stroke-linecap: round; }
.fr-piece { color: var(--stage-ink); }
.fr-piece.on { color: var(--fr-ink); }
.fr-p {
  fill: color-mix(in srgb, hsl(var(--h) 72% 58%) 15%, var(--stage-bg));
  stroke: color-mix(in srgb, hsl(var(--h) 55% 45%) 55%, var(--stage-bg)); stroke-width: 1.5;
  transition: fill .15s;
}
.fr-piece.on .fr-p { fill: hsl(var(--h) 74% 66%); stroke: hsl(var(--h) 55% 42%); }
.fr-slice { stroke: var(--stage-bg); stroke-width: 2.5; stroke-linejoin: round; }
.fr-piece.on .fr-slice { stroke: var(--stage-bg); }
.fr-rim { fill: none; stroke: color-mix(in srgb, var(--stage-ink) 45%, transparent); stroke-width: 2.5; pointer-events: none; }
.fr-csvg .fr-rim { stroke-width: 1.4; }
.fr-csvg .fr-slice { stroke-width: 1.4; }
.fr-pl { pointer-events: none; }
.fr-piece.is-click { cursor: pointer; }
.fr-piece.is-click:hover .fr-p { fill: color-mix(in srgb, hsl(var(--h) 72% 58%) 32%, var(--stage-bg)); }
.fr-piece.is-click.on:hover .fr-p { fill: hsl(var(--h) 76% 61%); }
.fr-piece:focus { outline: none; }
.fr-piece:focus-visible .fr-p { stroke: var(--cat); stroke-width: 3.5; }
.fr-row.is-dim { opacity: .3; }
.fr-row.is-emph .fr-p { stroke-width: 2.5; }
.fr-sum, .fr-tag { color: hsl(var(--h) 60% 40%); }
:root[data-theme="dark"] .fr-sum, :root[data-theme="dark"] .fr-tag { color: hsl(var(--h) 80% 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fr-sum, :root:not([data-theme="light"]) .fr-tag { color: hsl(var(--h) 80% 72%); } }
.fr-guide { stroke: var(--cat); stroke-dasharray: 8 6; stroke-linecap: round; pointer-events: none; }
.fr-guide.is-thin { stroke: color-mix(in srgb, var(--stage-ink) 55%, transparent); stroke-width: 1.6; stroke-dasharray: 5 5; }

/* ---- stacked fractions in HTML ---- */
.fr-hf { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; font-family: var(--font-display); font-weight: 650; font-variant-numeric: tabular-nums; }
.fr-hf-n { padding: 0 .18em .1em; border-bottom: max(2px, .08em) solid currentColor; }
.fr-hf-d { padding: .1em .18em 0; }
.fr-hn { font-family: var(--font-display); font-weight: 650; line-height: 1; vertical-align: middle; font-variant-numeric: tabular-nums; }

/* ---- circles: drawing beside (or above) the readout ---- */
.fr-v-circles { flex-direction: row; align-items: stretch; }
.fr-read {
  flex: 0 0 auto; align-self: center; min-width: 22cqmin; display: flex; flex-direction: column; align-items: center; gap: 1.4cqmin;
  padding: 2cqmin 3cqmin; border-radius: 3cqmin;
  background: color-mix(in srgb, var(--stage-ink) 4%, var(--stage-bg)); border: 1px solid color-mix(in srgb, var(--stage-ink) 10%, transparent);
}
.fr-read-label { font-size: clamp(11px, 2.4cqmin, 22px); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--stage-ink) 55%, transparent); }
.fr-read-main { display: flex; align-items: center; gap: .3em; font-size: clamp(22px, 9cqmin, 150px); color: hsl(var(--h) 60% 38%); }
:root[data-theme="dark"] .fr-read-main { color: hsl(var(--h) 80% 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fr-read-main { color: hsl(var(--h) 80% 72%); } }
.fr-read-main .fr-eqs { font: 500 .6em/1 var(--font-display); color: color-mix(in srgb, var(--stage-ink) 50%, transparent); }
.fr-mixed { display: inline-flex; align-items: center; gap: .08em; }
.fr-read-sub { font: 600 clamp(12px, 3cqmin, 34px)/1.2 var(--font-display); color: color-mix(in srgb, var(--stage-ink) 65%, transparent); white-space: pre; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.fr-q { font: 700 1em/1 var(--font-display); color: color-mix(in srgb, var(--stage-ink) 40%, transparent); }
@container (orientation: portrait) {
  .fr-v-circles { flex-direction: column; }
  .fr-read { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 1.4cqmin 3cqmin; }
  .fr-read-main { font-size: clamp(20px, 8cqmin, 120px); }
}

/* ---- compare ---- */
.fr-cmp-top { flex: 1.25 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2.5cqmin, 40px); }
.fr-side { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2cqmin, 30px); }
.fr-cwrap { position: relative; height: 100%; flex: 0 1 auto; aspect-ratio: 1; max-width: 50%; min-width: 0; }
.fr-csvg { position: absolute; inset: 4%; width: 92%; height: 92%; overflow: visible; }
.fr-sym {
  flex: none; min-width: 1.2em; text-align: center;
  font: 700 clamp(30px, 14cqmin, 220px)/1 var(--font-display); color: var(--cat);
}
.fr-sym[data-cmp="q"] { color: color-mix(in srgb, var(--stage-ink) 35%, transparent); }
.fr-bars { flex: 1 1 0; min-height: 60px; }
.fr-work {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4em 1.4em;
  font-size: clamp(14px, 4cqmin, 54px); min-height: 2.3em;
}
.fr-wpair { display: inline-flex; align-items: center; gap: .35em; }
.fr-wpair i { font-style: normal; color: color-mix(in srgb, var(--stage-ink) 50%, transparent); font-weight: 500; }
.fr-wres { padding: .15em .6em; border-radius: .5em; background: color-mix(in srgb, var(--cat) 12%, var(--stage-bg)); border: 1px solid color-mix(in srgb, var(--cat) 30%, transparent); }
.fr-wsym { color: var(--cat); font: 700 1.2em/1 var(--font-display); margin: 0 .25em; }
.fr-wnote { font-size: .6em; font-weight: 600; color: color-mix(in srgb, var(--stage-ink) 60%, transparent); margin-right: .4em; }

/* ---- fraction picker ---- */
.fr-pk { flex: none; display: flex; flex-direction: column; align-items: center; gap: clamp(2px, .6cqmin, 8px); }
.fr-pk-row { display: flex; align-items: center; gap: clamp(4px, 1cqmin, 12px); }
.fr-pk-v { min-width: 1.4em; text-align: center; font: 700 clamp(20px, 7.5cqmin, 110px)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.fr-pk-bar { width: 72%; height: max(3px, .7cqmin); border-radius: 99px; background: currentColor; }
.fr-step {
  flex: none; width: clamp(30px, 6.4cqmin, 56px); height: clamp(30px, 6.4cqmin, 56px); padding: 0; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm);
}
.fr-step:hover { background: var(--card-alt); }
.fr-step:disabled { opacity: .35; cursor: not-allowed; }
.fr-step .icon { width: 50%; height: 50%; }
.fr-side-a .fr-pk { color: hsl(212 65% 42%); }
.fr-side-b .fr-pk { color: hsl(25 80% 42%); }
:root[data-theme="dark"] .fr-side-a .fr-pk { color: hsl(212 85% 72%); }
:root[data-theme="dark"] .fr-side-b .fr-pk { color: hsl(25 90% 68%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-side-a .fr-pk { color: hsl(212 85% 72%); }
  :root:not([data-theme="light"]) .fr-side-b .fr-pk { color: hsl(25 90% 68%); }
}

/* ---- equivalent ---- */
.fr-eq-top { flex: none; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 4cqmin, 60px); }
.fr-v-equiv .fr-pk-v { font-size: clamp(18px, 6cqmin, 90px); }
.fr-eqlist { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .5em; font-size: clamp(16px, 5cqmin, 72px); min-width: 0; }
.fr-eqlist i { font-style: normal; color: color-mix(in srgb, var(--stage-ink) 45%, transparent); font-weight: 500; }
.fr-eq-item { padding: .12em .3em; border-radius: .35em; }
.fr-eq-item.is-pick { background: color-mix(in srgb, var(--cat) 14%, var(--stage-bg)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cat) 45%, transparent); }

/* ---- controls ---- */
.fr-ctrl { flex: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(6px, 1.6cqmin, 18px); }
.fr-only-circles { display: none; }
.fr[data-mode="circles"] .fr-only-circles { display: inline-flex; }
.fr-den { min-width: 6.5em; justify-content: center; }
.fr-ctrl .t-btn[hidden] { display: none; }

/* Settings: row picker shows stacked unit fractions. */
.fr-rows button { flex: 1 0 calc(16.66% - 4px); min-height: 46px; padding: 2px 0; }
.fr-rowfrac { font-size: .82rem; }

@container (max-height: 420px) {
  .fr-work { font-size: clamp(12px, 3.6cqmin, 20px); min-height: 0; }
  .fr-read-label { display: none; }
}
@container (max-height: 340px) {
  .fr-tabs { display: none; }
  .fr-pk-v { font-size: clamp(16px, 6cqmin, 40px); }
  .fr-step { width: 28px; height: 28px; }
}
@container (max-height: 280px) {
  .fr-work { display: none; }
}
@container (max-width: 480px) {
  .fr-tab { padding: 0 8px; }
  .fr-eq-top { flex-direction: column; gap: 4px; }
}