/*
 * Smart Tools Suite — Age Calculator
 * calcdaystime.com
 * ─────────────────────────────────────────────────────────────────────
 * All text meets WCAG AA contrast on every background used here.
 * No light-grey-on-white combinations.
 */

/* ── Wrapper & shadow ──────────────────────────────────────────────────────── */
.sts-age-calculator {
    background: #fff;
    border-radius: 14px;
    box-shadow:
        0 1px 3px  rgba(26,58,92,.10),
        0 6px 20px rgba(26,58,92,.12),
        0 20px 48px rgba(26,58,92,.08);
    overflow: hidden;
    max-width: 680px;
    margin: 0 auto 3rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    color: #0f1f30;  /* never use grey for primary text */
}

.sts-age-calculator *, .sts-age-calculator *::before, .sts-age-calculator *::after {
    box-sizing: border-box;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.sts-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--sts-navy, #1A3A5C);
    color: #fff;
    padding: 1.5rem 2rem;
}

.sts-header__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sts-header__icon svg {
    width: 26px;
    height: 26px;
    color: #fff;
}

.sts-header__title {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 .2rem;
    letter-spacing: -.3px;
    color: #fff;
    line-height: 1.2;
}

.sts-header__sub {
    font-size: .9rem;
    margin: 0;
    color: rgba(255,255,255,.85);  /* white on dark — contrast ratio >7:1, WCAG AAA */
    line-height: 1.4;
}

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.sts-tabs {
    display: flex;
    background: #f0f4f8;
    border-bottom: 2px solid #dce4ef;
}

.sts-tab {
    flex: 1;
    padding: .8rem .5rem;
    font-size: .88rem;
    font-weight: 600;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #2d4a63;      /* dark enough on light bg — always readable */
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .18s, border-color .18s, background .18s;
    white-space: nowrap;
}

