/* Shared styles for the Pharmacokinetics site.
   Linked after each page's inline <style> block so these rules win.

   The canvases and charts are painted in JS and cannot read these custom
   properties; theme.js mirrors the palette below. Keep the two in step. */

:root {
    /* Lets the browser render form controls, scrollbars and the like to
       match the active theme. */
    color-scheme: light dark;

    --bg: #ffffff;
    --bg-alt: #f1f1f1;
    --text: #1f2328;
    --border: #cccccc;

    --link: #0645ad;
    --link-visited: #551a8b;

    --nav-bg: #333333;
    --nav-text: #ffffff;
    --nav-hover-bg: #dddddd;
    --nav-hover-text: #000000;
    --nav-current-bg: #1f1f1f;
    --nav-current-accent: #4a9eff;
    --nav-divider: #4a4a4a;

    --control-hover: #dddddd;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16181d;
        --bg-alt: #1f2229;
        --text: #e6e4df;
        --border: #363a43;

        --link: #7cb7ff;
        --link-visited: #c4a7ff;

        --nav-bg: #0f1115;
        --nav-hover-bg: #2c313a;
        --nav-hover-text: #ffffff;
        --nav-current-bg: #262b33;
        --nav-divider: #2c313a;

        --control-hover: #2c313a;
    }
}

/* ---- Page ------------------------------------------------------------- */

body {
    background-color: var(--bg);
    color: var(--text);
}

a {
    color: var(--link);
}

a:visited {
    color: var(--link-visited);
}

/* The pages set these to hardcoded white / #f1f1f1 inline. */
.main {
    background-color: var(--bg);

    /* The pages size this 95vw. That is viewport-relative, so browser zoom
       never changes the plot's physical size: Cmd-minus grows the CSS
       viewport by the same factor it shrinks everything by, and the two
       cancel. Text is in px and does shrink, so the plot appeared to ignore
       zoom entirely. A px cap is zoom-relative and fixes that; it also stops
       the plot stretching edge to edge on very wide monitors. */
    max-width: 1200px;
}

.side {
    background-color: var(--bg-alt);
}

canvas {
    background-color: var(--bg);
}

/* ---- CSHT controls ---------------------------------------------------- */

.csht-plot-label {
    font-weight: 700;
}

.csht-note {
    margin: 6px 0 14px;
    font-style: italic;
    opacity: 0.75;
}

/* ---- Disclosure boxes (Compartment Models) ---------------------------- */
/* #valuesBox holds the model type + its values; #patientBox holds the
   patient covariates; #notesBox holds explanatory notes. All look and
   behave the same. */

#valuesBox,
#patientBox,
#notesBox {
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--bg-alt);
}

#patientBox {
    margin-top: 10px;
}

#notesBox {
    margin: 10px 0;
    max-width: 70em;
}

#notesBody {
    padding: 6px 14px 12px;
    font-size: 0.9em;
}

#valuesBox > summary,
#patientBox > summary,
#notesBox > summary {
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 700;
    -webkit-user-select: none;
    user-select: none;
}

#valuesBox > summary:hover,
#patientBox > summary:hover,
#notesBox > summary:hover {
    background-color: var(--control-hover);
}

#valuesBox > summary:focus-visible,
#patientBox > summary:focus-visible,
#notesBox > summary:focus-visible {
    outline: 2px solid var(--nav-current-accent);
    outline-offset: -2px;
}

#patientForm {
    padding: 6px 12px 12px;
}

/* The box already draws the outline. */
#valuesBox .tab,
#valuesBox .tabcontent {
    border: 0;
}

/* ---- Tabs (Compartment Models) ---------------------------------------- */

.tab {
    background-color: var(--bg-alt);
    border-color: var(--border);
}

.tab button {
    color: var(--text);
}

.tab button:hover {
    background-color: var(--control-hover);
}

/* changeModelType() has always set .active but nothing ever styled it, so the
   selected type was unmarked. The box title says "Model Type" rather than
   naming the choice, so this is the only thing identifying it. */
.tab button.active {
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--nav-current-accent);
}

.tabcontent {
    border-color: var(--border);
}

/* ---- Navigation bar --------------------------------------------------- */

.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--nav-bg);
}

.navbar a {
    color: var(--nav-text);
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
}

