:root{ --bg:#f4f6f9; --card:#ffffff; --border:#e5e7eb; --text:#111827; --muted:#6b7280; --primary:#2563eb; --primary-dark:#1d4ed8; --success:#16a34a; --danger:#dc2626; --shadow:0 2px 12px rgba(0,0,0,.06); --shadow-hover:0 6px 20px rgba(0,0,0,.09); --radius:12px; --transition:.2s ease; --container:1400px; --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color-scheme:light; /* Extended gray scale (additive — existing tokens above are untouched) */ --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827; /* Semantic tokens (additive) */ --bg-secondary:var(--gray-50); --text-result:var(--primary-dark); --text-on-primary:#ffffff; --link:var(--primary); --link-hover:var(--primary-dark); --focus-ring:0 0 0 3px rgba(37,99,235,.25); /* Category accent colors (for future calculator categories/badges) */ --accent-loan:#2563eb; --accent-tax:#7c3aed; --accent-investment:#16a34a; --accent-utility:#ea580c; } /* ====================================== DARK MODE — same variable names, swapped values. Toggled via [data-theme="dark"] on (set by inline theme-init script in head-common.php + theme-toggle.js). ====================================== */ [data-theme="dark"]{ color-scheme:dark; --bg:#0f1419; --bg-secondary:#161b22; --card:#1c232c; --border:#2d3640; --text:#e5e7eb; --muted:#9ca3af; --primary:#3b82f6; --primary-dark:#60a5fa; --success:#22c55e; --danger:#f87171; --shadow:0 2px 12px rgba(0,0,0,.35); --shadow-hover:0 6px 20px rgba(0,0,0,.5); --text-result:#93c5fd; --text-on-primary:#0f1419; --link:#60a5fa; --link-hover:#93c5fd; --gray-50:#161b22; --gray-100:#1c232c; --gray-200:#2d3640; --gray-300:#3d4854; --gray-400:#5b6776; --gray-500:#9ca3af; --gray-600:#cbd5e1; --gray-700:#e2e8f0; --gray-800:#f1f5f9; --gray-900:#f8fafc; } /* ====================================== RESET ====================================== */ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } html{ font-size:16px; -webkit-text-size-adjust:100%; } body{ font-family:var(--font-sans); background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background var(--transition),color var(--transition); } h1,h2,h3{ line-height:1.25; letter-spacing:-.01em; } img, canvas{ display:block; max-width:100%; } button, input{ font:inherit; } a{ color:var(--primary); text-decoration:none; transition:color var(--transition); } a:hover{ color:var(--primary-dark); text-decoration:underline; } :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; } /* ====================================== PAGE ====================================== */ .container, .loan-page{ max-width:var(--container); margin:0 auto; padding:0 20px; } .loan-page{ padding:20px; } .page-header{ margin-bottom:24px; } .page-header h1{ font-size:2.1rem; font-weight:800; margin-bottom:10px; color:var(--text); } .page-header h1 .subtitle{ display:block; font-size:1rem; font-weight:400; color:var(--muted); margin-top:6px; line-height:1.5; max-width:72ch; } .page-header p{ font-size:.96rem; color:var(--muted); max-width:65ch; } .search-wrap{ position:relative; max-width:480px; } .search-box{ display:block; width:100%; max-width:480px; height:46px; margin-top:14px; padding:0 16px; border:1px solid var(--gray-300); border-radius:10px; background:var(--card); color:var(--text); font-size:.94rem; transition:border-color var(--transition),box-shadow var(--transition),background var(--transition),color var(--transition); } .search-box:focus{ outline:none; border-color:var(--primary); box-shadow:var(--focus-ring); } .search-results{ display:none; position:absolute; top:100%; left:0; right:0; margin-top:4px; background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-hover); overflow:hidden; z-index:40; max-height:320px; overflow-y:auto; } .search-results.is-open{ display:block; } .search-results .search-result-item{ display:block; border-radius:0; box-shadow:none; border:none; border-bottom:1px solid var(--border); } .search-results .search-result-item:last-child{ border-bottom:none; } .search-results .search-result-item:hover{ background:var(--bg-secondary); transform:none; } .search-empty{ padding:14px 16px; color:var(--muted); font-size:.9rem; } /* ====================================== ADS ====================================== */ .ad-box{ width:100%; border:2px dashed var(--border); border-radius:var(--radius); background:var(--bg-secondary); min-height:120px; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-weight:600; } .top-ad{ margin-bottom:20px; } .bottom-ad{ margin-top:24px; } .bottom-ad .ad-box{ min-height:250px; } .in-content-ad{ margin-bottom:22px; } .sidebar-ad{ min-height:300px; } /* ====================================== LAYOUT ====================================== */ .page-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; } .main-content{ min-width:0; } .sidebar{ min-width:0; } .sidebar-sticky{ display:flex; flex-direction:column; gap:22px; } .sidebar-sticky > .sidebar-card:last-child{ position:sticky; top:96px; } /* ====================================== CARDS ====================================== */ .card, .sidebar-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); transition:box-shadow var(--transition); } .section-card{ padding:20px 22px; margin-bottom:22px; } .sidebar-card{ padding:20px 22px; margin-bottom:22px; } .section-header{ margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--border); } .section-header h2{ font-size:1.3rem; font-weight:700; position:relative; padding-left:14px; } .section-header h2::before{ content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:4px; border-radius:2px; background:var(--primary); } /* ====================================== SEO / GUIDE CONTENT ====================================== */ .seo-content h2, .seo-content h3{ margin-top:24px; margin-bottom:10px; font-size:1.15rem; font-weight:700; color:var(--text); } .seo-content p{ margin-bottom:14px; color:var(--text); font-size:1rem; line-height:1.7; } .seo-content p:last-child{ margin-bottom:0; } .seo-content ul, .seo-content ol{ padding-left:20px; } .seo-content li{ margin-bottom:10px; line-height:1.7; color:var(--text); } .seo-content li:last-child{ margin-bottom:0; } .seo-content h2:first-child, .seo-content h3:first-child{ margin-top:0; } .seo-content dl{ margin:0; } .seo-content dt{ font-weight:700; font-size:.95rem; color:var(--text); margin:20px 0 5px; padding-left:12px; border-left:3px solid var(--primary); line-height:1.4; } .seo-content dt:first-of-type{ margin-top:0; } .seo-content dd{ margin:0 0 0 0; padding:8px 12px 12px 12px; color:var(--text); line-height:1.7; border-bottom:1px solid var(--border); } .formula-box{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--gray-50); border:1px solid var(--border); border-radius:8px; padding:14px 18px; margin:6px 0 16px; font-size:.92rem; line-height:1.8; color:var(--text); overflow-x:auto; } /* ====================================== FORMS ====================================== */ .form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .form-group{ min-width:0; } .form-group label{ display:block; font-size:.84rem; font-weight:600; margin-bottom:7px; color:var(--text); } .form-group input, .form-group select{ width:100%; height:46px; padding:0 14px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); font-size:.94rem; transition:border-color var(--transition),box-shadow var(--transition); } .form-group select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23808080' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer; } .form-group input:hover, .form-group select:hover{ border-color:var(--gray-400); } .form-group input:focus, .form-group select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); } .field-error{ min-height:18px; margin-top:5px; font-size:.78rem; font-weight:500; color:var(--danger); } .input-error{ border-color:var(--danger)!important; box-shadow:0 0 0 3px rgba(220,38,38,.12); } /* ====================================== BUTTONS ====================================== */ .action-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } .btn{ border:none; border-radius:10px; cursor:pointer; transition:background var(--transition),transform var(--transition),box-shadow var(--transition); padding:12px 20px; font-size:.86rem; font-weight:600; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--primary); color:var(--text-on-primary); box-shadow:0 2px 8px rgba(37,99,235,.25); } .btn-primary:hover{ background:var(--primary-dark); box-shadow:0 4px 12px rgba(37,99,235,.32); } .btn-secondary{ background:var(--bg-secondary); color:var(--text); } .btn-secondary:hover{ background:var(--border); } /* ====================================== RESULTS ====================================== */ .results-section{ margin-bottom:20px; } .result-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .result-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; transition:box-shadow var(--transition),transform var(--transition); } .result-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px); } .card-label{ display:block; font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:9px; } .result-card strong{ display:block; font-size:1.05rem; font-weight:700; line-height:1.4; } .highlight-card{ border-color:var(--primary); background:linear-gradient(180deg,rgba(37,99,235,.12) 0%,var(--card) 60%); } .highlight-card strong{ color:var(--primary); font-size:1.3rem; } .success-card strong{ color:var(--success); } /* ====================================== SUMMARY ====================================== */ .summary-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .summary-card{ display:block; border:1px solid var(--border); border-radius:10px; background:var(--bg-secondary); padding:16px; font-weight:600; font-size:.95rem; color:var(--text); transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition); } a.summary-card:hover{ border-color:var(--primary); box-shadow:var(--shadow-hover); transform:translateY(-2px); text-decoration:none; color:var(--primary); } .summary-card span{ display:block; font-size:.75rem; color:var(--muted); margin-bottom:6px; font-weight:400; } .summary-card strong{ display:block; font-size:.95rem; } /* ====================================== CHARTS ====================================== */ .chart-wrapper{ position:relative; width:100%; height:340px; } .chart-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; } /* ====================================== TABLES ====================================== */ .table-wrapper{ overflow:auto; max-height:560px; width:100%; border:1px solid var(--border); border-radius:10px; } /* Long reference tables (Amortization Schedule, Year-wise Summary) read better flowing with the page than boxed in a fixed-height scroll area — keep horizontal scroll for narrow screens only. */ .table-wrapper--flow{ overflow-x:auto; overflow-y:visible; max-height:none; } .table-wrapper--flow thead{ position:static; } table{ width:100%; min-width:720px; border-collapse:collapse; } thead{ background:var(--bg-secondary); position:sticky; top:0; z-index:1; } th{ padding:12px; border-bottom:2px solid var(--border); border-right:1px solid var(--border); text-align:center; white-space:nowrap; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); } th:last-child{ border-right:none; } td{ padding:11px 10px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); text-align:center; white-space:nowrap; font-size:.82rem; font-variant-numeric:tabular-nums; } td:last-child{ border-right:none; } tbody tr:nth-child(even){ background:var(--bg-secondary); } tbody tr:hover{ background:rgba(37,99,235,.12); } .table-actions{ margin-top:14px; } /* ====================================== SCHEDULE TOOLS ====================================== */ .schedule-toolbar{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .schedule-filter{ width:220px; height:40px; padding:0 12px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); font-size:.9rem; } .schedule-search{ flex:1; min-width:220px; height:40px; padding:0 12px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); font-size:.9rem; } /* ====================================== PAGINATION ====================================== */ .pagination{ display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; } .pagination span{ font-size:.85rem; font-weight:600; color:var(--muted); min-width:100px; text-align:center; } /* ====================================== EXPORT CENTER ====================================== */ .export-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; } /* ====================================== ADVANCED ====================================== */ .advanced-card{ overflow:hidden; margin-bottom:20px; } .advanced-toggle{ width:100%; border:none; background:var(--card); color:var(--text); display:flex; align-items:center; justify-content:space-between; padding:18px; cursor:pointer; font-weight:700; } .advanced-content{ padding:18px; border-top:1px solid var(--border); } .advanced-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } /* ====================================== SCENARIOS ====================================== */ .scenario-toolbar{ display:flex; gap:10px; margin-bottom:16px; } .scenario-toolbar input{ flex:1; height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); } .scenario-list{ display:flex; flex-direction:column; gap:12px; } .scenario-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--border); border-radius:10px; padding:14px; background:var(--bg-secondary); } .scenario-name{ font-size:.9rem; font-weight:600; } .scenario-actions{ display:flex; gap:8px; } .empty-state{ text-align:center; padding:20px; border:1px dashed var(--border); border-radius:10px; color:var(--muted); } /* ====================================== SIDEBAR ====================================== */ .sidebar-card h3{ font-size:1rem; margin-bottom:12px; } .sidebar-links{ list-style:none; } .sidebar-links li{ margin-bottom:10px; } .sidebar-card-title{ font-size:1rem; margin-bottom:12px; } .recent-calc-list{ list-style:none; } .recent-calc-list li{ margin-bottom:10px; } .recent-calc-list li:last-child{ margin-bottom:0; } .recent-calc-list a{ display:block; text-decoration:none; padding:8px 10px; border-radius:8px; transition:background var(--transition); } .recent-calc-list a:hover{ background:var(--bg-secondary); } .recent-calc-name{ display:block; font-size:.88rem; font-weight:600; color:var(--text); } .recent-calc-meta{ display:block; font-size:.78rem; color:var(--muted); margin-top:2px; } /* ====================================== UTILITIES ====================================== */ .hidden{ display:none!important; } /* ====================================== TABLET ====================================== */ @media (max-width:1100px){ .page-layout{ grid-template-columns:1fr; } .sidebar-sticky > .sidebar-card:last-child{ position:relative; top:auto; } .result-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .summary-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .chart-grid{ grid-template-columns:1fr; } .advanced-grid{ grid-template-columns:1fr; } } /* ====================================== ACTION GRID ====================================== */ .action-grid{ display:grid; grid-template-columns: repeat( auto-fit, minmax(180px,1fr) ); gap:12px; } /* ====================================== MOBILE ====================================== */ @media (max-width:768px){ .loan-page{ padding:14px; } .page-header h1{ font-size:1.55rem; } .form-grid{ grid-template-columns:1fr; } .result-grid{ grid-template-columns:1fr; } .summary-grid{ grid-template-columns:1fr; } .chart-wrapper{ height:280px; } .action-bar{ flex-direction:column; } .pagination{ flex-direction:column; align-items:stretch; } .pagination .btn{ width:100%; } .pagination span{ text-align:center; } .schedule-filter{ max-width:100%; } .schedule-toolbar{ flex-direction:column; } .schedule-filter, .schedule-search{ width:100%; max-width:100%; } .action-bar .btn{ width:100%; } .export-actions{ flex-direction:column; } .export-actions .btn{ width:100%; } .scenario-toolbar{ flex-direction:column; } .scenario-toolbar .btn{ width:100%; } .scenario-card{ flex-direction:column; align-items:flex-start; } .scenario-actions{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; } .scenario-actions .btn{ width:100%; } .section-card, .sidebar-card{ padding:14px; } table{ min-width:650px; } .table-wrapper{ max-height:420px; } .table-wrapper--flow{ max-height:none; } .bottom-ad .ad-box{ min-height:180px; } } /* ====================================== SMALL MOBILE ====================================== */ @media (max-width:480px){ .page-header h1{ font-size:1.35rem; } .section-header h2{ font-size:.98rem; } .result-card strong{ font-size:.95rem; } .highlight-card strong{ font-size:1.05rem; } .summary-card strong{ font-size:.9rem; } .btn{ padding:10px 14px; font-size:.82rem; } th, td{ font-size:.74rem; } } /* ====================================== PRINT ====================================== */ @media print{ body{ background:#fff; } .top-ad, .bottom-ad, .sidebar, .action-bar, .export-actions, .scenario-toolbar, .scenario-actions, #saveScenarioBtn, #copyLinkBtn, #printBtn{ display:none !important; } .page-layout{ display:block; } .card, .sidebar-card, .result-card{ box-shadow:none; border:1px solid #d1d5db; } .result-grid{ grid-template-columns:repeat(2,1fr); } .summary-grid{ grid-template-columns:repeat(2,1fr); } .chart-grid{ grid-template-columns:1fr; } .chart-wrapper{ height:300px; } table{ min-width:100%; } /* * Schedule/summary tables are scroll-constrained on screen * (.table-wrapper has max-height + overflow:auto). Printing a * scrollable box only captures the visible portion in most * browsers — lift that constraint here so the FULL table * (every row, rendered in full by calculator-init.js's * beforeprint handler) actually appears in the printed report. */ .table-wrapper{ max-height:none !important; overflow:visible !important; } .table-wrapper table{ table-layout:auto; } thead{ display:table-header-group; } tr{ page-break-inside:avoid; } .pagination, #schedulePagination, #optimizedPagination, .schedule-toolbar{ display:none !important; } } /* ====================================== FRAMEWORK COMPONENTS V4 ====================================== */ .component-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); } .component-grid{ display:grid; gap:16px; } .component-actions{ display:flex; gap:10px; flex-wrap:wrap; } .component-table{ overflow-x:auto; } .component-chart{ position:relative; width:100%; height:340px; } .component-ad{ border:2px dashed var(--border); border-radius:var(--radius); background:var(--bg-secondary); } .component-empty{ text-align:center; padding:20px; color:var(--muted); } /* ====================================== V4 END ====================================== */ .site-header{ background:var(--card); border-bottom:1px solid var(--border); padding:16px 0; position:sticky; top:0; z-index:50; box-shadow:0 1px 0 rgba(0,0,0,.02); transition:background var(--transition),border-color var(--transition); } .header-inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; } .site-logo{ font-size:22px; font-weight:800; color:var(--text); text-decoration:none; letter-spacing:-.02em; } .main-nav{ display:flex; flex-wrap:wrap; gap:6px; } .main-nav a{ text-decoration:none; color:var(--muted); font-size:.9rem; font-weight:600; padding:8px 12px; border-radius:8px; transition:background var(--transition),color var(--transition); } .main-nav a:hover{ background:var(--bg-secondary); color:var(--primary); text-decoration:none; } .header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .nav-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:38px; height:38px; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); cursor:pointer; transition:background var(--transition),border-color var(--transition); } .nav-toggle span{ display:block; width:18px; height:2px; background:var(--text); border-radius:2px; transition:transform var(--transition),opacity var(--transition); } .nav-toggle:hover{ background:var(--border); } .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--border); border-radius:50%; background:var(--bg-secondary); color:var(--text); font-size:1.05rem; line-height:1; cursor:pointer; transition:background var(--transition),border-color var(--transition),transform var(--transition); flex-shrink:0; } .theme-toggle:hover{ background:var(--border); } .theme-toggle:active{ transform:scale(.92); } .theme-toggle:focus-visible{ outline:none; box-shadow:var(--focus-ring); } .breadcrumb-trail{ background:var(--bg-secondary); border-bottom:1px solid var(--border); font-size:.85rem; transition:background var(--transition),border-color var(--transition); } .breadcrumb-trail .container{ display:flex; align-items:center; gap:8px; padding-top:10px; padding-bottom:10px; } .breadcrumb-trail a{ color:var(--muted); text-decoration:none; font-weight:600; } .breadcrumb-trail a:hover{ color:var(--primary); text-decoration:underline; } .breadcrumb-sep{ color:var(--muted); } .breadcrumb-current{ color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .site-footer{ margin-top:48px; padding:44px 0; background:var(--card); border-top:1px solid var(--border); color:var(--muted); font-size:.9rem; transition:background var(--transition),border-color var(--transition); } .site-footer h3{ font-size:1rem; font-weight:700; color:var(--text); margin-bottom:14px; } .site-footer p{ line-height:1.6; } .footer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; } .footer-grid ul{ list-style:none; padding:0; margin:0; } .footer-grid li{ margin-bottom:10px; } .footer-grid a{ color:var(--muted); } .footer-grid a:hover{ color:var(--primary); } .footer-bottom{ margin-top:30px; padding-top:20px; border-top:1px solid var(--border); font-size:.85rem; } @media(max-width:768px){ .header-inner{ flex-wrap:wrap; } .nav-toggle{ display:flex; } .main-nav{ display:none; flex-direction:column; flex-basis:100%; gap:2px; padding-top:10px; border-top:1px solid var(--border); margin-top:12px; } .main-nav.is-open{ display:flex; } .main-nav a{ padding:12px; border-radius:8px; } .footer-grid{ grid-template-columns:1fr; } } /* ================================================================== Generic reusable widgets (toggle group, prefixed input, summary table, result placeholder, side-by-side panels). Promoted from the GST calculator so any future calculator (tax-type or otherwise) that genuinely needs a 2-option mode toggle / single-shot result summary can reuse these without duplicating CSS. Use only where the calculator's domain actually calls for them — see NEW-CALCULATOR-PROMPT-TEMPLATE.md. ================================================================== */ .calc-toggle-group{ display:flex; gap:8px; } .calc-toggle-btn{ flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); color:var(--text); font:inherit; font-size:0.92rem; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; } .calc-toggle-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; } .calc-form-hint{ margin:6px 0 0; font-size:0.82rem; color:var(--muted); } .calc-input-group{ display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .calc-input-group .calc-input-prefix{ padding:0 12px; color:var(--muted); background:transparent; } .calc-input-group input{ border:none; border-radius:0; flex:1; } .calc-input-group input:focus{ outline:none; box-shadow:none; } .visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .calc-result-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:40px 20px; color:var(--muted); font-size:0.95rem; } .calc-result-placeholder p{ margin:0; } .calc-result-placeholder-icon{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border:1px solid var(--border); border-radius:var(--radius); color:var(--muted); } .calc-result-hidden{ display:none; } .calc-summary-table{ width:100%; min-width:0; table-layout:fixed; border-collapse:collapse; margin-top:16px; font-size:0.92rem; } .calc-summary-table td:first-child{ width:60%; } .calc-summary-table td{ padding:10px 12px; border-bottom:1px solid var(--border); } .calc-summary-table td:last-child{ text-align:right; font-weight:600; } .calc-summary-table tr:last-child td{ border-bottom:none; } .calc-summary-table .calc-summary-highlight td{ color:var(--primary); font-weight:700; } /* Two-panel side-by-side layout (form + results) for calculators that benefit from showing both at once on desktop, stacking on mobile. */ .calc-side-by-side{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; } .calc-side-by-side > *{ min-width:0; } .calc-side-by-side .form-grid{ grid-template-columns:1fr; gap:10px; } .calc-side-by-side .results-section .result-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:900px){ .calc-side-by-side{ grid-template-columns:1fr; } .calc-side-by-side .results-section .result-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:560px){ .calc-side-by-side .results-section .result-grid{ grid-template-columns:1fr; } }