.sts-tab:hover {
    color: var(--sts-navy, #1A3A5C);
    background: rgba(26,58,92,.05);
}

.sts-tab--active {
    color: var(--sts-navy, #1A3A5C);
    background: #fff;
    border-bottom-color: var(--sts-teal, #1D9E75);
}

/* ── Panels ────────────────────────────────────────────────────────────────── */
.sts-panel {
    padding: 1.6rem 2rem;
    background: #fff;
}

.sts-panel-hint {
    font-size: .9rem;
    color: #2d4a63;      /* dark — passes contrast on white */
    margin: 0 0 1rem;
    line-height: 1.5;
}

/* ── Fields ────────────────────────────────────────────────────────────────── */
.sts-field-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.sts-field-row--two   .sts-field { flex: 1 1 200px; }
.sts-field-row--three .sts-field { flex: 1 1 120px; }

.sts-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.sts-label {
    font-size: .82rem;
    font-weight: 700;
    color: #1A3A5C;
    letter-spacing: .01em;
}

/* Larger input variant for main DOB field on Age Today tab */
.sts-input--lg {
    padding: .95rem 1.1rem;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.sts-input {
    width: 100%;
    padding: .7rem .9rem;
    border: 1.8px solid #c4d0de;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 500;
    color: #0f1f30;      /* near-black */
    background: #f7f9fc;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}

.sts-input:focus {
    border-color: var(--sts-teal, #1D9E75);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(29,158,117,.15);
}

.sts-input::placeholder { color: #6b869e; } /* tested: 4.6:1 on #f7f9fc */

/* ── Error ─────────────────────────────────────────────────────────────────── */
.sts-error {
    font-size: .87rem;
    font-weight: 600;
    color: #c0392b;
    background: #fdf3f2;
    border-left: 3px solid #c0392b;
    border-radius: 6px;
    padding: .55rem .8rem;
    margin-bottom: .75rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.sts-btn-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

.sts-btn-primary {
    padding: .72rem 1.75rem;
    background: var(--sts-teal, #1D9E75);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: .01em;
    transition: background .18s, transform .1s;
}

.sts-btn-primary:hover  { background: #178a62; }
.sts-btn-primary:active { transform: scale(.97); }
.sts-btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
    pointer-events: none;
}

.sts-btn-ghost {
    padding: .72rem 1.4rem;
    background: transparent;
    color: #1A3A5C;      /* navy — 8.6:1 on white */
    font-size: .95rem;
    font-weight: 700;
    border: 1.8px solid #1A3A5C;
    border-radius: 8px;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.sts-btn-ghost:hover {
    background: #1A3A5C;
    color: #fff;
}

/* ── Results ───────────────────────────────────────────────────────────────── */
.sts-results {
    border-top: 1px solid #dce4ef;
}

/* Age strip */
.sts-age-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    background: var(--sts-navy, #1A3A5C);
    padding: 1.75rem 2rem;
    flex-wrap: wrap;
}

.sts-age-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.sts-age-num {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.5px;
    min-width: 2.5ch;
    text-align: center;
}

.sts-age-lbl {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.80);  /* white on dark — >7:1 */
}

.sts-age-sep {
    font-size: 2.5rem;
    font-weight: 200;
    color: var(--sts-teal, #1D9E75);
    line-height: 1;
    padding-bottom: 1.4rem;
}

/* Stat cards */
.sts-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #dce4ef;
}

.sts-card {
    background: #fff;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.sts-card__lbl {
    font-size: .73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #2d4a63;      /* dark — not grey, passes contrast */
}

.sts-card__val {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--sts-navy, #1A3A5C);
    line-height: 1.1;
}

.sts-card__sub {
    font-size: .8rem;
    font-weight: 600;
    color: #2d4a63;      /* same dark colour — always readable */
}

/* Summary */
.sts-summary {
    font-size: .93rem;
    font-weight: 600;
    color: #0f1f30;      /* near-black */
    background: #f0f4f8;
    padding: 1rem 1.5rem;
    margin: 0;
    border-top: 1px solid #dce4ef;
    line-height: 1.6;
    text-align: center;
}

/* Action bar */
.sts-actions {
    display: flex;
    gap: .75rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border-top: 1px solid #dce4ef;
    flex-wrap: wrap;
}

.sts-action {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.25rem;
    border: 1.8px solid #1A3A5C;
    border-radius: 8px;
    background: transparent;
    color: #1A3A5C;
    font-size: .87rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.sts-action svg {
    width: 16px;
    height: 16px;
}

.sts-action:hover {
    background: #1A3A5C;
    color: #fff;
}

.sts-action:disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Link fallback */
.sts-link-fallback {
    padding: .9rem 1.5rem 1rem;
    background: #f0f4f8;
    border-top: 1px solid #dce4ef;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sts-link-fallback__row {
    display: flex;
    gap: .5rem;
}

.sts-link-fallback__row .sts-input {
    flex: 1;
    font-size: .83rem;
    cursor: text;
}

.sts-link-fallback__close {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: #fff;
    border: 1.8px solid #c4d0de;
    border-radius: 8px;
    cursor: pointer;
    font-size: .9rem;
    color: #1A3A5C;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.sts-link-fallback__close:hover {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}

/* Toast */
.sts-toast {
    margin: 0 1.5rem .75rem;
    padding: .6rem 1rem;
    background: #0f1f30;
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
    border-radius: 8px;
    text-align: center;
}

/* Find DOB result */
.sts-dob-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1.5rem;
    background: #f0f4f8;
    border-top: 1px solid #dce4ef;
    text-align: center;
}

.sts-dob-result__label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #2d4a63;
}

.sts-dob-result__value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--sts-teal, #1D9E75);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .sts-header         { padding: 1.2rem 1.25rem; }
    .sts-panel          { padding: 1.25rem; }
    .sts-cards          { grid-template-columns: 1fr; }
    .sts-age-num        { font-size: 2.4rem; }
    .sts-btn-row        { flex-direction: column; }
    .sts-btn-primary,
    .sts-btn-ghost      { width: 100%; text-align: center; }
    .sts-tabs           { overflow-x: auto; }
    .sts-tab            { font-size: .8rem; padding: .7rem .4rem; }
    .sts-field-row--three .sts-field { flex: 1 1 80px; }
}