/* ============================================================
Tool Kit — shared sidebar-tool grammar for CG interactive
pages (the Giving Explorer, Forecast, Foundation Model).
Canonized from structural-math.html's conventions (Jul 2026),
with the control-row family from forecast.html.
Page contract:
Requires shared.css (brand tokens) loaded first. Sidebar width
via --tool-sidebar-w (default 300px).
============================================================ */
.tool-page { font-family: var(--font-ui, 'Inter', system-ui, sans-serif); min-height: 100vh; }
/* ---- Shell ---- */
.tool-wrap { display: flex; min-height: calc(100vh - var(--nav-total-height, 80px)); padding-top: var(--nav-total-height, 80px); }
.tool-sidebar {
width: var(--tool-sidebar-w, 300px);
flex-shrink: 0;
background: rgba(255,255,255,0.02);
border-right: 1px solid rgba(255,255,255,0.08);
padding: 20px 16px;
overflow-y: auto;
max-height: calc(100vh - var(--nav-total-height, 80px));
position: sticky;
top: var(--nav-total-height, 80px);
}
.tool-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 22px 26px 40px; }
.sidebar-toggle {
display: none;
width: 100%;
padding: 10px 16px;
background: rgba(255,255,255,0.04);
border: none;
border-bottom: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.8);
font-family: inherit;
font-size: 0.85rem;
cursor: pointer;
text-align: left;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.06); }
/* ---- Intro beat (mirrors the story kit's kicker + claim) ---- */
.tool-intro { margin-bottom: 20px; max-width: 800px; }
.tool-intro .ti-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(var(--brand-accent-rgb), 0.7); margin-bottom: 6px; }
.tool-intro h2 { font-size: 1.5rem; color: #fff; font-weight: 700; margin-bottom: 6px; }
.tool-intro p { font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.6); }
.tool-intro p a { color: var(--brand-accent); text-decoration: none; }
.tool-intro p a:hover { text-decoration: underline; }
/* ---- Control sections ---- */
.ctrl-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ctrl-section:last-child { border-bottom: none; margin-bottom: 0; }
.ctrl-header { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); margin-bottom: 10px; }
.ctrl-subnote { font-size: 0.72rem; color: rgba(255,255,255,0.4); line-height: 1.4; margin: -4px 0 10px; }
/* ---- Control rows (label / live value / note) ---- */
.ctrl-row { margin-bottom: 14px; }
.ctrl-row:last-child { margin-bottom: 0; }
.ctrl-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 8px; }
.ctrl-label { font-size: 0.83rem; color: rgba(255,255,255,0.78); }
.ctrl-val { font-size: 0.85rem; font-weight: 600; color: var(--brand-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctrl-note { font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-top: 5px; line-height: 1.4; }
.ctrl-note a { color: var(--brand-accent); text-decoration: none; }
.ctrl-note a:hover { text-decoration: underline; }
/* ---- Preset pills ---- */
.preset-group { display: flex; flex-wrap: wrap; gap: 6px; position: relative; }
.preset-btn {
padding: 5px 12px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.75);
font-family: inherit;
font-size: 0.78rem;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.preset-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.preset-btn.active { background: rgba(var(--brand-accent-rgb),0.15); border-color: var(--brand-accent); color: #fff; }
/* ---- Segmented controls ---- */
.ctrl-segments { display: flex; background: rgba(255,255,255,0.04); border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.ctrl-segments-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,0.04); border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.ctrl-seg { flex: 1; padding: 6px 10px; text-align: center; cursor: pointer; font-size: 0.78rem; color: rgba(255,255,255,0.6); transition: all 0.15s; border: none; background: transparent; font-family: inherit; }
.ctrl-segments-grid .ctrl-seg { flex: none; border-right: 1px solid rgba(255,255,255,0.06); }
.ctrl-segments-grid .ctrl-seg:nth-child(4n) { border-right: none; }
.ctrl-segments-grid .ctrl-seg:nth-child(n+5) { border-top: 1px solid rgba(255,255,255,0.06); }
.ctrl-seg:hover { color: rgba(255,255,255,0.85); }
.ctrl-seg.active { background: rgba(var(--brand-accent-rgb),0.18); color: #fff; font-weight: 500; }
/* ---- Toggle checkboxes ---- */
.ctrl-toggle { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; font-size: 0.83rem; color: rgba(255,255,255,0.75); }
.ctrl-toggle:hover { color: rgba(255,255,255,0.95); }
.ctrl-toggle input[type="checkbox"] { accent-color: var(--brand-accent); cursor: pointer; }
/* ---- Sliders & inputs ---- */
.tool-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.12);
outline: none;
}
.tool-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-accent); border: 2px solid #0B1525; cursor: pointer; }
.tool-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--brand-accent); border: 2px solid #0B1525; cursor: pointer; }
/* Dual-thumb range (two overlaid inputs, e.g. the Explorer's year window) */
.range-display { text-align: center; font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.range-slider { position: relative; height: 28px; }
.range-slider input[type="range"] { position: absolute; width: 100%; top: 0; height: 28px; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; margin: 0; }
.range-slider input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; }
.range-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-accent); border: 2px solid #0B1525; cursor: pointer; pointer-events: auto; margin-top: -6px; }
.range-slider input[type="range"]::-moz-range-track { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; border: none; }
.range-slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--brand-accent); border: 2px solid #0B1525; cursor: pointer; pointer-events: auto; }
.ctrl-input { width: 100%; padding: 8px 10px; border-radius: 7px; font-size: 0.85rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); color: #fff; font-variant-numeric: tabular-nums; font-family: inherit; }
/* ---- Readout tiles ---- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.stat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(var(--brand-accent-rgb), 0.2); border-radius: 12px; padding: 16px; }
.stat-card.primary { background: rgba(var(--brand-accent-rgb),0.1); border-color: var(--brand-accent); }
.stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.stat-value { font-size: 1.85rem; font-weight: 700; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 0.74rem; color: rgba(255,255,255,0.45); margin-top: 5px; }
/* ---- Chart area ---- */
.chart-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 18px 20px 16px; margin-bottom: 20px; }
.chart-title { font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 12px; }
.chart-wrap { position: relative; min-height: 300px; }
.chart-wrap canvas { width: 100% !important; }
.chart-footer { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 12px; gap: 16px; flex-wrap: wrap; }
.chart-sources { font-size: 0.72rem; color: rgba(255,255,255,0.4); line-height: 1.5; flex: 1; min-width: 200px; }
.chart-sources a { color: var(--brand-accent); text-decoration: none; }
.chart-sources a:hover { text-decoration: underline; }
.chart-actions { display: flex; gap: 8px; flex-shrink: 0; }
.chart-action-btn {
padding: 5px 14px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.65);
font-family: inherit;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.15s;
}
.chart-action-btn:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: var(--brand-accent); }
.chart-action-btn.reset-zoom { border-color: var(--brand-accent); color: var(--brand-accent); }
/* ---- Mobile ---- */
@media (max-width: 767px) {
.tool-wrap { flex-direction: column; padding-top: 0; }
.sidebar-toggle { display: block; margin-top: var(--nav-total-height, 80px); }
.tool-sidebar {
display: none;
width: 100%;
max-height: 55vh;
position: static;
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tool-sidebar.open { display: block; }
.tool-main { padding: 14px; }
.stat-row { grid-template-columns: repeat(2, 1fr); }
.chart-footer { flex-direction: column; }
}
/* ---- Light theme ---- */
[data-theme="light"] .tool-page { background: #F6F6F6; color: #333; }
[data-theme="light"] .tool-sidebar { background: #fff; border-right-color: var(--brand-border, #e0e0e0); }
[data-theme="light"] .sidebar-toggle { background: #fff; border-bottom-color: var(--brand-border, #e0e0e0); color: #555; }
[data-theme="light"] .tool-intro h2 { color: #1a1a1a; }
[data-theme="light"] .tool-intro p { color: #555; }
[data-theme="light"] .ctrl-section { border-bottom-color: var(--brand-border, #e0e0e0); }
[data-theme="light"] .ctrl-header { color: #999; }
[data-theme="light"] .ctrl-subnote { color: #999; }
[data-theme="light"] .ctrl-label { color: #444; }
[data-theme="light"] .ctrl-note { color: #999; }
[data-theme="light"] .preset-btn { border-color: var(--brand-border, #e0e0e0); background: #fff; color: #555; }
[data-theme="light"] .preset-btn:hover { background: #f5f5f5; border-color: #ccc; }
[data-theme="light"] .preset-btn.active { background: rgba(var(--brand-accent-rgb),0.08); border-color: var(--brand-accent); color: #222; }
[data-theme="light"] .ctrl-segments, [data-theme="light"] .ctrl-segments-grid { background: #f5f5f5; border-color: var(--brand-border, #e0e0e0); }
[data-theme="light"] .ctrl-segments-grid .ctrl-seg { border-right-color: #e8e8e8; border-top-color: #e8e8e8; }
[data-theme="light"] .ctrl-seg { color: #888; }
[data-theme="light"] .ctrl-seg:hover { color: #333; }
[data-theme="light"] .ctrl-seg.active { background: rgba(var(--brand-accent-rgb),0.1); color: #222; }
[data-theme="light"] .ctrl-toggle { color: #555; }
[data-theme="light"] .ctrl-toggle:hover { color: #222; }
[data-theme="light"] .tool-slider { background: #ddd; }
[data-theme="light"] .tool-slider::-webkit-slider-thumb { border-color: #fff; }
[data-theme="light"] .tool-slider::-moz-range-thumb { border-color: #fff; }
[data-theme="light"] .range-display { color: #666; }
[data-theme="light"] .range-slider input[type="range"]::-webkit-slider-runnable-track { background: #ddd; }
[data-theme="light"] .range-slider input[type="range"]::-webkit-slider-thumb { border-color: #fff; }
[data-theme="light"] .range-slider input[type="range"]::-moz-range-track { background: #ddd; }
[data-theme="light"] .range-slider input[type="range"]::-moz-range-thumb { border-color: #fff; }
[data-theme="light"] .ctrl-input { background: #f3f4f6; border-color: #d1d5db; color: #333; }
[data-theme="light"] .stat-card { background: #fff; }
[data-theme="light"] .stat-label { color: #888; }
[data-theme="light"] .stat-value { color: #1a1a1a; }
[data-theme="light"] .stat-sub { color: #888; }
[data-theme="light"] .chart-card { background: #fff; border-color: var(--brand-border, #e0e0e0); }
[data-theme="light"] .chart-title { color: #333; }
[data-theme="light"] .chart-sources { color: #999; }
[data-theme="light"] .chart-action-btn { border-color: var(--brand-border, #e0e0e0); background: #fff; color: #666; }
[data-theme="light"] .chart-action-btn:hover { background: #f5f5f5; color: #222; }