/* ── Reset & scope ───────────────────────────────────────── */
.ac-wrap *             { box-sizing: border-box; margin: 0; padding: 0; }
.ac-wrap               { font-family: var(--font-head, system-ui, sans-serif);
                         font-size: var(--text-sm, .875rem);
                         color: var(--clr-text-primary, #111); }

/* ── Top bar ─────────────────────────────────────────────── */
.ac-top-bar            { display: flex; align-items: center; gap: .5rem;
                         padding: .55rem var(--sp-4, 1rem);
                         background: var(--clr-accent, #2563eb); color: #fff;
                         border-radius: var(--r-lg, 8px) var(--r-lg, 8px) 0 0;
                         margin-bottom: var(--sp-4, 1rem);
                         font-size: var(--text-xs, .75rem);
                         font-weight: var(--fw-medium, 500); }
.ac-top-bar svg        { flex-shrink: 0; opacity: .85; }

/* ── Main grid ───────────────────────────────────────────── */
.ac-grid               { display: grid;
                         grid-template-columns: 310px 1fr;
                         gap: var(--sp-6, 1.5rem);
                         align-items: start; }
@media (max-width: 860px) { .ac-grid { grid-template-columns: 1fr; } 
.calc-widget-card {
        padding: var(--sp-5);
        width: 380px;
    }
}

/* ── Card ────────────────────────────────────────────────── */
.ac-card               { background: var(--clr-bg, #fff);
                         border: 1px solid var(--clr-border, #e2e8f0);
                         border-radius: var(--r-xl, 12px);
                         overflow: hidden; }

/* ── Mode tabs (Total Price / Monthly Payment) ───────────── */
.ac-mode-tabs          { display: flex; border-bottom: 1px solid var(--clr-border-soft, #f1f5f9); }
.ac-mode-tab           { flex: 1; padding: .55rem .5rem;
                         font-size: var(--text-xs, .75rem);
                         font-weight: var(--fw-semibold, 600);
                         text-align: center; cursor: pointer;
                         background: var(--clr-bg-soft, #f8fafc);
                         color: var(--clr-text-muted, #94a3b8);
                         border: none;
                         border-bottom: 2px solid transparent;
                         transition: background .15s, color .15s; }
.ac-mode-tab:first-child { border-radius: var(--r-xl) 0 0 0; }
.ac-mode-tab:last-child  { border-radius: 0 var(--r-xl) 0 0; }
.ac-mode-tab.active    { background: var(--clr-bg, #fff);
                         color: var(--clr-text-primary, #111);
                         border-bottom-color: var(--clr-accent, #2563eb); }

/* ── Input panel fields ──────────────────────────────────── */
.ac-input-panel        { display: flex; flex-direction: column; }

.ac-field              { display: flex; align-items: center;
                         padding: .44rem var(--sp-4, 1rem);
                         border-bottom: 1px solid var(--clr-border-soft, #f1f5f9);
                         gap: .4rem; min-height: 38px; }

.ac-lbl                { flex-shrink: 0; width: 130px;
                         font-size: var(--text-xs, .75rem);
                         font-weight: var(--fw-medium, 500);
                         color: var(--clr-text-secondary, #475569);
                         line-height: 1.35; display: flex;
                         align-items: center; gap: .25rem; }
.ac-info               { display: inline-flex; align-items: center;
                         justify-content: center;
                         width: 13px; height: 13px; border-radius: 50%;
                         background: var(--clr-bg-muted, #f1f5f9);
                         border: 1px solid var(--clr-border, #e2e8f0);
                         font-size: 9px; color: var(--clr-text-muted, #94a3b8);
                         cursor: default; flex-shrink: 0; }

.ac-inp-row            { flex: 1; display: flex; align-items: center; gap: .3rem; }

.ac-inp                { flex: 1; min-width: 0;
                         padding: .32rem .5rem;
                         border: 1.5px solid var(--clr-border, #e2e8f0);
                         border-radius: var(--r-md, 6px);
                         background: var(--clr-bg, #fff);
                         font-family: var(--font-head, system-ui);
                         font-size: var(--text-sm, .875rem);
                         font-weight: var(--fw-semibold, 600);
                         color: var(--clr-text-primary, #111);
                         outline: none;
                         -moz-appearance: textfield; appearance: textfield;
                         transition: border-color .15s, box-shadow .15s; }
.ac-inp::-webkit-outer-spin-button,
.ac-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
.ac-inp:focus          { border-color: var(--clr-accent, #2563eb);
                         box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.ac-badge              { font-size: var(--text-xs, .75rem);
                         color: var(--clr-text-muted, #94a3b8);
                         background: var(--clr-bg-muted, #f1f5f9);
                         border: 1px solid var(--clr-border, #e2e8f0);
                         border-radius: var(--r-sm, 4px);
                         padding: .18rem .42rem; white-space: nowrap; flex-shrink: 0; }

.ac-select             { flex: 1; padding: .32rem .28rem;
                         border: 1.5px solid var(--clr-border, #e2e8f0);
                         border-radius: var(--r-md, 6px);
                         background: var(--clr-bg, #fff);
                         font-family: var(--font-head, system-ui);
                         font-size: var(--text-xs, .75rem);
                         font-weight: var(--fw-medium, 500);
                         color: var(--clr-text-primary, #111);
                         cursor: pointer; outline: none; }
.ac-select:focus       { border-color: var(--clr-accent, #2563eb); }

/* checkbox row */
.ac-check-row          { display: flex; align-items: center; gap: .5rem;
                         padding: .5rem var(--sp-4, 1rem);
                         border-bottom: 1px solid var(--clr-border-soft, #f1f5f9); }
.ac-check-row input[type=checkbox] {
                         accent-color: var(--clr-accent, #2563eb);
                         width: 14px; height: 14px; cursor: pointer; }
.ac-check-row label    { font-size: var(--text-xs, .75rem);
                         color: var(--clr-text-secondary); cursor: pointer; }

/* actions */
.ac-actions            { padding: .65rem var(--sp-4, 1rem);
                         border-top: 1px solid var(--clr-border-soft); }
.ac-clear-btn          { width: 100%; padding: .5rem;
                         background: transparent;
                         border: 1.5px solid var(--clr-border, #e2e8f0);
                         border-radius: var(--r-md, 6px);
                         font-family: var(--font-head, system-ui);
                         font-size: var(--text-sm); font-weight: var(--fw-medium);
                         color: var(--clr-text-muted, #94a3b8);
                         cursor: pointer; transition: background .15s, color .15s; }
.ac-clear-btn:hover    { background: var(--clr-bg-soft);
                         color: var(--clr-text-secondary); }

/* ── Result panel ────────────────────────────────────────── */
.ac-result-panel       { display: flex; flex-direction: column;
                         gap: var(--sp-4, 1rem); }

/* monthly header */
.ac-monthly-hdr        { background: var(--clr-accent, #2563eb); color: #fff;
                         padding: .65rem 1rem;
                         border-radius: var(--r-xl) var(--r-xl) 0 0;
                         display: flex; align-items: center;
                         justify-content: space-between; }
.ac-monthly-label      { font-size: var(--text-xs); font-weight: var(--fw-medium);
                         opacity: .85; }
.ac-monthly-value      { font-size: 1.45rem; font-weight: var(--fw-bold, 700);
                         letter-spacing: -.02em; }
.ac-print-btn          { display: inline-flex; align-items: center; gap: .3rem;
                         background: rgba(255,255,255,.18);
                         border: 1px solid rgba(255,255,255,.35);
                         border-radius: var(--r-sm, 4px); color: #fff;
                         padding: .2rem .5rem;
                         font-size: var(--text-xs); font-weight: var(--fw-medium);
                         cursor: pointer; transition: background .15s; }
.ac-print-btn:hover    { background: rgba(255,255,255,.3); }

/* summary table */
.ac-summary            { border: 1px solid var(--clr-border); border-top: none;
                         border-radius: 0 0 var(--r-xl) var(--r-xl);
                         background: var(--clr-bg); }
.ac-sum-row            { display: flex; justify-content: space-between;
                         align-items: center;
                         padding: .42rem 1rem;
                         border-bottom: 1px solid var(--clr-border-soft);
                         font-size: var(--text-sm); }
.ac-sum-row:last-of-type { border-bottom: none; }
.ac-sum-lbl            { color: var(--clr-text-secondary);
                         display: flex; align-items: center; gap: .25rem; }
.ac-sum-val            { font-weight: var(--fw-semibold);
                         color: var(--clr-text-primary); }
.ac-sum-divider        { height: 1px; background: var(--clr-border);
                         margin: .1rem 0; }

/* pie section */
.ac-pie-section        { padding: .6rem 1rem 1rem;
                         border-top: 1px solid var(--clr-border-soft); }
.ac-pie-title          { font-size: var(--text-sm); font-weight: var(--fw-semibold);
                         color: var(--clr-text-primary); text-align: center;
                         margin-bottom: .5rem; }
.ac-pie-row            { display: flex; align-items: center; gap: 1rem; }
.ac-pie-legend         { display: flex; flex-direction: column; gap: .3rem; }
.ac-legend-item        { display: flex; align-items: center; gap: .4rem;
                         font-size: var(--text-xs); color: var(--clr-text-secondary); }
.ac-legend-dot         { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

.ac-state-link         { display: block; padding: .5rem 1rem;
                         font-size: var(--text-xs);
                         color: var(--clr-accent, #2563eb);
                         text-decoration: underline;
                         text-decoration-color: transparent;
                         transition: text-decoration-color .15s; }
.ac-state-link:hover   { text-decoration-color: var(--clr-accent); }

/* ── Amortization ────────────────────────────────────────── */
.ac-amort-section      { margin-top: var(--sp-2, .5rem); }
.ac-amort-hdr          { display: flex; align-items: center;
                         justify-content: space-between;
                         padding: .6rem .8rem;
                         background: var(--clr-bg-soft);
                         border: 1px solid var(--clr-border);
                         border-radius: var(--r-lg, 8px);
                         cursor: pointer; user-select: none;
                         transition: background .15s; }
.ac-amort-hdr:hover    { background: var(--clr-accent-light, #eff6ff); }
.ac-amort-title        { font-size: var(--text-base, 1rem);
                         font-weight: var(--fw-bold); color: var(--clr-text-primary); }
.ac-amort-chev         { color: var(--clr-text-muted);
                         transition: transform .25s ease; }
.ac-amort-chev.open    { transform: rotate(180deg); }
.ac-amort-body         { overflow: hidden; max-height: 0;
                         transition: max-height .35s ease; }
.ac-amort-body.open    { max-height: 9999px; }
.ac-amort-inner        { padding-top: var(--sp-4, 1rem); }

.ac-tab-bar            { display: flex; margin-bottom: var(--sp-4);
                         border-bottom: 2px solid var(--clr-border-soft); }
.ac-tab                { padding: .4rem .9rem;
                         font-size: var(--text-sm); font-weight: var(--fw-semibold);
                         color: var(--clr-text-muted); background: transparent;
                         border: none; border-bottom: 2px solid transparent;
                         margin-bottom: -2px; cursor: pointer;
                         transition: color .15s, border-color .15s; }
.ac-tab.active         { color: var(--clr-accent, #2563eb);
                         border-bottom-color: var(--clr-accent); }
.ac-tab:hover          { color: var(--clr-text-primary); }

.ac-table-wrap         { overflow-x: auto; border: 1px solid var(--clr-border);
                         border-radius: var(--r-lg, 8px); overflow: hidden; width: 100%;
    overflow-x: auto;              /* enables horizontal scroll */
    -webkit-overflow-scrolling: touch;}
.ac-table              { width: 100%; border-collapse: collapse;
                         font-size: var(--text-xs, .75rem); }
.ac-table th           { background: var(--clr-accent, #2563eb); color: #fff;
                         padding: .45rem .7rem; text-align: right;
                         font-weight: var(--fw-semibold); font-size: 10px;
                         text-transform: uppercase; letter-spacing: .04em;
                         white-space: nowrap; }
.ac-table th:first-child  { text-align: center; }
.ac-table th:nth-child(2) { text-align: left; }
.ac-table td           { padding: .38rem .7rem; text-align: right;
                         border-bottom: 1px solid var(--clr-border-soft);
                         color: var(--clr-text-secondary); }
.ac-table td:first-child  { text-align: center; font-weight: var(--fw-semibold);
                             color: var(--clr-text-primary); }
.ac-table td:nth-child(2) { text-align: left; color: var(--clr-text-muted); font-size: 10px; }
.ac-table td:last-child   { font-weight: var(--fw-semibold);
                             color: var(--clr-accent-dark, #1e40af); }
.ac-table tr:last-child td { border-bottom: none; }
.ac-table tr:hover td      { background: var(--clr-bg-soft); }
.ac-table .ac-yr-sep td  { background: var(--clr-bg-soft);
                            color: var(--clr-text-muted); font-size: 10px;
                            text-align: left; padding: .22rem .7rem;
                            font-style: italic; }