/* Styles for the Tanabe-Sugano page.
 *
 * The page sits inside the site's Foundation 6.2 layout, so this only covers
 * what Foundation does not: the plot box, the status line under it, and a
 * few tweaks to make the parameter inputs sit tidily two to a row. */

.ts-plot {
    width: 100%;
    aspect-ratio: 7 / 6;
}

.ts-placeholder {
    padding-top: 2rem;
    text-align: center;
    color: #8a8a8a;
}

.ts-status {
    min-height: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
    color: #8a8a8a;
    font-size: 0.85rem;
}

.ts-status.error {
    color: #cc4b37;
}

.ts-heading {
    text-align: center;
    margin-bottom: 0.75rem;
}

/* Foundation's input-group is a table, so the field stretches on its own;
   this just centres the values the way the old site had them. */
.ts-centre {
    text-align: center;
}

/* Bare number inputs are wider than the label allows on narrow columns. */
.input-group .ts-centre {
    min-width: 3rem;
}

/* Foundation gives inputs a 1rem bottom margin of their own, which doubles
   up inside an input-group that already has one. */
.input-group .input-group-field {
    margin-bottom: 0;
}

.ts-checks label {
    display: inline-block;
    margin-right: 1.25rem;
    line-height: 1.8;
}

.ts-checks input[type="checkbox"] {
    margin-right: 0.35rem;
}

/* An out-of-range value is flagged on the field itself. */
.is-invalid {
    border-color: #cc4b37;
    background-color: #fdf2f1;
}

@media screen and (max-width: 39.9375em) {
    .ts-plot {
        aspect-ratio: 1 / 1;
    }
}