/* ============================================================
   Pediatric Critical Care Calculators — calculator.css
   Shared styles for all calculator pages.
   ============================================================ */

/* Ensure form controls inherit the page font rather than
   defaulting to the browser's system UI font               */
input, button, select, textarea {
    font-family: 'Source Sans 3', Arial, sans-serif;
}

/* ---- Calculator form card ---- */
.calc-form {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    padding: 24px 28px;
    max-width: 460px;
    margin-bottom: 28px;
}

/* ---- Input rows: fixed columns so all boxes align vertically ----
   Col 1: label (fixed 200px)
   Col 2: number input (fixed 90px)
   Col 3: unit label (fixed 60px)                                  */
.field-row {
    display: grid;
    grid-template-columns: 200px 90px 60px;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.field-row label {
    font-size: 14px;
    font-weight: normal;
    color: #333;
}

.field-row input[type="number"] {
    width: 90px;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: right;
}

.field-row input[type="number"]:focus {
    outline: none;
    border-color: #c05621;
    box-shadow: 0 0 0 2px rgba(192,86,33,0.15);
}

.field-row .unit {
    font-size: 13px;
    font-weight: normal;
    color: #888;
    white-space: nowrap;
}

input::placeholder {
  opacity: 0.5; /* Makes the text 50% transparent */
}

/* ---- Buttons: centered ---- */
.btn-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 0;
}

.btn-calc {
    background: #c05621;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
}

.btn-calc:hover { background: #a04010; }

.btn-clear {
    background: #fff;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
}

.btn-clear:hover { background: #f5f5f5; }

/* ---- Divider between inputs and result ---- */
.result-divider {
    border: none;
    border-top: 1px solid #e8e8e8;
    margin: 18px 0 14px;
}

/* ---- Result row: same fixed columns as .field-row ---- */
.result-row {
    display: grid;
    grid-template-columns: 200px 90px 60px;
    align-items: center;
    gap: 10px;
}

.result-row label {
    font-size: 14px;
    font-weight: bold;
    color: #b31b1b;
}

.result-row input[type="text"] {
    width: 90px;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: bold;
    color: #b31b1b;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    background: #fdf5f5;
    text-align: right;
}

.result-row .unit {
    font-size: 13px;
    font-weight: normal;
    color: #888;
    white-space: nowrap;
}

/* ---- Inline error message ---- */
.calc-error {
    display: none;
    font-size: 13px;
    font-weight: normal;
    color: #c0392b;
    background: #fef0f0;
    border: 1px solid #f5c6c6;
    border-radius: 4px;
    padding: 7px 12px;
    margin-top: 12px;
}

/* ---- Explanatory notes below the form ---- */
.calc-notes {
    max-width: 560px;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.7;
    color: #444;
}

.calc-notes p { margin: 0 0 12px; }

.calc-notes .formula {
    font-family: Georgia, serif;
    text-align: center;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 14px 0;
    font-size: 14px;
    font-weight: normal;
}

.calc-notes a {
    color: #b31b1b;
    text-decoration: none;
}

.calc-notes a:hover { text-decoration: underline; }

/* ---- Intro description paragraph (above the form) ---- */
.calc-description {
    font-size: 15px;
    font-weight: normal;
    line-height: 1.6;
    color: #444;
    margin-bottom: 18px;
    max-width: 560px;
}

/* ---- References section ---- */
.calc-references {
    max-width: 560px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid #e8e8e8;
}

.calc-references h2 {
    font-size: 14px;
    font-weight: 600;
    color: #b31b1b;
    margin-bottom: 10px;
    font-family: 'Source Sans 3', Arial, sans-serif;
}

.calc-references ol {
    margin: 0;
    padding-left: 20px;
}

.calc-references li {
    font-size: 13px;
    font-weight: normal;
    color: #555;
    line-height: 1.6;
    margin-bottom: 6px;
}

/* ---- Created / revised dateline ---- */
.created {
    font-size: 12px;
    font-weight: normal;
    color: #aaa;
    margin-top: 24px;
}