/* ****************************************************************************
 * Galaxy Calculator - application styles
 *
 * Companion to pico.min.css. Pico styles the semantic HTML (tables, forms,
 * inputs, buttons, headings); this file holds only the pieces Pico has no
 * opinion about: the help and image popups, the thumbnails, and a few
 * typography helpers carried over from 1doc2rule.css.
 *
 * Colors come from Pico's custom properties rather than being hard-coded, so
 * every rule below follows the light and dark theme automatically.
 */

/* ****************************************************************************
 * Readable measure. The pages put their content straight in the body rather
 * than inside a wrapper, so the width cap goes here; without it text runs the
 * full width of a desktop monitor.
 */
body {
    max-width: 75rem;
    margin: 0 auto;
    padding: var(--pico-spacing, 1rem);
}

/* ****************************************************************************
 * Page container. No width is set, so Pico's responsive container governs.
 */
.container {
    display: block;
    margin: var(--pico-spacing, 0.5rem) 0;
    width: auto;
}

/* ****************************************************************************
 * Table wrapper. The track table can run to well over a thousand rows and is
 * far wider than a phone, so it scrolls inside its own box instead of forcing
 * the whole page sideways.
 */
.tableContainer {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* ****************************************************************************
 * ridge - table borders, carried over so existing markup keeps its grid.
 */
table.ridge,
thead.ridge,
tbody.ridge,
tfoot.ridge,
tr.ridge,
th.ridge,
td.ridge {
    border: 1px solid var(--pico-table-border-color);
    border-collapse: collapse;
}

/* ****************************************************************************
 * Table alternate row colors.
 */
.oddRow {
    background-color: transparent;
}

.evenRow {
    background-color: var(--pico-table-row-stripped-background-color);
}

/* ****************************************************************************
 * Typography helpers.
 */
.medium-font {
    font-size: 1rem;
}

.bold-text {
    font-weight: bold;
}

.text_indent {
    text-align: left;
    text-indent: 1.33em;
}

.monospace-paragraph {
    font-family: var(--pico-font-family-monospace);
    line-height: 1.5;
    color: var(--pico-color);
    margin: var(--pico-spacing, 1rem) 0;
}

.text_code {
    font-family: var(--pico-font-family-monospace);
    font-style: italic;
    font-weight: 300;
}

/* ****************************************************************************
 * Form controls. Fluid up to a comfortable reading width, so narrow screens
 * are not forced to scroll to reach an input.
 *
 * The width is definite rather than a percentage with a cap: a percentage
 * leaves the table free to decide how much room the input gets, and the widest
 * value on the page - the Galaxy Radius, 238229441887838.4639953874 - came out
 * clipped. It is in rem rather than pixels because Pico scales the root font
 * size with the viewport, so a pixel width that fits on a laptop clips the same
 * text on a large monitor, where the 1.2rem input font is bigger. 20rem is what
 * the Galaxy Radius needs, with a character or so to spare.
 */
:root {
    --gc-input-width: 20rem;
}

.wide-input {
    width: var(--gc-input-width);
    max-width: 100%;
}

.buttonStyle {
    background-color: var(--pico-primary);
    color: var(--pico-primary-inverse);
    border-color: var(--pico-primary);
    cursor: pointer;
}

/* ****************************************************************************
 * boxit container - double-ruled inline box.
 */
.boxit_container {
    border: 0.3em double var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    margin: 0.3em;
    padding: 0.1em 0.3em;
    display: inline-block;
    max-width: 100%;
}

/* ****************************************************************************
 * Thumbnails. Fluid, capped so they do not balloon on a wide monitor.
 */
.image-container {
    width: 100%;
    max-width: 333px;
    overflow: hidden;
}

.thumbnail {
    width: 100%;
    height: auto;
    cursor: pointer;
}

/* ****************************************************************************
 * Help popup. Shown by showHelp() setting display to block, so the default
 * here stays none and carries no !important.
 */
.popupHelp {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    max-width: 34rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background-color: var(--pico-card-background-color);
    color: var(--pico-color);
    padding: 1.25rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-card-box-shadow);
    z-index: 1000;
}

.popupHelp-close {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--pico-muted-color);
}

.popupHelp-close:hover {
    color: var(--pico-color);
}

/* ****************************************************************************
 * Image popup. showPopup() sets display to block and sizes .popupImage to the
 * viewport, so the rules here only need to cover the resting state.
 */
.popupContainer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    overflow: auto;
    cursor: pointer;
}

