/* ==========================================================================
   Site look for the material tools. Loaded after each tool's own <style>, so
   the tools keep working unchanged and simply take on the site's typography,
   colours and controls.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --navy: #0A3367; --navy-700: #0E3E7A; --navy-500: #2C6BB5; --navy-100: #DCE6F3; --navy-050: #EEF3FA;
    --accent: #F26B1D; --accent-600: #D95511;
    --text: #16202E; --text-2: #45536A; --text-3: #6B778C; --border: #E2E7EF; --bg-soft: #F4F6FA;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: #fff; color: var(--text); padding: 0;
}
/* The site draws the frame around the tool, so the tool's own card goes flat. */
.card { max-width: none; margin: 0; border-radius: 0; box-shadow: none; padding: 28px 32px; }
h2 { color: var(--navy); font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 8px; }

.section-title, .section-title-dark {
    font-size: 1rem; font-weight: 700; color: var(--navy);
    margin: 30px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.section-title-dark { border-bottom: 2px solid var(--navy); }

label { font-size: 0.8rem; font-weight: 500; color: var(--text-2); }
input[type=number], input[type=text], select, textarea {
    font-family: inherit; font-size: 0.9rem; color: var(--text);
    border: 1px solid #CFD6DF; border-radius: 8px; padding: 9px 10px; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input[type=number]:hover, input[type=text]:hover, select:hover, textarea:hover { border-color: #9FB3CC; }
input[type=number]:focus, input[type=text]:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(44, 107, 181, 0.18);
}
input:disabled, input[readonly] { background: var(--bg-soft); color: var(--text-2); }
textarea { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; }

/* Primary action: navy. Fitting and saving: outlined. */
button {
    font-family: inherit; font-weight: 650; font-size: 0.95rem; border-radius: 999px; padding: 13px 18px;
    background: var(--navy); transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 6px 16px -8px rgba(10, 51, 103, 0.6);
}
button:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn-success { background: var(--accent); box-shadow: 0 6px 16px -8px rgba(242, 107, 29, 0.7); }
.btn-success:hover { background: var(--accent-600); }
.btn-save, .btn-load, .btn-secondary {
    background: #fff; color: var(--navy); border: 1px solid var(--navy-100); box-shadow: none;
}
.btn-save:hover, .btn-load:hover, .btn-secondary:hover { background: var(--navy-050); border-color: var(--navy-500); }
.copy-btn { background: var(--navy-050); color: var(--navy); border-radius: 999px; font-weight: 600; box-shadow: none; }
.copy-btn:hover { background: var(--navy-100); }

.status { color: var(--text-2); font-weight: 600; }
.debug-box { background: #0B1B2E; color: #9FE6B8; border-radius: 8px; }

.results-container { border-top: 1px solid var(--border); }
.chart-wrapper { border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.table-section-title { color: var(--navy); }
.table-wrapper { border: 1px solid var(--border); border-radius: 10px; }
.data-table { font-family: inherit; font-variant-numeric: tabular-nums; }
.data-table th { background: var(--navy-050); color: var(--navy); border-bottom: 1px solid var(--navy-100); border-right: 1px solid var(--border); }
.data-table td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); color: var(--text-2); }
.data-table tbody tr:hover td { background: #FAFBFD; }

@media (max-width: 760px) {
    .card { padding: 18px 16px; }
    .grid, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .btn-row { flex-wrap: wrap; }
}
@media (max-width: 460px) {
    .grid, .grid-4 { grid-template-columns: 1fr; }
}

/* --- On-site insulated cube: its own class names, same look ----------------- */
.btn-primary {
    background: var(--navy); color: #fff; border: 0; border-radius: 999px;
    box-shadow: 0 6px 16px -8px rgba(10, 51, 103, 0.6);
}
.btn-primary:hover { background: var(--navy-700); }
.btn-save, .btn-load { border-radius: 999px; font-weight: 650; }
.grid-2, .grid-6 { gap: 12px; }
input[readonly] { background: var(--bg-soft); color: var(--navy); font-weight: 600; }
.debug-console {
    background: var(--bg-soft); color: var(--text-2); border: 1px solid var(--border); border-radius: 10px;
    font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; height: 120px;
}
.debug-console .info { color: var(--navy-500); }
.debug-console .success { color: #1E7E34; }
.debug-console .error { color: #C5221F; font-weight: 600; }
.results-panel {
    background: var(--navy-050); border: 1px solid var(--navy-100); border-radius: 12px; padding: 16px 20px;
}
.results-panel span { color: var(--navy); }
.chart-container { border: 1px solid var(--border); border-radius: 12px; }
#chartControls label { color: var(--navy); }

@media (max-width: 760px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-6 { grid-template-columns: repeat(2, 1fr); }
}