/* custom_weights.html — 8-pillar weight editor. Theme-aware via tokens; gold = #FFB400. */

/* ── Header ───────────────────────────────────────────────────────────── */
.cw-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.cw-title { font-size:24px; font-weight:800; letter-spacing:-0.025em; margin:0; }
.cw-subtitle { font-size:13px; color:var(--text-muted); margin:6px 0 0; max-width:60ch; line-height:1.5; }
.cw-scope { display:flex; align-items:center; gap:var(--sp-2); }
.cw-scope-lbl { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); }

/* ── Custom dropdown ──────────────────────────────────────────────────── */
.cw-dd { position:relative; }
.cw-dd-btn {
  display:inline-flex; align-items:center; gap:8px; min-width:200px; justify-content:space-between;
  padding:8px 12px; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--surface); border:1px solid var(--border-card); color:var(--text);
  font-size:13px; font-weight:600; transition:border-color 0.15s;
}
.cw-dd-btn:hover { border-color:rgba(255,180,0,0.5); }
.cw-dd-caret { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--text-muted); }
.cw-dd-panel {
  position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:240px; max-height:320px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border-card); border-radius:var(--radius-sm);
  box-shadow:0 10px 32px rgba(0,0,0,0.22); padding:5px;
}
.cw-dd-opt {
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  padding:8px 10px; border-radius:6px; border:none; background:none; cursor:pointer;
  color:var(--text); font-size:13px; font-weight:500; transition:background 0.12s;
}
.cw-dd-opt:hover { background:var(--gray-100); }
.cw-dd-opt.is-active { background:rgba(255,180,0,0.12); color:#FFB400; font-weight:600; }
.cw-dd-sym { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }
.cw-dd-opt.is-active .cw-dd-sym { color:#FFB400; }

/* ── Pillar total ─────────────────────────────────────────────────────── */
.cw-total { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.cw-total-lbl { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
.cw-total-track { flex:1; height:6px; border-radius:var(--radius-full); background:var(--gray-100); overflow:hidden; }
.cw-total-fill { height:100%; width:100%; border-radius:var(--radius-full); background:linear-gradient(90deg, rgba(255,180,0,0.45), #FFB400); transition:width 0.25s ease; }
.cw-total-val { font-family:var(--font-mono); font-size:14px; color:var(--green); white-space:nowrap; }
.cw-total-val.is-off { color:var(--red); }
.cw-total-val strong { font-weight:700; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.cw-layout { display:grid; grid-template-columns:1fr 320px; gap:var(--sp-4); align-items:start; }
.cw-pillars { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-3); }
.cw-rail { position:sticky; top:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }

/* ── Pillar card ──────────────────────────────────────────────────────── */
.cw-card { background:var(--surface); border:1px solid var(--border-card); border-radius:var(--radius); padding:var(--sp-4); }
.cw-card-head { display:flex; align-items:center; gap:8px; margin-bottom:var(--sp-3); }
.cw-dot { width:6px; height:6px; border-radius:50%; background:#FFB400; box-shadow:0 0 0 3px rgba(255,180,0,0.15); flex-shrink:0; }
.cw-card-title { font-size:13.5px; font-weight:700; letter-spacing:-0.01em; }
.cw-card-wt { margin-left:auto; font-family:var(--font-mono); font-size:13px; font-weight:700; color:#FFB400; }

.cw-row { display:grid; grid-template-columns:1fr 1.1fr 30px; align-items:center; gap:10px; padding:4px 0; }
.cw-row label { font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-row-pillar { padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--border-card); grid-template-columns:1fr 1.1fr; }
.cw-row-pillar label { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }
.cw-val { font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--text); text-align:right; }
.cw-subs { display:flex; flex-direction:column; gap:2px; }
.cw-note-sub { font-size:11.5px; color:var(--text-muted); line-height:1.5; padding:4px 0 2px; }

/* ── Range sliders ────────────────────────────────────────────────────── */
.cw-slider { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px; background:var(--gray-200); outline:none; cursor:pointer; }
.cw-slider::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#FFB400; border:2px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,0.25); cursor:pointer; }
.cw-slider::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#FFB400; border:2px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,0.25); cursor:pointer; }
.cw-pillar { height:5px; }
.cw-pillar::-webkit-slider-thumb { width:16px; height:16px; }
.cw-pillar::-moz-range-thumb { width:16px; height:16px; }

/* ── Right rail ───────────────────────────────────────────────────────── */
.cw-actions { display:flex; gap:var(--sp-2); }
.cw-btn { display:inline-flex; align-items:center; justify-content:center; padding:9px 16px; border-radius:var(--radius-full); font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:background 0.15s, border-color 0.15s; flex:1; }
.cw-btn-solid { background:#FFB400; color:#1a1304; }
.cw-btn-solid:hover { background:#FFB400; }
.cw-btn-ghost { background:transparent; border-color:var(--border-card); color:var(--text-secondary); }
.cw-btn-ghost:hover { border-color:rgba(255,180,0,0.5); color:var(--text); }
.cw-btn-sm { flex:0 0 auto; padding:8px 14px; }
.cw-saved { padding:8px 14px; border-radius:var(--radius-sm); background:rgba(22,163,74,0.12); color:var(--green); font-size:12px; font-weight:600; text-align:center; }
.cw-warn { font-size:12px; color:var(--text-secondary); line-height:1.55; background:var(--gray-50); border:1px solid var(--border-card); border-left:3px solid #FFB400; border-radius:8px; padding:12px 14px; }
.cw-warn strong { color:var(--text); }

/* ── Templates ────────────────────────────────────────────────────────── */
.cw-tpl-add { display:flex; gap:8px; margin-bottom:var(--sp-2); }
.cw-tpl-input { flex:1; min-width:0; padding:8px 11px; border:1px solid var(--border-card); border-radius:var(--radius-sm); background:var(--gray-50); color:var(--text); font-size:13px; }
.cw-tpl-input:focus { outline:none; border-color:rgba(255,180,0,0.55); background:var(--surface); }
.cw-tpl-input::placeholder { color:var(--text-muted); }
.cw-tpl-list { display:flex; flex-direction:column; }
.cw-tpl-empty { padding:8px 0; color:var(--text-muted); font-size:12px; }
.cw-tpl-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border-card); }
.cw-tpl-row:last-child { border-bottom:none; }
.cw-tpl-tname { flex:1; font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-tpl-scope { font-family:var(--font-mono); font-size:9px; padding:2px 7px; border-radius:var(--radius-full); background:var(--gray-100); color:var(--text-muted); white-space:nowrap; max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.cw-tpl-act { padding:3px 11px; border-radius:var(--radius-full); font-size:10.5px; font-weight:600; border:1px solid var(--border-card); background:var(--surface); color:var(--text); cursor:pointer; transition:border-color 0.12s; }
.cw-tpl-act:hover { border-color:rgba(255,180,0,0.5); }
.cw-tpl-act-muted { color:var(--text-muted); }
.cw-tpl-del { border:none; background:none; color:var(--text-muted); cursor:pointer; font-size:11px; padding:3px 5px; }
.cw-tpl-del:hover { color:var(--red); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .cw-layout { grid-template-columns:1fr; }
  .cw-rail { position:static; }
}
@media (max-width: 720px) {
  .cw-pillars { grid-template-columns:1fr; }
  .cw-head { flex-direction:column; }
  .cw-scope { width:100%; }
  .cw-dd, .cw-dd-btn { width:100%; }
}
@media (max-width: 560px) {
  .cw-title { font-size:20px; }
  .cw-actions { flex-direction:column; }
  .cw-tpl-input { font-size:16px; }
}