/* ==========================================================================
   Fraction Calculator
   Editorial dossier, mode tabs, fraction inputs, vertical-fraction rendering,
   worked steps, Pro GCD walk / repeating proof / inch mode / practice sheet.
   ========================================================================== */

/* ---- Editorial ---------------------------------------------------------- */
.frc-ed { display: grid; grid-template-columns: 104px 1fr; gap: 1.5rem; align-items: start; }
.frc-ed-art { display: flex; flex-direction: column; align-items: center; color: var(--cluster-dark, #114F8D); }
.frc-ed-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 0.6rem; opacity: 0.65; border: 1px solid currentColor;
  padding: 0.15rem 0.45rem; border-radius: 2px;
}
.frc-ed-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.frc-ed-head h2 { font-weight: 600; letter-spacing: -0.01em; }
.frc-ed-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.22rem 0.6rem; background: var(--cluster-dark, #114F8D); color: #fff; border-radius: 2px;
}
.frc-ed p { margin: 0 0 0.7rem 0; }
.frc-ed-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.55rem 1.4rem; padding-top: 0.8rem; font-size: 0.78rem;
  border-top: 1px dashed color-mix(in srgb, var(--cluster-dark, #114F8D) 35%, transparent);
}
.frc-ed-meta span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.6; display: block; margin-bottom: 0.1rem;
}
@media (max-width: 575.98px) {
  .frc-ed { grid-template-columns: 1fr; gap: 1rem; }
  .frc-ed-art { flex-direction: row; gap: 0.8rem; align-items: center; }
  .frc-ed-code { margin-top: 0; }
}

/* ---- Mode tabs + inputs ------------------------------------------------- */
.frc-mode-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.frc-mode {
  border: 1px solid var(--evvy-border-color, #DEE2E6); background: transparent; color: inherit;
  border-radius: 999px; font-size: 0.82rem; font-weight: 600; padding: 0.3rem 0.9rem; cursor: pointer;
}
.frc-mode.active { background: var(--cluster-dark, #114F8D); color: #fff; border-color: var(--cluster-dark, #114F8D); }
.frc-op-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.7rem; align-items: center; }
@media (max-width: 575.98px) { .frc-op-row { grid-template-columns: 1fr; } }
.frc-frac-in {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15rem;
  text-align: center; padding: 0.6rem;
}
.frc-op-sel { width: auto; min-width: 96px; font-size: 1.05rem; font-weight: 700; text-align: center; }
.frc-single-row { max-width: 380px; }

/* ---- Results ------------------------------------------------------------ */
.frc-results { display: none; }
.frc-results.show { display: block; }
.frc-hero { display: flex; align-items: center; justify-content: center; gap: 0.7rem; }
.frc-vf {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15;
  font-variant-numeric: tabular-nums; vertical-align: middle;
}
.frc-vf span:first-child { border-bottom: 3px solid currentColor; padding: 0 0.35em 0.05em; }
.frc-vf span:last-child { padding: 0.05em 0.35em 0; }
.frc-int { font-variant-numeric: tabular-nums; }
.frc-op-sym { font-size: 0.8em; opacity: 0.7; }
.frc-hero-sub { font-size: 0.88rem; margin-top: 0.5rem; color: var(--evvy-text-secondary, #6C757D); }
.frc-note { font-size: 0.74rem; line-height: 1.45; margin-top: 0.35rem; color: var(--evvy-text-secondary, #6C757D); }
.frc-dec-val { overflow-wrap: anywhere; }
.frc-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767.98px) { .frc-row-3 { grid-template-columns: 1fr; } }

.frc-panel {
  border: 1px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius-lg, 12px);
  padding: 1.1rem 1.2rem; margin-top: 1.25rem; background: var(--bs-body-bg, #fff);
}
[data-bs-theme="dark"] .frc-panel { background: var(--evvy-gray-100, #1E1E1E); }
.frc-panel-title {
  font-weight: 700; font-size: 0.95rem; margin-bottom: 0.8rem;
  display: flex; align-items: center; gap: 0.45rem; color: var(--cluster-dark, #114F8D);
}
.frc-muted { font-size: 0.78rem; color: var(--evvy-text-secondary, #6C757D); line-height: 1.55; }

/* ---- Steps -------------------------------------------------------------- */
.frc-steps { counter-reset: frcstep; }
.frc-step {
  position: relative; padding: 0.45rem 0 0.45rem 2.1rem; font-size: 0.9rem; line-height: 1.6;
  border-bottom: 1px dashed var(--evvy-border-color, #DEE2E6);
}
.frc-step:last-child { border-bottom: none; }
.frc-step::before {
  counter-increment: frcstep; content: counter(frcstep);
  position: absolute; left: 0; top: 0.5rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: color-mix(in srgb, var(--cluster-dark, #114F8D) 12%, transparent);
  color: var(--cluster-dark, #114F8D); font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.frc-step code { background: transparent; padding: 0; color: inherit; font-size: 0.95em; overflow-wrap: anywhere; }

/* ---- Inch mode ---------------------------------------------------------- */
.frc-inch-row { display: grid; grid-template-columns: 140px 170px 1fr; gap: 0.7rem; align-items: center; }
@media (max-width: 575.98px) { .frc-inch-row { grid-template-columns: 1fr; } }
.frc-inch-out strong { font-size: 1.25rem; }
.frc-inch-out span { display: block; font-size: 0.76rem; color: var(--evvy-text-secondary, #6C757D); }

/* ---- Buttons / misc ----------------------------------------------------- */
.frc-outline-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--cluster-dark, #114F8D); background: transparent;
  color: var(--cluster-dark, #114F8D); border-radius: 999px;
  padding: 0.35rem 0.95rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.frc-outline-btn:hover { background: var(--cluster-dark, #114F8D); color: var(--cluster-text, #fff); }
.frc-error {
  margin-top: 1rem; padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.88rem;
  background: color-mix(in srgb, #C0392B 10%, transparent); color: #C0392B;
}
[data-bs-theme="dark"] .frc-error { color: #E74C3C; }

/* ---- Print sheet -------------------------------------------------------- */
.frc-print-area { display: none; }
@media print {
  body.frc-printing .evvy-tool-ui > :not(.frc-print-area),
  body.frc-printing .evvy-tool-content, body.frc-printing header, body.frc-printing footer,
  body.frc-printing .evvy-tool-header, body.frc-printing .evvy-ad-leaderboard { display: none !important; }
  body.frc-printing .frc-print-area { display: block !important; }
  .frc-sheet h1 { font-size: 16pt; margin: 0 0 10pt; }
  .frc-sheet ol { font-size: 13pt; line-height: 2.4; columns: 2; }
  .frc-sheet-break { break-after: page; }
  .frc-sheet-f { font-size: 8pt; color: #555; margin-top: 12pt; }
}