.navbar a:hover {
    background-color: var(--nav-hover-bg);
    color: var(--nav-hover-text);
}

/* The current page is the one link with no href. */
.navbar a:not([href]) {
    background-color: var(--nav-current-bg);
    box-shadow: inset 0 -3px 0 var(--nav-current-accent);
    cursor: default;
}

/* The checkbox drives the menu; it is visually hidden but stays focusable. */
.nav-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nav-toggle-label {
    display: none;
}

/* ---- Phones: collapse the nav behind a hamburger ---------------------- */

@media (max-width: 768px) {
    /* The pages size .main/.side in vw and then add content-box padding on
       top, which overflows the viewport and leaves the nav short of the
       right edge.

       These are flex items inside .row, so width must be 100% rather than
       auto: auto makes them shrink to fit their contents, and since the
       contents are a canvas that Chart.js sizes from its parent, the graph
       and its container settle at the canvas default of 300px. */
    .main,
    .side {
        box-sizing: border-box;
        width: 100%;
    }

    /* ---- Compartment Models: tab strip becomes a menu ----------------
       Five tabs across will not fit a phone; they wrap into a ragged
       block. Inside the disclosure box they become a plain vertical list,
       with the box title showing the current choice. */
    #valuesBox > summary,
    #patientBox > summary,
    #notesBox > summary {
        padding: 14px;
        min-height: 44px;          /* thumb-sized */
        box-sizing: border-box;
        /* Not display:flex - that suppresses the disclosure triangle. */
        display: list-item;
    }

    .tab {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .tab button {
        float: none;
        width: 100%;
        box-sizing: border-box;
        min-height: 44px;
        padding: 12px 14px;
        text-align: left;
        font-size: 1rem;
        border-bottom: 1px solid var(--border);
    }

    .tab button:last-child {
        border-bottom: 0;
    }

    /* A left bar reads better than an underline in a vertical menu. */
    .tab button.active {
        box-shadow: inset 3px 0 0 var(--nav-current-accent);
    }

    /* ---- Compartment Models forms -----------------------------------
       Each .row alternates a .columnLabel and a .column, sized 6% and 15%.
       At 375px that makes a label cell ~21px wide, so "Height"/"Weight"
       spill straight over the next field. Relay them as a label/field grid:
       the cells alternate, so they land in the right columns unaided.
       Scoped to the two boxes - .row is also the page's side/main layout
       row, which must stay a flex row. */
    #valuesBox .row,
    #patientBox .row {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 10px;
        row-gap: 10px;
        align-items: center;
    }

    #valuesBox .columnLabel,
    #valuesBox .column,
    #patientBox .columnLabel,
    #patientBox .column {
        float: none;
        width: auto;
    }

    /* Keep each input next to its unit ("(min-1)"). */
    #valuesBox .column,
    #patientBox .column {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    /* The sex radios have no label cell of their own, which would leave them
       stranded in the label column. Give them the full width. */
    #valuesBox .column:has(input[type="radio"]),
    #patientBox .column:has(input[type="radio"]) {
        grid-column: 1 / -1;
    }

    #valuesBox input.numbers,
    #patientBox input.numbers {
        width: 100%;
        max-width: 7em;
    }

    #valuesBox input.expressions {
        width: 100%;
    }

    /* Row spacing is the grid's job now; these only add ragged gaps. */
    #valuesBox form br,
    #patientBox form br {
        display: none;
    }

    /* iOS Safari zooms the page when focusing an input whose text is under
       16px, and never zooms back out. */
    #valuesBox input,
    #patientBox input,
    .side select {
        font-size: 16px;
    }

    .nav-toggle-label {
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        width: 100%;
        padding: 14px 20px;
        color: var(--nav-text);
        font: 700 1.05rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    .nav-toggle-label .nav-toggle-icon {
        font-size: 1.4rem;
    }

    .nav-toggle:focus-visible + .nav-toggle-label {
        outline: 2px solid var(--nav-text);
        outline-offset: -2px;
    }

    .navbar a {
        display: none;
        box-sizing: border-box;
        width: 100%;
        padding: 14px 20px;
        text-align: left;
        border-top: 1px solid var(--nav-divider);
    }

    .nav-toggle:checked ~ a {
        display: block;
    }
}