.popupImage {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ****************************************************************************
 * Narrow screens. Tables built for a desktop get their own scroll box rather
 * than overflowing the page.
 */
@media (max-width: 40rem) {
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .wide-input {
        max-width: 100%;
    }
}

/* ****************************************************************************
 * Form controls, tightened. Pico's defaults are sized for a full width form,
 * which leaves the calculators looking spread out, so the inputs carry less
 * padding and the buttons are a little smaller.
 */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
select {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

button {
    padding: 0.6rem;
    font-size: 1.1rem;
}

/* ****************************************************************************
 * Calculator forms, collapsed to their content.
 *
 * Pico stretches both tables and text inputs to 100%, so left alone each form
 * runs the full width of the page. Each form is a flex column sized to
 * fit-content instead: the width comes from the widest table inside it - which
 * is the sum of what that table's columns actually need - and every child is
 * then stretched back out to that one width, so the two tables in the Orbit
 * form line up column for column rather than each ending somewhere different.
 *
 * The forms keep class tableContainer, so anything still too wide for a phone
 * scrolls in its own box rather than pushing the page sideways.
 */
#galaxyCalculatorForm,
#orbitCalculatorForm {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
}

/* Percentage widths cannot be resolved while the form is measuring itself, so
 * the browser falls back to each table's content width for the measurement and
 * only then resolves the 100% against the collapsed form. That is what makes
 * the narrower table match the wider one.
 */
#galaxyCalculatorForm table,
#orbitCalculatorForm table {
    width: 100%;
}

/* The Calculate buttons are input[type=button], which Pico sizes at 100%. Left
 * that way they would run the whole width of the collapsed form.
 */
#galaxyCalculatorForm .buttonStyle,
#orbitCalculatorForm .buttonStyle {
    width: auto;
    align-self: flex-start;
}

/* The value column is pinned to one input plus the cell padding either side.
 * Matched on a class, not on a :has() selector, so it works in every browser
 * rather than only in Chrome 105, Safari 15.4 and Firefox 121 and later.
 * Without it the table treats an input as something it may shrink, and the
 * Galaxy Radius ends up clipped; with it the label column takes up whatever
 * slack is left. In the Orbit form that is also what makes the two tables
 * split at the same place and line up column for column.
 *
 * The cells are matched on holding an input, so the Help column in the Galaxy
 * form and the formula rows that span both columns are left alone.
 */
#galaxyCalculatorForm .valueCell,
#orbitCalculatorForm .valueCell {
    width: calc(var(--gc-input-width) + 2 * var(--pico-spacing, 1rem));
}

/* The drop-down is a full width form control by default, and the prose in the
 * Orbit form is a single long line until it wraps. Both sit in the same flex
 * column as the tables, so both are capped: otherwise the length of a sentence
 * would decide the width of the form instead of the columns.
 */
#orbitCalculatorForm select {
    width: auto;
    max-width: 100%;
}

#galaxyCalculatorForm p,
#orbitCalculatorForm p {
    max-width: 34rem;
}

/* ****************************************************************************
 * Phones. Two columns will not fit: a label wide enough to read plus an input
 * wide enough for 238,229,441,887,838.4639953874 is more than the screen has.
 * So the rows stop being rows. Each one becomes a flex line with the label
 * across the top and the value under it, which gives the input the full width
 * of the screen instead of whatever is left over. The Help button rides beside
 * the input rather than taking a line of its own.
 */
@media (max-width: 40rem) {
    #galaxyCalculatorForm table,
    #orbitCalculatorForm table,
    #galaxyCalculatorForm tbody,
    #orbitCalculatorForm tbody {
        display: block;
        width: 100%;
        overflow-x: visible;
    }

    #galaxyCalculatorForm tr,
    #orbitCalculatorForm tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0;
    }

    #galaxyCalculatorForm td,
    #orbitCalculatorForm td {
        display: block;
        border: 0;
        /* the desktop cell padding is what pushes the Help button onto a line
         * of its own here, so only the vertical part of it survives */
        padding: 0.15rem 0;
    }

    /* the label takes its own line */
    #galaxyCalculatorForm tr > td:first-child,
    #orbitCalculatorForm tr > td:first-child {
        flex: 1 0 100%;
    }

    /* the value takes the rest of the line, the Help button sits beside it */
    #galaxyCalculatorForm .valueCell,
    #orbitCalculatorForm .valueCell {
        /* 18rem is what the longest value needs. Asking for it as the flex
         * basis means the Help button rides alongside when the screen can
         * carry both, and drops to its own line when it cannot, rather than
         * squeezing the value until it clips. */
        flex: 1 1 18rem;
        width: auto;
        /* it must not shrink below what the value needs, or flex-wrap never
         * fires and the Help button squeezes the number instead of moving */
        min-width: min(18rem, 100%);
    }

    #galaxyCalculatorForm .helpCell {
        flex: 0 0 auto;
    }

    /* the input carries its own bottom margin on a desktop, which here would
     * push the Help button out of line with it */
    #galaxyCalculatorForm .wide-input,
    #orbitCalculatorForm .wide-input {
        margin-bottom: 0;
    }

    .wide-input {
        width: 100%;
        max-width: 100%;
    }
}

/* ****************************************************************************
 * Small phones. Below 30rem even a full width input cannot hold
 * 238,229,441,887,838.4639953874 at the larger form font, so the inputs drop
 * to the body size. That is the last thing to give: the value stays readable
 * and stays whole rather than scrolling inside its own box.
 */
@media (max-width: 30rem) {
    #galaxyCalculatorForm .wide-input,
    #orbitCalculatorForm .wide-input {
        font-size: 1rem;
    }
}

/* ***************************** End of File ******************************* */