/* ============================================================
   Trade Analyzer styles. Assumes css/tokens.css is already loaded.
   ============================================================ */

  .panel{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px 18px; margin-bottom:16px;
  }
  .panel h2{font-size:14px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); margin:0 0 12px;}
  .hint{font-size:12.5px; color:var(--text-faint); line-height:1.6; margin:0 0 10px;}
  .hint .warn, .warn{color:var(--orange); font-weight:600;}
  .empty-msg{font-size:13px; color:var(--text-faint); font-style:italic; padding:10px 2px;}

  button{
    font-family:inherit; cursor:pointer; border-radius:8px; border:1px solid var(--line);
    background:var(--panel2); color:var(--text); padding:8px 13px; font-size:13px; font-weight:600;
  }
  button:hover{border-color:var(--accent);}
  select, input[type=text]{
    background:var(--panel2); border:1px solid var(--line); color:var(--text);
    border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit;
  }
  select:focus, input:focus{outline:none; border-color:var(--accent);}

  /* ---------- Settings ---------- */
  .settings{display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end;}
  .setting{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--text-dim);}
  .setting b{color:var(--accent);}
  .setting input[type=range]{width:220px; accent-color:var(--accent);}
  .settings .hint{flex:1 1 100%; margin:0;}

  /* ---------- Sides ---------- */
  .sides{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media (max-width:860px){ .sides{grid-template-columns:1fr;} }
  .picker{display:flex; gap:7px; margin-bottom:12px;}
  .picker input{flex:1; min-width:0;}
  .pick-error{font-size:12.5px; color:#E5534B; margin:-6px 0 12px; min-height:16px;}

  .side-list{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
  .prow{
    display:flex; align-items:center; gap:10px; background:var(--panel2);
    border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  }
  .pinfo{flex:1; min-width:0; display:flex; flex-direction:column;}
  .pname{font-weight:700; font-size:14px;}
  .pwhy{font-size:11.5px; color:var(--text-faint); margin-top:1px;}
  .pval{font-weight:800; font-size:16px; color:var(--accent); flex-shrink:0;}
  /* Below replacement. Zero is a real answer here, not a missing value. */
  .pval.zero{color:var(--text-faint); font-weight:700;}
  .row-btn{
    background:var(--panel); border:1px solid var(--line); color:var(--text-dim);
    border-radius:6px; width:26px; height:28px; font-size:13px; padding:0; line-height:1; flex-shrink:0;
  }
  .row-btn.remove:hover{border-color:#E5534B; color:#E5534B;}
  .side-total{
    display:flex; justify-content:space-between; align-items:baseline;
    border-top:1px solid var(--line); padding-top:10px; font-size:12px; color:var(--text-faint);
  }
  .side-total b{font-size:20px; color:var(--text);}

  .avatar-wrap{position:relative; width:34px; height:34px; flex-shrink:0;}
  .avatar{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-weight:800; font-size:12px;
  }
  .team-badge{
    position:absolute; bottom:-2px; right:-2px; width:16px; height:16px; border-radius:50%;
    background:#0E1626; border:2px solid #0E1626; object-fit:contain;
  }

  /* ---------- Verdict ---------- */
  .verdict h2{font-size:14px;}
  .verdict h2.call{color:var(--accent); font-size:16px; text-transform:none; letter-spacing:0;}
  .bar-row{display:flex; align-items:center; gap:10px; margin-bottom:7px; font-size:12.5px;}
  .bar-label{width:92px; color:var(--text-dim); flex-shrink:0;}
  .bar-track{flex:1; height:14px; background:var(--panel2); border-radius:7px; overflow:hidden;}
  .bar-fill{display:block; height:100%; border-radius:7px;}
  .bar-fill.a{background:var(--blue);}
  .bar-fill.b{background:var(--green);}
  .bar-val{width:56px; text-align:right; font-weight:800;}
  .verdict .note{
    font-size:12.5px; color:var(--text-dim); line-height:1.6; margin:12px 0 0;
    border-left:3px solid var(--line); padding-left:11px;
  }

  /* ---------- Workings ---------- */
  .workings summary{cursor:pointer; font-size:13px; font-weight:700; color:var(--text-dim);}
  .workings-body{margin-top:14px; max-width:760px;}
  .workings-body p, .workings-body li{font-size:13px; color:var(--text-dim); line-height:1.65;}
  .workings-body h3{
    font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--text-faint);
    margin:20px 0 6px; padding-top:14px; border-top:1px solid var(--line);
  }
  .workings-body ul{padding-left:18px; margin:0;}
  .workings-body svg{width:100%; height:auto; max-width:620px;}
  .curve{fill:none; stroke:var(--accent); stroke-width:2;}
  .axis{stroke:var(--line); stroke-width:1;}
  .mark{stroke:var(--text-faint); stroke-width:1; stroke-dasharray:3 3;}
  .mark-label{fill:var(--text-faint); font-size:10px; text-anchor:middle; font-family:inherit;}
  .axis-label{fill:var(--text-faint); font-size:10px; font-family:inherit;}

  .repl-table{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:4px;}
  .repl-table th{
    text-align:left; font-size:10px; letter-spacing:.6px; text-transform:uppercase;
    color:var(--text-faint); padding:6px 8px; border-bottom:1px solid var(--line);
  }
  .repl-table td{padding:6px 8px; border-bottom:1px solid var(--line); color:var(--text-dim);}