/* Weights modal — extracted from components.css (structural). */

@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width:600px){
}
@media (max-width: 768px){
}
@media (max-width: 640px){
}
@media (max-width: 480px){
}
@media (max-width: 900px){
}
@media (max-width: 900px){
}
@media (max-width:720px){
}
@media (max-width:768px){
}
@media (max-width:640px){
}
@media (max-width:480px){
}
@media (max-width: 900px){
}
@media (max-width: 640px){
}
@media (min-width: 901px){
}
@media (max-width:768px){
}
@media (max-width: 900px){
}
@media (max-width:640px){
}
@media (max-width: 640px){
}
.wt-tpl-input { font-size:11px; padding:5px 10px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); background:var(--surface); outline:none; width:160px; transition:border-color 0.15s; }
.wt-tpl-name { font-weight:600; }
.wt-btn-primary, .wt-btn-secondary { font-size:12px; font-weight:600; padding:8px 18px; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; transition:background 0.15s, border-color 0.15s, transform 0.1s; }
.wt-btn-primary::after, .wt-btn-secondary::after { content:"→"; margin-left:3px; display:inline-block; transform:translateX(0); font-weight:500; transition:transform 0.18s cubic-bezier(.16,1,.3,1); }
.wt-btn-primary:hover::after, .wt-btn-secondary:hover::after { transform:translateX(3px); }
.wt-btn-primary:active, .wt-btn-secondary:active { transform:translateY(0.5px); }
.wt-btn-secondary { background:var(--surface); box-shadow:0 1px 2px var(--hover-subtle); }
.wt-btn-secondary:hover { background:var(--gray-50); }
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 1100px){
}
@media (max-width: 768px){
}
.wt-btn-secondary { background: var(--gray-100) !important; border: 1px solid var(--line-2); border-radius: 8px; font-weight: 600; padding: 9px 18px; }
.wt-btn-secondary:hover { background: var(--gray-200) !important; }
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (max-width: 480px){
}
@media (max-width: 768px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (min-width: 641px) and (max-width: 1024px){
}
html body .wt-tpl-input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12); }
html body .wt-tpl-input:focus { box-shadow: 0 0 0 3px var(--brand-amber-18); }
@media (min-width: 769px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (min-width: 901px){
}
.wt-body { flex:1; overflow-y:auto; padding:0 28px 20px; max-height:52vh; }
.wt-alloc-bar { display:flex; align-items:center; gap:12px; padding:14px 28px; border-bottom:1px solid var(--gray-100); flex-shrink:0; }
.wt-alloc-label { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; }
.wt-alloc-track { flex:1; height:6px; border-radius:999px; background:var(--gray-100); overflow:hidden; }
.wt-alloc-fill { height:100%; border-radius:999px; background:var(--brand-amber); transition:width 0.2s ease, background 0.2s ease; }
.wt-alloc-fill.is-over { background:var(--red); }
.wt-alloc-fill.is-under { background:var(--text-muted); }
.wt-alloc-num { font-family:var(--font-mono); font-size:12px; font-weight:700; min-width:38px; text-align:right; }
.wt-section { border-bottom:1px solid var(--gray-100); }
.wt-section:last-of-type { border-bottom:none; }
.wt-section-dot { width:8px; height:8px; border-radius:50%; background:var(--pillar-color); flex-shrink:0; }
.wt-section-name { font-size:13px; font-weight:600; letter-spacing:-0.01em; }
.wt-section-badge { font-family:var(--font-mono); font-size:9.5px; font-weight:700; background:var(--gray-100); padding:2px 7px; border-radius:999px; }
.wt-section-slider-wrap { flex:1; min-width:80px; display:flex; align-items:center; }
.wt-section-val { font-family:var(--font-mono); font-size:11px; font-weight:700; min-width:24px; text-align:right; }
.wt-section-chevron { transition:transform 0.2s ease; flex-shrink:0; }
.wt-section.is-open .wt-section-chevron { transform:rotate(180deg); }
.wt-section-head { display:flex; align-items:center; gap:10px; width:100%; padding:14px 0; border:none; background:none; cursor:pointer; font-family:inherit; text-align:left; cursor: default; }
.wt-section-head:hover { background:var(--gray-50); margin:0 -28px; padding:14px 28px; width:calc(100% + 56px); border-radius:8px; background: none !important; margin: 0; padding: 14px 0; width: 100%; border-radius: 0; }
.wt-section-name, .wt-section-badge, .wt-section-chevron { cursor: pointer; }
.wt-section-body { display:none; padding:0 0 10px 18px; }
.wt-section.is-open .wt-section-body { display:block; }
.wt-metric { display:flex; align-items:center; gap:10px; padding:6px 0; }
.wt-metric-label { min-width:130px; font-size:11px; font-weight:500; display:flex; align-items:center; gap:4px; }
.wt-metric-tip { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:50%; font-size:8px; font-weight:700; background:var(--gray-100); cursor:help; flex-shrink:0; position:relative; opacity:0.6; transition:opacity 0.15s; }
.wt-metric-tip:hover { opacity:1; }
.wt-metric-tip:hover::after { content:attr(data-tip); position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); width:max-content; max-width:220px; padding:6px 10px; border-radius:6px; font-size:10px; font-weight:400; line-height:1.4; background:#1a1a1a; box-shadow:0 4px 12px rgba(0,0,0,0.2); z-index:100; pointer-events:none; white-space:normal; }
.wt-metric-val { font-family:var(--font-mono); font-size:10px; font-weight:700; min-width:24px; text-align:right; }
.wt-slider::-webkit-slider-thumb:hover { transform:scale(1.15); box-shadow:0 2px 8px rgba(0,0,0,0.22); }
.wt-slider:active::-webkit-slider-thumb { cursor:grabbing; transform:scale(1.1); }
.wt-slider::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--slider-accent, var(--brand-amber)); border:2.5px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,0.18); cursor:grab; }
.wt-slider::-webkit-slider-runnable-track { height:4px; border-radius:999px; background:var(--gray-200); }
.wt-templates { margin-top:16px; padding-top:16px; border-top:1px solid var(--gray-100); }
.wt-templates-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.wt-templates-label { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.wt-templates-save { display:flex; gap:6px; margin-left:auto; }
.wt-tpl-input { font-size:11px; padding:5px 10px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); background:var(--surface); outline:none; width:160px; transition:border-color 0.15s; }
.wt-tpl-save-btn { font-size:10px; font-weight:600; padding:5px 12px; border:none; border-radius:var(--radius-sm); background:var(--gray-100); cursor:pointer; transition:background 0.15s; }
.wt-tpl-save-btn:hover { background:var(--gray-200); }
.wt-tpl-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--gray-50); font-size:11px; }
.wt-tpl-row:last-child { border-bottom:none; }
.wt-tpl-name { font-weight:600; }
.wt-tpl-scope { font-family:var(--font-mono); font-size:9px; }
.wt-tpl-scope.is-global { padding:1px 6px; background:rgba(255,180,0,0.1); border-radius:999px; font-weight:500; }
.wt-tpl-actions { margin-left:auto; display:flex; gap:4px; }
.wt-tpl-btn { font-size:10px; font-weight:600; padding:4px 10px; border:none; border-radius:var(--radius-sm); background:var(--gray-100); cursor:pointer; transition:background 0.15s; }
.wt-tpl-btn:hover { background:var(--gray-200); }
.wt-tpl-del { border:none; background:none; cursor:pointer; font-size:11px; padding:4px 6px; border-radius:var(--radius-sm); transition:color 0.15s, background 0.15s; }
.wt-tpl-del:hover { background:rgba(239,68,68,0.08); }
.wt-footer { display:flex; align-items:center; gap:16px; padding:14px 28px; border-top:1px solid var(--gray-100); flex-shrink:0; }
.wt-footer-note { font-size:10px; line-height:1.4; flex:1; }
.wt-footer-actions { display:flex; gap:8px; flex-shrink:0; }
.wt-btn-primary, .wt-btn-secondary { font-size:12px; font-weight:600; padding:8px 18px; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; transition:background 0.15s, border-color 0.15s, transform 0.1s; }
.wt-btn-primary::after, .wt-btn-secondary::after { content:"→"; margin-left:3px; display:inline-block; transform:translateX(0); font-weight:500; transition:transform 0.18s cubic-bezier(.16,1,.3,1); }
.wt-btn-primary:hover::after, .wt-btn-secondary:hover::after { transform:translateX(3px); }
.wt-btn-primary:active, .wt-btn-secondary:active { transform:translateY(0.5px); }
.wt-btn-secondary { background:var(--surface); box-shadow:0 1px 2px var(--hover-subtle); }
.wt-btn-secondary:hover { background:var(--gray-50); }
// Pillar sliders control inter-pillar allocation (must sum to 100%).
// Sub-parameter sliders control relative importance WITHIN each pillar (independent).
document.querySelectorAll('.wt-slider').forEach(function(s) { s.addEventListener('input', function() {
    var valEl = this.closest('.wt-metric, .wt-section-head');
    if (valEl) { var v = valEl.querySelector('.wt-val'); if (v) v.textContent = this.value; }
    if (this.classList.contains('wt-pillar')) {
      var key = this.dataset.key.replace('p_','');
      var badge = document.getElementById('wt-badge-' + key);
      if (badge) badge.textContent = this.value + '%';
      updatePillarSum();
    }
  }); }
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 1100px){
}
@media (max-width: 768px){
}
.wt-slider { flex:1; height:4px; -webkit-appearance:none; appearance:none; background:var(--gray-200); border-radius:999px; outline:none; cursor:pointer; }
.wt-slider::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(245,158,11,0.4); -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--slider-accent, var(--brand-amber)); border:2.5px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,0.18); cursor:grab; margin-top:-6px; transition:transform 0.15s ease, box-shadow 0.15s ease; background: var(--brand) !important; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(255,180,0,0.4); }
.wt-btn-primary { background:var(--brand-amber); background: var(--brand) !important; font-weight: 600; border-radius: 8px; border: none; padding: 9px 18px; box-shadow: none; }
.wt-btn-primary:hover { background:rgba(255,196,51,0.95); background: var(--brand-hover) !important; }
.wt-btn-secondary { background: var(--gray-100) !important; border: 1px solid var(--line-2); border-radius: 8px; font-weight: 600; padding: 9px 18px; }
.wt-btn-secondary:hover { background: var(--gray-200) !important; }
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (max-width: 480px){
}
@media (max-width: 768px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (min-width: 641px) and (max-width: 1024px){
}
.wt-alloc-warning { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.wt-alloc-warning svg { flex-shrink: 0; }
.wt-disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }
.wt-warn-flash { animation: wtWarnFlash 0.4s ease; }
html body .wt-tpl-input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12); }
html body .wt-tpl-input:focus { box-shadow: 0 0 0 3px var(--brand-amber-18); }
@media (min-width: 769px){
}
@media (max-width: 768px){
}