/* Fraction calculator (/fraction-calculator): what is its own - the fraction boxes, the operator buttons, the stacked
   fractions, the comparison, the numbered steps and the three pictures. Everything else (stage, panels, titles, result
   tiles, message, fields and buttons in the control panel, colours) comes from the app kit (css/app-kit,
   docs/app-kit.md). Loaded only on this app's page (StylePaths). The result is green (--ak-success for text,
   --ak-series-3 for fills), a negative value red (--ak-danger). */

/* Narrow screens: the site's phone rule for app stages (seo-pages.css, place-items: start center, more specific than
   the kit's align-items: stretch) would shrink the panels to their content; they keep the stage's width. */
.fraction-landing-app > .ak-stage > * {
    align-self: stretch;
}

/* --- The two fractions and the operator: one row, left to right also on a right-to-left page ---------------------- */

.fraction-landing-app .fc-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    max-width: 100%;
}

[dir="rtl"] .fraction-landing-app .fc-inputs {
    direction: ltr;
}

.fraction-landing-app .fc-operand {
    align-items: center;
}

/* Only the sign button: the box's place (first, then second) names the fraction (aria-label on the section). */
.fraction-landing-app .fc-operand-head {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.fraction-landing-app .fc-sign {
    min-width: 1.9rem;
    font-size: 1rem;
    line-height: 1;
}

.fraction-landing-app .fc-frac-input {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.2rem 0.1rem;
}

.fraction-landing-app .fc-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}

.fraction-landing-app .fc-bar {
    height: 3px;
    border-radius: 2px;
    background: var(--ak-text);
}

.fraction-landing-app .fc-field {
    width: 4.6rem;
    height: 2.7rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--ak-border);
    border-radius: 0.6rem;
    background: var(--ak-field);
    color: var(--ak-text);
    font: inherit;
    font-size: 1.3rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: border-color var(--ak-duration) var(--ak-ease), box-shadow var(--ak-duration) var(--ak-ease);
}

.fraction-landing-app .fc-whole {
    width: 3.6rem;
    height: 3.4rem;
    font-size: 1.7rem;
}

.fraction-landing-app .fc-decimal-input {
    width: 11rem;
}

.fraction-landing-app .fc-field:focus {
    outline: none;
    border-color: var(--ak-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ak-accent) 18%, transparent);
}

/* site.css gives every text input the site theme's text and border colours (specificity 0,4,1): the boxes follow the
   app's theme, and an entry that cannot be read turns red (aria-invalid). */
.fraction-landing-app .fc-field:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    color: var(--ak-text);
    border-color: var(--ak-border);
}

.fraction-landing-app .fc-field[aria-invalid="true"]:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    color: var(--ak-danger);
    border-color: var(--ak-danger);
}

/* Operator: four round buttons in a 2 x 2 block between the fractions. */
.fraction-landing-app .fc-op-buttons {
    display: grid;
    grid-template-columns: repeat(2, 2.6rem);
    gap: 0.4rem;
}

.fraction-landing-app .fc-op-btn {
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 1px solid var(--ak-border);
    border-radius: 50%;
    background: var(--ak-field);
    color: var(--ak-text);
    font: inherit;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--ak-shadow);
    transition: background-color var(--ak-duration), color var(--ak-duration), border-color var(--ak-duration), transform 0.1s;
}

.fraction-landing-app .fc-op-btn:hover {
    border-color: var(--ak-accent);
    color: var(--ak-accent);
}

.fraction-landing-app .fc-op-btn:active {
    transform: scale(0.95);
}

.fraction-landing-app .fc-op-btn[aria-pressed="true"] {
    border-color: var(--ak-accent);
    background: var(--ak-accent);
    color: var(--ak-on-accent);
}

.fraction-landing-app .fc-op-btn:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 2px;
}

/* --- Result: the sum with stacked fractions, the answer and its other forms (kit tiles), or the comparison -------- */

.fraction-landing-app .fc-equation {
    color: var(--ak-text);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.fraction-landing-app .fc-eq-pretty {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.55rem;
    -webkit-user-select: none;
    user-select: none;
}

.fraction-landing-app .fc-eq-op,
.fraction-landing-app .fc-eq-par {
    color: var(--ak-muted);
    font-weight: 600;
}

/* A tile value is as tall as a stacked fraction, so the tiles line up. */
.fraction-landing-app .fc-result-value {
    display: flex;
    align-items: center;
    min-height: 3.3rem;
}

/* A stacked fraction; the screen reader text (and a copy) is "9/4". */
.fraction-landing-app .fc-pretty {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    max-width: 100%;
    -webkit-user-select: none;
    user-select: none;
}

.fraction-landing-app .fc-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    font-size: 0.78em;
    line-height: 1.15;
    text-align: center;
}

.fraction-landing-app .fc-frac-n,
.fraction-landing-app .fc-frac-d {
    padding: 0 0.2em;
    overflow-wrap: anywhere;
}

.fraction-landing-app .fc-frac-d {
    border-top: 2px solid currentColor;
}

.fraction-landing-app .fc-compare {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.fraction-landing-app .fc-compare-row {
    position: relative;
    max-width: 100%;
}

.fraction-landing-app .fc-compare-pretty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    font-size: 1.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -webkit-user-select: none;
    user-select: none;
}

.fraction-landing-app .fc-compare-sym {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ak-accent) 14%, transparent);
    color: var(--ak-accent);
    font-size: 1.7rem;
    font-weight: 700;
}

