/* calculator.css
 *
 * Common style for online technical calculators.
 * (c) 2026 Takayuki HOSODA
 */

.calculator {

    /* ---- Customizable parameters ---- */

    --calculator-width:   48rem;
    --label-width:         8rem;
    --input-width:         8rem;
    --input-width-small:   5rem;
    --input-width-large:  12rem;
    --output-width:        8rem;
    --output-width-small:  8rem;
    --output-width-large: 12rem;
    --row-gap:            0.5em;
    --column-gap:         0.5em;

    /* ---- Layout ---- */
    max-width: var(--calculator-width);
    margin: 1em 0;
}

/* ------------------------------------------------------------------ */

.calculator fieldset {
    margin: 0;
    padding: 0.5em;
    border: 1px solid #08a;
    border-radius: 4px;
    background: #f8f9ff;
}

.calculator legend { padding: 0 .5em; font-weight: bold; }

/* ------------------------------------------------------------------ */

.calculator .calc-row {

    display: grid;
    grid-template-columns: var(--label-width) 1fr;

    align-items: center;

    row-gap: var(--row-gap);
    column-gap: var(--column-gap);

    margin: .5em;
}

.calculator .calc-inline { display: flex; align-items: center; flex-wrap: wrap; gap: .4em; }

/* ------------------------------------------------------------------ */

.calculator label { font-weight: bold; }

/* ------------------------------------------------------------------ */
/* Common appearance of form controls                                 */

.calculator input, .calculator select, .calculator button { font: inherit; box-sizing: border-box; }

/* ------------------------------------------------------------------ */
/* Text boxes                                                         */

.calculator input[type="text"],
.calculator input:not([type]) {
    padding: .2em .3em;
    border: 1px solid #888;
    border-radius: 3px;
    background: #fff;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.calculator input[readonly] { background: #f2f2f2; color: inherit; }

/* ------------------------------------------------------------------ */
/* Select */

.calculator select { padding: .15em .35em; }

/* ------------------------------------------------------------------ */
/* Button */

.calculator button { padding: 0.2em 1.0em; border: 1px solid #a0b; border-radius: 3px; background: #eee; cursor: pointer; }

/* ------------------------------------------------------------------ */
.calc-input { width: var(--input-width); }
.calc-output { width: var(--output-width); }
.calc-op { display: inline-block; width: 1.5em; text-align: center; }
.calc-unit { width: 2em; white-space: nowrap; }

/* ------------------------------------------------------------------ */
.calculator .calc-note { margin-top: .8em; font-size: 90%; color: #555; }
.calculator .hidden { display: none; }

/* ------------------------------------------------------------------ */

@media (max-width: 700px) {

    .calculator .calc-row { grid-template-columns: 1fr; }
}