/* =========================================================
   ToolZen Hub
   Percentage Calculator

   Only what the shared calculator styles do not already provide:
   the three core fields in a row, the form-level note, the
   optional second change and the notes. Buttons, focus, fields and
   headings come from the shared layer (components/buttons.css,
   base/accessibility.css, calculator-base.css, calculator-form.css).
   Loaded after calculator-responsive.css.
========================================================= */


/* =========================================================
   FORM
   The three core fields sit side by side and stack on a narrow
   screen. The note under them asks the visitor to clear a field
   when all three are filled; it is guidance, not an error, so it
   is neutral and starts with words.
========================================================= */

.percentage-core {

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

}

.percentage-form-note {

    margin: 12px 0 0;
    padding: 10px 14px;

    border: 1px solid var(--color-slate-200);
    border-radius: 10px;

    background: #f9fafb;

    color: var(--color-ink);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;

}

.percentage-form-note[hidden] {

    display: none;

}

/* the optional second change sits under the main fields, set apart by a rule and a heading */

.percentage-more {

    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid var(--color-slate-200);

}

.percentage-more__title {

    margin: 0 0 4px;

    color: var(--color-ink);

    font-size: 16px;
    font-weight: 750;
    line-height: 1.4;

}

.percentage-more__text {

    margin: 0 0 16px;

    color: var(--color-ink-muted);

    font-size: 13px;
    line-height: 1.5;

}

.percentage-more .calculator-form__grid {

    grid-template-columns:
        minmax(0, 1fr);

    max-width: 320px;

}

.percentage-more .calculator-form__input:disabled {

    background: #f2f4f7;

    cursor: not-allowed;

}


/* =========================================================
   RESULTS
========================================================= */

.percentage-subtitle {

    margin: 28px 0 14px;
    padding-top: 20px;

    border-top: 1px solid var(--color-slate-200);

    color: var(--color-ink);

    font-size: 16px;
    font-weight: 750;
    line-height: 1.4;

}

#percentage-results .calculator-results__summary p {

    margin: 0 0 8px;

}

#percentage-results .calculator-results__summary p:last-child {

    margin-bottom: 0;

}

.percentage-worked {

    color: var(--color-ink-muted);

    font-size: 13px;

    overflow-wrap: anywhere;

}

.percentage-note {

    margin: 10px 0 0;
    padding: 12px 14px;

    border: 1px solid var(--color-slate-200);
    border-radius: 10px;

    background: #f9fafb;

    color: #344054;

    font-size: 13px;
    line-height: 1.6;

}

.percentage-note strong {

    color: var(--color-ink);

}


/* =========================================================
   NARROW SCREENS
========================================================= */

@media (max-width: 820px) {

    .percentage-core {

        grid-template-columns:
            minmax(0, 1fr);

    }

}


/* =========================================================
   TEXT FOR SCREEN READERS ONLY
========================================================= */

.percentage-sr-only {

    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}