/* RECATOOLS — Ovulation & Fertile Window Calculator (RT-HLT-059)
 *
 * Result surfaces here are LIGHT (#eef2ff / #fafaf9), mirroring the
 * medical-clinical tools. The --rt-result-* tokens are for the navy result
 * boxes and must NOT be used on these panels — see docs/contrast-conventions.md
 * and scripts/contrast-gate/check-contrast.cjs.
 */

.ov-form { display: flex; flex-direction: column; gap: .9rem; }

.ov-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.ov-field { display: flex; flex-direction: column; gap: .3rem; }
.ov-field label { font-size: .78rem; font-weight: 700; color: #1a1814; }
.ov-field input[type="date"],
.ov-field input[type="number"] {
    padding: .55rem .7rem; font-size: .95rem; font-family: inherit; color: #1a1814;
    background: #fff; border: 1px solid #ebebeb; border-radius: 8px; min-width: 0;
}
.ov-field input:focus-visible { outline: 2px solid #4338ca; outline-offset: 1px; border-color: #c7d2fe; }
.ov-inline { display: flex; align-items: center; gap: .45rem; }
.ov-inline input { width: 6.5rem; }
.ov-unit { font-size: .8rem; color: #6b6760; }
.ov-hint { font-size: .74rem; line-height: 1.5; color: #6b6760; }

.ov-advanced { border: 1px solid #ebebeb; border-radius: 10px; background: #fafaf9; padding: .7rem .85rem; }
.ov-advanced > summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: #4338ca; }
.ov-advanced[open] > summary { margin-bottom: .8rem; }

.ov-calc-btn {
    padding: .7rem 1.1rem; font-size: .95rem; font-weight: 700; font-family: inherit;
    color: #fff; background: #e8622a; border: 0; border-radius: 999px; cursor: pointer;
}
.ov-calc-btn:hover { background: #d4551f; }
.ov-calc-btn:focus-visible { outline: 2px solid #1a1814; outline-offset: 2px; }

.ov-error {
    padding: .7rem .9rem; font-size: .82rem; line-height: 1.6; color: #7f1d1d;
    background: #fef2f2; border: 1px solid #fecaca; border-left: 3px solid #dc2626; border-radius: 0 8px 8px 0;
}

#ov-results { display: flex; flex-direction: column; gap: .9rem; }

/* Safety notice — sits ABOVE the result on purpose. Amber, not grey: this is
   the one message on the page that must not read as boilerplate. */
.ov-notcontra {
    padding: .85rem 1rem; font-size: .82rem; line-height: 1.65; color: #78350f;
    background: #fef9c3; border: 1px solid #fde047; border-left: 4px solid #d97706;
    border-radius: 0 8px 8px 0;
}
.ov-notcontra strong { display: block; margin-bottom: .2rem; font-size: .88rem; color: #713f12; }

.ov-headline { padding: 1rem 1.1rem; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px; text-align: center; }
.ov-headline-lbl { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #4338ca; }
.ov-headline-val { font-size: 1.7rem; font-weight: 800; font-family: 'IBM Plex Serif', serif; color: #312e81; line-height: 1.15; margin-top: .15rem; }
.ov-headline-sub { font-size: .8rem; color: #475569; margin-top: .3rem; }

.ov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ov-card { padding: .8rem .55rem; background: #fafaf9; border: 1px solid #ebebeb; border-radius: 10px; text-align: center; }
.ov-card-key { background: #eef2ff; border-color: #c7d2fe; }
.ov-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #6b6760; }
.ov-val { font-size: 1.02rem; font-weight: 800; font-family: 'IBM Plex Serif', serif; color: #312e81; margin-top: .2rem; line-height: 1.25; }
.ov-sub { font-size: .7rem; color: #6b6760; margin-top: .25rem; line-height: 1.45; }

.ov-notes { padding: .75rem 1rem; background: #fffbeb; border-left: 3px solid #d97706; border-radius: 0 6px 6px 0; }
.ov-notes ul { margin: 0; padding-left: 1.1rem; }
.ov-notes li { font-size: .82rem; line-height: 1.6; color: #78350f; }
.ov-notes li + li { margin-top: .4rem; }

.ov-textbook { padding: .75rem 1rem; background: #f8fafc; border-left: 3px solid #64748b; border-radius: 0 6px 6px 0; }
.ov-textbook p { margin: 0; font-size: .82rem; line-height: 1.6; color: #1a1814; }

.ov-evidence { padding: .95rem 1.1rem; background: #fafaf9; border: 1px solid #ebebeb; border-radius: 10px; }
.ov-evidence h3 { margin: 0 0 .5rem; font-size: .92rem; font-weight: 800; color: #1a1814; }
.ov-evidence p { margin: 0 0 .6rem; font-size: .82rem; line-height: 1.7; color: #1a1814; }
.ov-evidence p:last-child { margin-bottom: 0; }
.ov-evidence .ov-privacy { padding-top: .6rem; border-top: 1px solid #ebebeb; color: #475569; }

@media (max-width: 560px) {
    .ov-grid { grid-template-columns: 1fr; }
    .ov-headline-val { font-size: 1.35rem; }
}