/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Due Date Calculator — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Date validation error ───────────────────────────────────────────────── */
.ddc-error {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    padding:       0.625rem 0.875rem;
    background:    #fff5f5;
    border:        1px solid #fecaca;
    border-radius: 8px;
    color:         #c53030;
    font-size:     0.875rem;
    font-weight:   500;
    margin-bottom: 1rem;
}
.ddc-error[hidden] { display: none; }

/* ── Mode tabs ────────────────────────────────────────────────────────────── */
.ddc-tabs {
    display:       flex;
    gap:           0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
}

.ddc-tab {
    padding:         0.625rem 1.25rem;
    font-size:       0.9375rem;
    font-weight:     600;
    color:           var(--muted);
    background:      none;
    border:          none;
    border-bottom:   2.5px solid transparent;
    cursor:          pointer;
    margin-bottom:   -2px;
    transition:      color 0.15s, border-color 0.15s;
}
.ddc-tab:hover { color: var(--text); }
.ddc-tab.active {
    color:        var(--accent);
    border-bottom-color: var(--accent);
}
.ddc-tab:focus-visible {
    outline:       2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Form fields ──────────────────────────────────────────────────────────── */
.ddc-field-group {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    margin-bottom:  0.5rem;
}

.ddc-field {
    display:        flex;
    flex-direction: column;
    gap:            0.375rem;
}

.ddc-field label {
    font-size:      0.8125rem;
    font-weight:    700;
    color:          var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ddc-input,
.ddc-select {
    padding:       0.75rem 1rem;
    border:        1.5px solid var(--border);
    border-radius: 8px;
    font-size:     1rem;
    font-family:   'IBM Plex Sans', sans-serif;
    font-weight:   500;
    color:         var(--text);
    background:    var(--card-bg, #ffffff);
    transition:    border-color 0.15s;
    box-sizing:    border-box;
    width:         100%;
}
.ddc-input:focus,
.ddc-select:focus {
    outline:      none;
    border-color: var(--accent);
}

.ddc-select {
    appearance:          none;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6760' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 0.875rem center;
    padding-right:       2.5rem;
    cursor:              pointer;
}

/* ── Results panel ────────────────────────────────────────────────────────── */
.ddc-results {
    margin-top:    1.75rem;
    border-top:    2px solid var(--border);
    padding-top:   1.5rem;
}

/* Large due date display */
.ddc-due-date-block {
    text-align:    center;
    margin-bottom: 1.5rem;
}

.ddc-due-date-eyebrow {
    font-size:      0.75rem;
    font-weight:    700;
    color:          var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  0.25rem;
}

#ddc-due-date {
    font-family: 'IBM Plex Serif', serif;
    font-size:   1.875rem;
    color:       var(--accent);
    font-weight: 400;
    line-height: 1.2;
    margin:      0.25rem 0;
}

/* Stat pills row */
.ddc-stats-row {
    display:         flex;
    gap:             0.75rem;
    justify-content: center;
    flex-wrap:       wrap;
    margin-bottom:   1.5rem;
}

.ddc-stat-pill {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    background:     var(--bg, #FFFFFF);
    border:         1.5px solid var(--border);
    border-radius:  10px;
    padding:        0.625rem 1rem;
    min-width:      110px;
}

.ddc-stat-pill .stat-value {
    font-size:   1.125rem;
    font-weight: 700;
    color:       var(--text);
    line-height: 1.2;
}
.ddc-stat-pill .stat-label {
    font-size:  0.6875rem;
    font-weight: 600;
    color:      var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.125rem;
}

/* Trimester badge colour coding */
#ddc-trimester[data-tri="1"] { background: #e8f5e9; border-color: #81c784; color: #2e7d32; }
#ddc-trimester[data-tri="1"] .stat-value { color: #2e7d32; }
#ddc-trimester[data-tri="2"] { background: #fff8e1; border-color: #ffd54f; color: #e65100; }
#ddc-trimester[data-tri="2"] .stat-value { color: #e65100; }
#ddc-trimester[data-tri="3"] { background: #fce4ec; border-color: #f48fb1; color: #880e4f; }
#ddc-trimester[data-tri="3"] .stat-value { color: #880e4f; }

/* Days remaining */
.ddc-days-remain {
    font-size:   1.0625rem;
    font-weight: 600;
    color:       var(--muted);
}
.ddc-due-today  { color: var(--accent); }
.ddc-overdue    { color: #d32f2f; }

/* ── Pregnancy progress bar ───────────────────────────────────────────────── */
.progress-section {
    margin-bottom: 1.75rem;
}

.progress-section h3 {
    font-size:      0.8125rem;
    font-weight:    700;
    color:          var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom:  0.875rem;
}

.progress-outer {
    position:      relative;
    height:        20px;
    background:    var(--bg, #FFFFFF);
    border:        1.5px solid var(--border);
    border-radius: 999px;
    overflow:      visible;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height:        100%;
    background:    linear-gradient(to right, #a5d6a7, #ffb74d, #ef9a9a);
    border-radius: 999px;
    transition:    width 0.6s ease;
    min-width:     4px;
}

/* Trimester boundary markers at 13/28 weeks */
.progress-dividers {
    position: absolute;
    inset:    0;
    pointer-events: none;
}
.progress-div {
    position:   absolute;
    top:        0;
    bottom:     0;
    width:      2px;
    background: rgba(255,255,255,0.7);
}
.progress-div-1  { left: calc(13 / 40 * 100%); }
.progress-div-2  { left: calc(28 / 40 * 100%); }

.progress-labels {
    display:         flex;
    justify-content: space-between;
    font-size:       0.6875rem;
    color:           var(--muted);
    font-weight:     600;
    margin-top:      0.375rem;
}

.progress-week-label {
    text-align: center;
    font-size:  0.875rem;
    font-weight: 700;
    color:      var(--text);
    margin-top: 0.5rem;
}

/* ── Milestone list ───────────────────────────────────────────────────────── */
.milestone-section h3 {
    font-size:      0.8125rem;
    font-weight:    700;
    color:          var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom:  0.875rem;
}

.milestone-list {
    list-style: none;
    padding:    0;
    margin:     0;
}

.milestone-item {
    display:       flex;
    align-items:   center;
    gap:           0.875rem;
    padding:       0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.milestone-item:last-child { border-bottom: none; }
.milestone-item.milestone-past {
    opacity: 0.55;
}

.milestone-week {
    flex-shrink:    0;
    width:          46px;
    height:         46px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    background:     var(--bg, #FFFFFF);
    border:         1.5px solid var(--border);
    border-radius:  8px;
    font-size:      0.6875rem;
    font-weight:    700;
    color:          var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height:    1.1;
}

.milestone-body {
    flex: 1 1 0;
    min-width: 0;
}
.milestone-label {
    font-size:   0.9375rem;
    font-weight: 600;
    color:       var(--text);
}
.milestone-date {
    font-size:  0.8125rem;
    color:      var(--muted);
    margin-top: 0.125rem;
}

.milestone-relative {
    flex-shrink: 0;
    font-size:   0.8125rem;
    font-weight: 700;
    color:       var(--accent);
    text-align:  right;
    white-space: nowrap;
}
.milestone-item.milestone-past .milestone-relative {
    color: var(--muted);
}

/* ── Medical disclaimer ───────────────────────────────────────────────────── */
.ddc-disclaimer {
    display:       flex;
    gap:           0.625rem;
    align-items:   flex-start;
    background:    #fff8e1;
    border:        1.5px solid #ffd54f;
    border-radius: 10px;
    padding:       0.875rem 1rem;
    margin-top:    1.5rem;
    font-size:     0.875rem;
    color:         #5d4037;
    line-height:   1.5;
}

.ddc-disclaimer-icon {
    font-size:   1.25rem;
    flex-shrink: 0;
    margin-top:  0.1rem;
}

/* ── KKH / Singapore callout box ──────────────────────────────────────────── */
.kkh-callout {
    background:    #f3f8ff;
    border:        1.5px solid #90caf9;
    border-radius: 10px;
    padding:       1rem 1.125rem;
    margin-top:    1.25rem;
    font-size:     0.9rem;
    color:         #1a237e;
    line-height:   1.6;
}

.kkh-callout strong {
    display:       block;
    font-size:     0.875rem;
    font-weight:   700;
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:         #1565c0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    #ddc-due-date {
        font-size: 1.375rem;
    }
    .ddc-stat-pill {
        min-width: 90px;
        padding:   0.5rem 0.75rem;
    }
    .ddc-stat-pill .stat-value {
        font-size: 0.9375rem;
    }
    .ddc-tab {
        padding:   0.5rem 0.875rem;
        font-size: 0.875rem;
    }
    .milestone-week {
        width:  38px;
        height: 38px;
    }
}

/* cache-buster: 2026-05-24T05:06:05Z */