/* ==========================================================
   F.I.T. PLANNING — calculator theme
   Brings the embedded calculators in line with the website:
   Sora / Be Vietnam type, navy + gold palette, soft cards.
   Loaded last in every tools/app/*.html file. Calculation
   code is untouched; this file only changes appearance.
   ========================================================== */
:root {
    --fit-navy: #0a1d33;
    --fit-navy-2: #103253;
    --fit-gold: #c9a34a;
    --fit-gold-text: #8a6a1f;
    --fit-gold-light: #ead08f;
    --fit-cream: #f7f3e9;
    --fit-line: #e6e1d4;
    --fit-text: #5d6876;
    --fit-green: #256f4d;
    --fit-red: #9b3a3a;
    --fit-head: 'Sora', sans-serif;
    --fit-body: 'Be Vietnam', 'Be Vietnam Pro', sans-serif;
}

/* ---------- page canvas ---------- */
html, body { background: transparent !important; }
body { font-family: var(--fit-body) !important; color: var(--fit-navy) !important; padding: 0 !important; margin: 0 !important; -webkit-font-smoothing: antialiased; }
#viewport { display: block !important; }
.app, #design, .wrap {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    border-radius: 0 !important; margin: 0 auto !important; max-width: none !important; width: 100% !important;
}
main, .main { padding: 4px 4px 0 !important; }
#fit-calculation-status { font-family: var(--fit-body); font-size: 14px; color: var(--fit-green); margin: 0 0 6px; min-height: 0; }
#fit-calculation-status:empty { display: none; }

/* every heading / label / number uses the site's display face */
h1, h2, h3, h4, b, strong, .value, .money, .future, .bv, .v, .calltext, .jtitle, .quote, .mid, .ct, .head, .greenhead, .rhead b, .stat b, .first, .tri b, .purpose b, .lab b, .info b, .ir b {
    font-family: var(--fit-head) !important; letter-spacing: -.01em;
}

/* ---------- panels / cards ---------- */
.panel, .card:not(.modal .card), .result {
    border: 0 !important; border-radius: 10px !important; background: #fff;
    box-shadow: 0 18px 45px rgba(10, 29, 51, .08) !important; overflow: hidden;
}
.panel, .card:not(.modal .card) { border-top: 3px solid var(--fit-gold) !important; }
.grid, .cow { gap: 24px !important; }
.grid { padding-left: 0 !important; padding-right: 0 !important; }

/* panel title bars */
.head, .panel > h2, .ct {
    background: var(--fit-navy) !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important;
    letter-spacing: 1.2px !important; text-transform: uppercase; padding: 16px 18px !important; text-align: center;
}
.greenhead, .visual h2 {
    background: var(--fit-gold) !important; color: var(--fit-navy) !important; border-radius: 100px !important;
    font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; padding: 10px 18px !important;
}
.visual h2 { border-radius: 0 !important; }
.jtitle { font-size: 21px !important; font-weight: 600 !important; color: var(--fit-navy) !important; }

