.foi { --foi-ink:#203c3b; --foi-accent:#16736b; --foi-pale:#edf5f2; color:var(--foi-ink); font:inherit; font-size:16px; }
.foi *, .foi *::before, .foi *::after { box-sizing:border-box; }
.foi [hidden] { display:none!important; }
.foi p { line-height:1.55; }
.foi .foi-source { margin:0 0 1.1rem; font-size:.95rem; }
.foi-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:1.4rem; align-items:start; }
.foi fieldset { padding:0; border:0; margin:0; min-width:0; }
.foi-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,9em),1fr)); gap:.35rem 1rem; margin-bottom:1rem; }
.foi-field { display:grid; grid-template-rows:subgrid; grid-row:span 3; min-width:0; gap:.35rem; }
.foi label { margin:0; font-weight:600; line-height:1.35; }
.foi input, .foi select, .foi textarea { width:100%; min-width:0; height:auto; min-height:3rem; border:1px solid #9db3af; border-radius:.45rem; padding:.65rem .7rem; font:inherit; background:#fff; color:#203c3b; }
#it-foi :is(input,select,textarea) { font-size:inherit!important; }
.foi [aria-invalid="true"] { border-color:#ab3434; }
.foi :is(input,select,button,summary,textarea,a):focus-visible { outline:3px solid #e8a342; outline-offset:3px; }
.foi-help { font-size:.875rem; color:#526963; line-height:1.4; margin:0; }
.foi-date-fields { grid-template-columns:repeat(auto-fit,minmax(min(100%,9em),1fr)); }
.foi button { font:inherit; cursor:pointer; border:1px solid #9db3af; background:#fff; color:var(--foi-ink); padding:.65rem .85rem; border-radius:.45rem; white-space:normal; line-height:1.35; }
.foi button:disabled { cursor:default; opacity:.6; }
.foi .foi-primary { background:var(--foi-accent); color:#fff; border-color:var(--foi-accent); }
.foi-error { padding:.75rem; margin:0 0 1rem; border-left:3px solid #ab3434; background:#fff0ef; color:#832a2a; }
.foi-result { border-radius:.75rem; padding:1.2rem; background:var(--foi-pale); position:sticky; top:1rem; }
.foi-result h2 { font-size:1rem; margin:0 0 .35rem; color:#526963; font-weight:500; }
.foi-big { font-size:clamp(1.9rem,4vw,2.6rem); font-weight:750; line-height:1.15; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.foi-delta { margin:.5rem 0 1rem; font-size:1.1rem; }
.foi-compare { margin:.75rem 0; padding:.7rem 0; border-top:1px solid #c8dbd4; border-bottom:1px solid #c8dbd4; display:flex; flex-wrap:wrap; gap:.3rem .8rem; justify-content:space-between; }
.foi-assumption { font-size:.9rem; margin:.8rem 0; line-height:1.45; }
.foi-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.foi-copy-status { font-size:.9rem; margin:.5rem 0 0; min-height:1.4em; }
.foi textarea { min-height:10rem; }
.foi .foi-presets { margin:1.6rem 0; display:flex; flex-wrap:wrap; gap:.5rem; }
.foi-presets button { flex:1 1 12rem; text-align:left; }
.foi-presets strong, .foi-presets span { display:block; }
.foi-presets span { font-size:.85rem; margin-top:.3rem; }
.foi-presets [aria-pressed="true"] { background:var(--foi-pale); border-color:var(--foi-accent); box-shadow:inset 0 0 0 1px var(--foi-accent); }
.foi h2 { margin:1.5rem 0 .8rem; line-height:1.3; }
.foi-result h2 { margin:0 0 .35rem; }
.foi-chart svg { display:block; width:100%; height:clamp(180px,28vw,330px); overflow:hidden; touch-action:pan-y; }
.foi-chart path, .foi-chart line { vector-effect:non-scaling-stroke; }
.foi-chart-dates { display:flex; justify-content:space-between; gap:1rem; font-size:.875rem; color:#526963; }
.foi-chart-scale { overflow-wrap:anywhere; margin:.5rem 0; }
.foi-legend { display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.9rem; }
.foi-legend span::before { content:""; display:inline-block; width:1.2rem; height:3px; background:#14776a; vertical-align:middle; margin-right:.35rem; }
.foi-legend .foi-full::before { background:#c36649; }
.foi-range { margin-top:.8rem; }
.foi input[type="range"] { appearance:none; -webkit-appearance:none; background:transparent; box-shadow:none; padding:0; border:0; min-height:2.4rem; cursor:ew-resize; }
.foi input[type="range"]::-webkit-slider-runnable-track { height:6px; border-radius:6px; background:#c6d9d1; }
.foi input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:24px; height:24px; margin-top:-9px; border:3px solid white; border-radius:50%; background:#14776a; box-shadow:0 0 0 1px #14776a; }
.foi input[type="range"]::-moz-range-track { height:6px; border-radius:6px; background:#c6d9d1; }
.foi input[type="range"]::-moz-range-thumb { width:20px; height:20px; border:3px solid white; border-radius:50%; background:#14776a; }
.foi-chart-readout { padding:.65rem .8rem; background:var(--foi-pale); border-radius:.45rem; font-variant-numeric:tabular-nums; line-height:1.5; }
.foi details { border-top:1px solid #d2ddd9; padding:.9rem 0; }
.foi summary { cursor:pointer; font-weight:600; line-height:1.4; }
.foi details p:first-of-type { margin-top:.8rem; }
.foi dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:.6rem 1rem; margin-top:.9rem; }
.foi dt { font-weight:500; }
.foi dd { margin:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.foi-table-wrap { max-height:26rem; overflow:auto; margin:.8rem 0; }
.foi table { width:100%; border-collapse:collapse; font-size:.9rem; font-variant-numeric:tabular-nums; }
.foi :is(th,td) { padding:.6rem .5rem; text-align:right; border-bottom:1px solid #d2ddd9; white-space:nowrap; }
.foi :is(th,td):first-child { text-align:left; }
.foi th { background:#edf5f2; position:sticky; top:0; }
.foi td small { display:block; font-size:.75rem; color:#526963; }
body:has(#it-foi) .calculator-feedback__intro { min-width:0; overflow-wrap:anywhere; }
body:has(#it-foi) .calculator-feedback { min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); }
body:has(#it-foi) .calculator-feedback :is(a,button) { min-width:0; overflow-wrap:anywhere; line-height:1.4; }
@media(max-width:700px) { .foi-layout { grid-template-columns:minmax(0,1fr); gap:.7rem; } .foi-result { position:static; } .foi-result { padding:1rem; } }
@media print { .foi fieldset, .foi-presets, .foi-actions, .foi-range, .foi-copy-status, .foi-report-fallback { display:none!important; } .foi-layout { display:block; } .foi-result { position:static; } .foi details { display:block; } }
