/* Compound interest calculator — page-specific styles (extends ../style.css) */
/* Slightly wider page so fields have more room (overrides 900px from style.css) */
main{max-width:1120px}
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:6px}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.hint-inline{font-weight:400;color:var(--muted);font-size:.78rem}

/* Form container + responsive field grid */
.tool{background:var(--soft,#f7f8fb);border:1px solid var(--ring);border-radius:14px;padding:16px 14px;margin:18px 0;box-shadow:0 8px 24px rgba(20,30,60,.06)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 16px}
/* Descriptor and input sit on the SAME line: label takes available width, input is fixed-width on the right */
.field{display:flex;align-items:center;gap:8px;margin:0;min-width:0}
/* Inputs & selects are wider now and stay beside their descriptor; dead space between label and input is reduced */
.field input,.field select{flex:0 0 190px;width:190px;max-width:190px;margin-left:auto}
/* Label term + hover/focus help icon, vertically centred next to the input, wraps if long */
.field label{flex:0 1 auto;display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:.82rem;font-weight:600;color:var(--muted);line-height:1.25;min-width:0}

/* Field label term + hover/focus help tooltip */
.help{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;cursor:help;line-height:1;flex:0 0 auto}
.help:focus{outline:2px solid var(--accent);outline-offset:2px}
.help .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:230px;max-width:72vw;background:#1a1f2e;color:#fff;font-weight:400;font-size:.8rem;line-height:1.4;text-align:left;padding:9px 11px;border-radius:8px;box-shadow:0 8px 24px rgba(20,30,60,.25);opacity:0;visibility:hidden;transition:opacity .12s ease;z-index:30;pointer-events:none}
.help .tip strong{color:#9db4ff;font-weight:700}
.help .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1a1f2e}
.help:hover .tip,.help:focus .tip,.help:focus-within .tip{opacity:1;visibility:visible}
@media (max-width:520px){
  .help .tip{left:0;transform:none}
  .help .tip::after{left:8px;transform:none}
}

.results{margin-top:14px;border-top:1px solid var(--ring);padding-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px}
.stat{background:#fff;border:1px solid var(--ring);border-radius:10px;padding:12px;text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:88px}
.stat .big{display:block;font-size:1.25rem;font-weight:800;color:var(--accent2)}
.stat .lbl{font-size:.74rem;color:var(--muted)}

/* Input focus glow for accessibility + polish */
input,select{border:1px solid var(--ring);border-radius:8px;padding:8px 10px;font-size:.95rem;background:#fff;color:var(--text);transition:border-color .18s ease,box-shadow .18s ease}
input:focus,select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(59,91,219,.14)}
/* Prevent value text from crowding the fixed descriptor: comfortable height, no clipping, ellipsis only if truly overflowing */
.field input,.field select{height:2.7rem;line-height:1.25;text-overflow:ellipsis}
.field input{padding-right:10px}
.field select{padding-right:28px}

#mainChart{margin-top:16px;background:var(--soft);border:1px solid var(--ring);border-radius:10px}
.chart-key{font-size:.78rem;color:var(--muted);text-align:center;margin:.4em 0 0}
.key-blue{color:#3b5bdb}.key-green{color:#0f9d6b}

.adv-toggle{margin-top:14px;cursor:pointer;background:#fff;border:1px solid var(--accent);color:var(--accent);font-weight:700;border-radius:9px;padding:10px 14px;width:100%;font-size:.95rem}
.adv-toggle:hover{background:#eef2ff}
.adv-toggle.primary{background:var(--accent);color:#fff}
.adv-toggle.primary:hover{background:#2f4ac0}
.export-btn{border-color:var(--accent2,#0f9d6b);color:var(--accent2,#0f9d6b)}
.export-btn:hover{background:#e9f7f1}
.reset-btn{border-color:#c0c6d4;color:var(--muted)}
.reset-btn:hover{background:#f3f4f8;color:var(--text)}
.save-note{text-align:center;color:var(--accent2,#0f9d6b);margin:.5em 0 0;font-size:.78rem}
[hidden]{display:none !important}
.advanced{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.adv-block{background:#fff;border:1px solid var(--ring);border-radius:10px;padding:12px}
.scenario{position:relative}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row .adv-toggle{margin-top:0;flex:1;min-width:160px}
.table-scroll{overflow-x:auto}
/* Bordered data tables with full gridlines */
table.ref{width:100%;border-collapse:collapse;margin:12px 0;font-size:.92rem;border:1px solid #cfd6e4}
table.ref th,table.ref td{border:1px solid #cfd6e4;padding:8px 10px;text-align:right;white-space:nowrap}
table.ref th:first-child,table.ref td:first-child{text-align:left}
table.ref thead th,table.ref th{background:var(--soft,#f7f8fb);font-weight:700;color:var(--text,#1a1f2e);text-align:right}
table.ref thead th:first-child{text-align:left}
table.ref tbody tr:nth-child(even) td{background:#fafbfd}
table.ref tbody tr:hover td{background:#eef2ff}
.cmp-h{margin:18px 0 6px;color:var(--accent);font-size:1rem}
#compareChartWrap .chart{background:var(--soft,#f7f8fb);border:1px solid var(--ring);border-radius:10px;padding:6px;display:block}
.legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin:10px 0 4px;font-size:.84rem;color:var(--muted)}
.leg-item{display:inline-flex;align-items:center;gap:6px}
.leg-swatch{width:14px;height:4px;border-radius:2px;display:inline-block}
.leg-item strong{color:var(--text)}
#compareTable td,#compareTable th{white-space:nowrap}
#compareSummary .hint{font-size:.9rem;background:var(--soft);border:1px solid var(--ring);border-radius:9px;padding:10px 12px}

/* ---- Vetted design-review polish (Sonnet proposal → Opus-approved subset) ---- */
/* #8 Chart container: match 12px radius used elsewhere + soft inset depth */
#mainChart,#compareChartWrap .chart{border-radius:12px;box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}
/* #3/#11 Visible keyboard focus on interactive elements */
.adv-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* #12 Slightly larger, crisper help icon */
.help{width:18px;height:18px;font-size:.74rem}

@media (max-width:520px){
  .stat .big{font-size:1.1rem}
  .btn-row .adv-toggle{min-width:0}
}