/* ---------- input rows ---------- */
.inputs { padding-top: 6px !important; }
.row, .ir { border-bottom-color: var(--fit-line) !important; }
.lab b, .info b, .ir b { font-size: 14px !important; font-weight: 600 !important; color: var(--fit-navy) !important; letter-spacing: .2px; }
.lab small, .lab span, .info small { color: var(--fit-text) !important; font-family: var(--fit-body) !important; }
.ico {
    background: var(--fit-cream) !important; color: var(--fit-gold-text) !important; border-radius: 50% !important;
    font-family: var(--fit-head) !important; font-weight: 600 !important; box-shadow: none !important;
}
.row .ico { width: 50px !important; height: 50px !important; font-size: 22px !important; justify-self: center; }
.badge { background: var(--fit-navy) !important; color: var(--fit-gold-light) !important; font-family: var(--fit-head) !important; font-weight: 600 !important; }
input, select {
    font-family: var(--fit-head) !important; color: var(--fit-navy) !important; font-weight: 600 !important;
    border: 1px solid #d9d3c3 !important; border-radius: 6px !important; background: #fff !important;
    transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus { outline: none !important; border-color: var(--fit-gold) !important; box-shadow: 0 0 0 3px rgba(201, 163, 74, .22) !important; }
.row input, .num input, .ir input { font-size: 20px !important; }

/* Time Value: six rainbow rows → one calm style */
.row.r1, .row.r2, .row.r3, .row.r4, .row.r5, .row.r6 { background: #fff !important; border: 1px solid var(--fit-line) !important; border-radius: 8px !important; }
.row.r1 .ico, .row.r2 .ico, .row.r3 .ico, .row.r4 .ico, .row.r5 .ico, .row.r6 .ico {
    background: var(--fit-navy) !important; color: var(--fit-gold-light) !important; border-radius: 0 !important;
    width: auto !important; height: auto !important; align-self: stretch;
}
.row.r1 input, .row.r2 input, .row.r3 select, .row.r4 select, .row.r5 input, .row.r6 input { border-color: #d9d3c3 !important; color: var(--fit-navy) !important; }

/* ---------- explanations & callouts ---------- */
.how, .note, .purpose:not(.cow ~ .purpose), .illustration, .assume {
    font-family: var(--fit-body) !important;
}
.how, .note {
    background: var(--fit-cream) !important; border: 0 !important; border-left: 3px solid var(--fit-gold) !important;
    border-radius: 6px !important; color: var(--fit-text) !important;
}
.how b, .note b { color: var(--fit-navy) !important; }
.callout {
    background: var(--fit-cream) !important; border: 0 !important; border-left: 3px solid var(--fit-gold) !important; border-radius: 8px !important;
}
.target { color: var(--fit-gold-text) !important; }
.purpose { background: var(--fit-cream) !important; border-color: var(--fit-gold-light) !important; border-radius: 8px !important; color: var(--fit-navy) !important; }
.purpose div { border-color: var(--fit-gold-light) !important; }
.purpose b { color: var(--fit-gold-text) !important; }
.illustration { background: var(--fit-cream) !important; border: 0 !important; border-radius: 10px !important; }
.selected { background: var(--fit-navy) !important; border-radius: 8px !important; }
.selected strong { color: var(--fit-gold-light) !important; font-family: var(--fit-head) !important; }

/* ---------- result boxes ---------- */
.box { border-width: 1px !important; border-radius: 8px !important; }
.value { font-weight: 700 !important; }
.visual { border: 0 !important; }
.n { font-family: var(--fit-head) !important; font-weight: 600 !important; }
.stage h3 { font-family: var(--fit-head) !important; font-weight: 600 !important; letter-spacing: .5px; font-size: 15px !important; }
.arrow { color: var(--fit-gold) !important; }
.stat, .tri, .chartbox { border-color: var(--fit-line) !important; border-radius: 8px !important; }
.result { background: linear-gradient(145deg, var(--fit-navy), var(--fit-navy-2)) !important; border: 0 !important; border-top: 3px solid var(--fit-gold) !important; }
.result .box { border-color: var(--fit-gold) !important; }
.future { font-family: var(--fit-head) !important; color: var(--fit-navy) !important; }
.chartcard { background: var(--fit-navy) !important; border-color: rgba(201,163,74,.5) !important; }
.mot { color: var(--fit-green) !important; font-family: var(--fit-body) !important; font-style: italic; }
.soc { background: #f3f6f9 !important; border-color: var(--fit-navy-2) !important; }
.fam { background: var(--fit-cream) !important; border-color: var(--fit-gold) !important; }

/* ---------- buttons ---------- */
.actions { gap: 12px !important; margin-top: 28px !important; }
.actions button, button.share, button.email, button.print, #fit-calculate, #calculate, .card button, .ma button, .mact button {
    font-family: var(--fit-head) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1px;
    text-transform: uppercase; border-radius: 100px !important; padding: 13px 26px !important; border: 1px solid transparent !important;
    transition: background .2s, color .2s, border-color .2s; cursor: pointer;
}
#fit-calculate, #calculate { background: var(--fit-navy) !important; color: #fff !important; border-color: var(--fit-navy) !important; }
#fit-calculate:hover, #calculate:hover { background: var(--fit-gold) !important; border-color: var(--fit-gold) !important; color: var(--fit-navy) !important; }
.share { background: var(--fit-gold) !important; color: var(--fit-navy) !important; border-color: var(--fit-gold) !important; }
.share:hover { background: var(--fit-navy) !important; color: #fff !important; border-color: var(--fit-navy) !important; }
.email, .print, .ma button:not(.share), .mact button:not(.share) { background: transparent !important; color: var(--fit-navy) !important; border-color: var(--fit-navy) !important; }
.email:hover, .print:hover { background: var(--fit-navy) !important; color: #fff !important; }

/* ---------- disclaimer ---------- */
.dis, .disc { font-family: var(--fit-body) !important; color: var(--fit-text) !important; font-size: 13px !important; line-height: 1.6 !important; padding: 18px 0 6px !important; }

/* ---------- "Send my results" panel: shown inline below the calculator (works inside the page frame) ---------- */
.modal { position: static !important; inset: auto !important; background: none !important; padding: 0 !important; }
.modal.open { display: block !important; }
.modal .card {
    margin: 26px auto 10px !important; max-width: 560px !important; width: 100% !important; border-radius: 10px !important;
    box-shadow: 0 18px 45px rgba(10,29,51,.12) !important; border-top: 3px solid var(--fit-gold) !important; padding: 28px !important;
    max-height: none !important;
}
.modal .card h3 { font-family: var(--fit-head) !important; color: var(--fit-navy) !important; font-weight: 600; }
.modal .card label { font-family: var(--fit-head) !important; font-size: 14px; font-weight: 600; color: var(--fit-navy); }

/* Time Value: give the inputs room (inherited layout squeezed the labels) */
@media screen and (min-width: 761px) {
    .grid:has(.row.r1) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; align-items: start; }
    .row.r1, .row.r2, .row.r3, .row.r4, .row.r5, .row.r6 { grid-template-columns: 58px minmax(0, 1fr) minmax(150px, 210px) !important; min-height: 0 !important; }
    .row.r1 .ico, .row.r2 .ico, .row.r3 .ico, .row.r4 .ico, .row.r5 .ico, .row.r6 .ico { font-size: 22px !important; }
    .row .info { padding: 12px 14px !important; }
    .row .info b { font-size: 14px !important; }
    .row .info small { font-size: 13px !important; }
    .row .num input, .row .num select { height: 46px !important; font-size: 18px !important; }
}
.grid:has(.row.r1) .result { align-self: start; }
.row.r1 .ico, .row.r2 .ico, .row.r3 .ico, .row.r4 .ico, .row.r5 .ico, .row.r6 .ico { width: 100% !important; }
.actions .email, .actions .print, .modal .card button:not(.share) { border-color: var(--fit-navy) !important; }
.actions .share, .modal .card .share { border-color: var(--fit-gold) !important; }