.fraction-landing-app .fc-compare-note {
    color: var(--ak-muted);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* --- Steps: numbered rows with real stacked fractions -------------------------------------------------------------- */

.fraction-landing-app .fc-steps {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: fc-step;
    font-size: 0.95rem;
    line-height: 1.45;
}

.fraction-landing-app .fc-steps li {
    position: relative;
    padding-block: 0.5rem 0.55rem;
    padding-inline: 2.6rem 0.7rem;
    border-radius: var(--ak-radius);
    background: var(--ak-field);
    line-height: 1.6;
    overflow-wrap: anywhere;
    counter-increment: fc-step;
}

.fraction-landing-app .fc-steps li::before {
    content: counter(fc-step);
    position: absolute;
    top: 0.55rem;
    inset-inline-start: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ak-accent) 14%, transparent);
    color: var(--ak-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.fraction-landing-app .fc-math {
    font-variant-numeric: tabular-nums;
}

.fraction-landing-app .fc-math--chain {
    font-weight: 600;
}

.fraction-landing-app .fc-mathp {
    display: inline;
    -webkit-user-select: none;
    user-select: none;
}

.fraction-landing-app .fc-mt {
    white-space: nowrap;
}

.fraction-landing-app .fc-frac--step {
    display: inline-flex;
    margin: 0.1em 0.15em;
    font-size: 0.85em;
    line-height: 1.2;
    vertical-align: middle;
}

.fraction-landing-app .fc-frac--step .fc-frac-d {
    border-top-width: 1.5px;
}

/* --- Pictures: circle model, bar model and number line, each in its own frame ------------------------------------- */

.fraction-landing-app .fc-visual {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fraction-landing-app .fc-fig {
    min-width: 0;
    margin: 0;
    padding: 0.55rem 0.7rem 0.65rem;
    border-radius: var(--ak-radius);
    background: var(--ak-field);
}

/* The pictures say what they are (circles, bars, a number line): the captions stay for screen readers only. */
.fraction-landing-app .fc-fig-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.fraction-landing-app .fc-fig-body {
    overflow-x: auto;
}

.fraction-landing-app .fc-svg {
    display: block;
    max-width: 100%;
    height: auto;
    direction: ltr;
}

.fraction-landing-app .fc-svg-label {
    fill: var(--ak-text);
    font-size: 13px;
}

.fraction-landing-app .fc-svg-label--result {
    fill: var(--ak-success);
    font-weight: 700;
}

.fraction-landing-app .fc-unit {
    fill: var(--ak-grid);
    stroke: var(--ak-border);
}

.fraction-landing-app .fc-fill {
    fill: var(--ak-accent);
    opacity: 0.85;
}

.fraction-landing-app .fc-fill--result {
    fill: var(--ak-series-3);
}

.fraction-landing-app .fc-fill--neg {
    fill: var(--ak-danger);
}

.fraction-landing-app .fc-seg {
    stroke: var(--ak-field);
    stroke-width: 1.5;
}

.fraction-landing-app .fc-svg--pies .fc-seg {
    stroke-width: 1.4;
}

.fraction-landing-app .fc-pie-rim {
    fill: none;
    stroke: var(--ak-border);
    stroke-width: 1.2;
}

.fraction-landing-app .fc-axis {
    stroke: var(--ak-muted);
    stroke-width: 2;
    stroke-linecap: round;
}

.fraction-landing-app .fc-tick {
    stroke: var(--ak-muted);
    stroke-width: 1.6;
}

.fraction-landing-app .fc-tick--minor {
    stroke-width: 1;
    opacity: 0.6;
}

.fraction-landing-app .fc-svg-tick {
    fill: var(--ak-muted);
    font-size: 12px;
}

.fraction-landing-app .fc-lead {
    stroke: var(--ak-border);
    stroke-dasharray: 2 2;
}

.fraction-landing-app .fc-dot {
    fill: var(--ak-accent);
    stroke: var(--ak-field);
    stroke-width: 2;
}

.fraction-landing-app .fc-dot--result {
    fill: var(--ak-series-3);
}

.fraction-landing-app .fc-dot--neg {
    fill: var(--ak-danger);
}

/* --- Phones: the fractions and the operator stay on one row also at 320px ----------------------------------------- */

@media (max-width: 640px) {
    .fraction-landing-app .fc-inputs {
        flex-wrap: nowrap;
        gap: 0.4rem;
    }

    .fraction-landing-app .fc-operand {
        padding: 0.45rem 0.5rem 0.5rem;
    }

    .fraction-landing-app .fc-operand .ak-subtitle {
        font-size: 0.78rem;
        line-height: 1.2;
    }

    .fraction-landing-app .fc-sign {
        min-width: 1.65rem;
        min-height: 1.55rem;
    }

    .fraction-landing-app .fc-frac-input {
        gap: 0.3rem;
    }

    .fraction-landing-app .fc-frac-input .fc-field {
        width: 2.9rem;
        height: 2.3rem;
        font-size: 1.05rem;
    }

    .fraction-landing-app .fc-frac-input .fc-whole {
        width: 2.4rem;
        height: 2.8rem;
        font-size: 1.3rem;
    }

    .fraction-landing-app .fc-op-buttons {
        grid-template-columns: repeat(2, 2rem);
        gap: 0.3rem;
    }

    .fraction-landing-app .fc-op-btn {
        width: 2rem;
        height: 2rem;
        font-size: 1.1rem;
    }

    .fraction-landing-app .fc-equation {
        font-size: 1.1rem;
    }

    .fraction-landing-app .fc-result-value {
        min-height: 2.9rem;
    }

    .fraction-landing-app .fc-compare-pretty {
        font-size: 1.6rem;
    }

    .fraction-landing-app .fc-steps li {
        padding-inline-start: 2.2rem;
        font-size: 0.9rem;
    }
}