/* ==========================================================================
   Yatify Chart Engine — styles
   Appended after site.css. Uses the existing token set.
   ========================================================================== */

.yat-chart{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 18px 14px;
  margin:0 0 20px;
}
.yat-chart + .yat-chart{margin-top:20px}

/* ---------------------------------------------------------------- header */
.yat-chart-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:4px}
.yat-chart-titles{min-width:0;flex:1}
.yat-chart-index{
  font:700 10px var(--mono);letter-spacing:.1em;color:var(--teal);margin-bottom:6px
}
.yat-chart-title{font-size:15px;font-weight:680;color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.yat-chart-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.yat-chart-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

.yat-switch{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.yat-switch button{
  border:0;background:#fff;color:var(--text);font:600 11px var(--sans);
  padding:7px 11px;cursor:pointer;border-right:1px solid var(--line)
}
.yat-switch button:last-child{border-right:0}
.yat-switch button:hover{background:var(--soft)}
.yat-switch button.on{background:var(--teal);color:#fff}

.yat-chart-dl{
  border:1px solid var(--line);background:#fff;color:var(--muted);
  font:700 10px var(--mono);letter-spacing:.06em;
  padding:7px 10px;border-radius:4px;cursor:pointer
}
.yat-chart-dl:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}

/* ---------------------------------------------------------------- legend */
.yat-legend{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.yat-legend-key{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:#fff;border-radius:20px;
  padding:5px 12px 5px 9px;cursor:pointer;font:600 11.5px var(--sans);color:var(--ink)
}
.yat-legend-key i{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.yat-legend-key:hover{border-color:#b9c4c9;background:var(--soft)}
.yat-legend-key.off{opacity:.42}
.yat-legend-key.off i{background:#b6c0c5 !important}

/* ------------------------------------------------------------------ plot */
.yat-plot{position:relative;margin-top:6px}
.yat-plot svg{display:block;width:100%;height:auto;overflow:visible}

.yat-grid{stroke:var(--line-2);stroke-width:1}
.yat-zero{stroke:#c3ced3;stroke-width:1.2}
.yat-cross{stroke:#9aa8af;stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.yat-tick{font:500 10.5px var(--mono);fill:var(--muted)}
.yat-axis-label{font:600 10px var(--sans);fill:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.yat-rowlab{font:600 12px var(--sans);fill:var(--ink)}
.yat-rowval{font:700 11.5px var(--mono);fill:var(--text)}
.yat-dot{pointer-events:none}
.yat-bar{transition:opacity .12s}
.yat-bar.hot{opacity:.82}
.yat-pt{cursor:pointer;transition:opacity .12s}
.yat-hit{cursor:crosshair}

/* --------------------------------------------------------------- tooltip */
.yat-tip{
  position:absolute;pointer-events:none;z-index:5;
  background:var(--navy);color:#fff;border-radius:5px;
  padding:9px 11px;min-width:150px;
  box-shadow:0 10px 26px rgba(16,41,54,.28);
  transition:opacity .12s;font-size:12px;line-height:1.5
}
.yat-tip strong{
  display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:#9fc4bd;margin-bottom:6px;font-family:var(--mono);font-weight:700
}
.yat-tip div{display:flex;align-items:center;gap:7px;margin-top:3px}
.yat-tip div i{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.yat-tip div span{color:#c6d4d9;flex:1;white-space:nowrap}
.yat-tip div b{font-family:var(--mono);font-weight:700;font-size:12.5px}
.yat-tip em{
  display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.14);
  font-style:normal;color:#aebfc6;font-size:11.5px;line-height:1.45
}

/* --------------------------------------------------------------- readout */
.yat-readout{
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;
  min-height:34px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)
}
.yat-readout:empty{display:none}
.yat-readout-k{font:700 11px var(--mono);letter-spacing:.06em;color:var(--teal)}
.yat-readout span{display:flex;flex-direction:column;gap:1px}
.yat-readout small{font-size:10px;color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.yat-readout b{font:700 13px var(--mono);color:var(--ink)}

/* --------------------------------------------------------------- finding */
.yat-finding{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:14px;padding:12px 14px;
  background:var(--teal-soft);border-left:3px solid var(--teal);border-radius:0 4px 4px 0
}
.yat-finding-k{
  font:700 9.5px var(--mono);letter-spacing:.1em;color:var(--teal-dark);
  text-transform:uppercase;white-space:nowrap;padding-top:2px;flex-shrink:0
}
.yat-finding-v{font-size:13px;color:#245248;line-height:1.55}

.yat-chart-source{
  margin-top:10px;font-size:11px;color:var(--muted);line-height:1.5;
  padding-top:9px;border-top:1px solid var(--line-2)
}
.yat-chart-err{padding:20px;color:var(--rust);font-size:13px}

/* -------------------------------------------------------------- calculator */
.yat-calc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff
}
.yat-calc-inputs{padding:22px 24px;border-right:1px solid var(--line)}
.yat-calc-out{padding:22px 24px;background:var(--soft)}
.yat-calc h3{margin:0 0 4px;font-size:15px;letter-spacing:-.01em}
.yat-calc-lede{font-size:12.5px;color:var(--muted);margin:0 0 18px;line-height:1.5}
.yat-calc-field{margin-bottom:14px}
.yat-calc-field label{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:5px}
.yat-calc-field small{display:block;font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}
.yat-calc-field input,.yat-calc-field select{
  width:100%;height:40px;border:1px solid #cbd4d8;border-radius:4px;
  padding:0 11px;font:14px var(--mono);color:var(--ink);background:#fff
}
.yat-calc-field input:focus,.yat-calc-field select:focus{
  outline:2px solid var(--teal);outline-offset:-1px;border-color:var(--teal)
}
.yat-calc-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.yat-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.yat-kpi{background:#fff;border:1px solid var(--line);border-radius:5px;padding:13px 14px}
.yat-kpi small{
  display:block;font:700 9.5px var(--mono);letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;margin-bottom:5px
}
.yat-kpi b{display:block;font:700 24px var(--mono);letter-spacing:-.02em;line-height:1}
.yat-kpi span{display:block;font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4}
.yat-kpi.good b{color:var(--teal)}
.yat-kpi.warn b{color:var(--warning)}
.yat-kpi.bad  b{color:var(--rust)}

.yat-verdict{
  padding:13px 15px;border-radius:5px;font-size:13px;line-height:1.55;
  border-left:3px solid;margin-bottom:14px
}
.yat-verdict b{display:block;margin-bottom:3px;font-size:13px}
.yat-verdict.good{background:var(--teal-soft);border-color:var(--teal);color:#245248}
.yat-verdict.warn{background:#fdf5e7;border-color:var(--warning);color:#6f4c0f}
.yat-verdict.bad{background:#fbf0eb;border-color:var(--rust);color:#7a3d20}

.yat-formula{
  font:11.5px/1.75 var(--mono);color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:4px;padding:12px 14px
}
.yat-formula span{color:var(--muted)}
.yat-formula b{color:var(--teal-dark);font-weight:700}

/* ------------------------------------------------------------ responsive */
@media(max-width:860px){
  .yat-calc{grid-template-columns:1fr}
  .yat-calc-inputs{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:640px){
  .yat-chart{padding:14px 12px 12px}
  .yat-chart-head{flex-direction:column;gap:10px}
  .yat-chart-actions{width:100%}
  .yat-kpis{grid-template-columns:1fr}
  .yat-readout{gap:14px}
  .yat-tip{min-width:120px;font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .yat-bar,.yat-line{transition:none !important;transform:none !important}
}
.yat-legend-key:focus-visible,.yat-chart-dl:focus-visible,.yat-switch button:focus-visible{
  outline:2px solid var(--teal);outline-offset:2px
}


/* Merge-1 public tools promotion */
.yat-tool-promo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;border:1px solid var(--line);background:var(--card);padding:22px;border-radius:var(--radius);margin:0 0 18px}
.yat-tool-promo small{display:block;font:700 9px var(--mono);letter-spacing:.1em;color:var(--teal);text-transform:uppercase;margin-bottom:6px}
.yat-tool-promo h2{font-size:22px;margin:0 0 7px;color:var(--ink)}
.yat-tool-promo p{font-size:12px;color:var(--text);max-width:760px;margin:0;line-height:1.6}
.yat-tool-promo a{display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;border-radius:4px;padding:10px 14px;font-size:12px;font-weight:700;white-space:nowrap}
.yat-tool-promo a:hover{background:var(--teal-dark)}
.evm-input-note{padding:10px 12px;background:var(--teal-soft);border-left:3px solid var(--teal);font-size:11px;color:#31564f;line-height:1.5;margin:-2px 0 15px}
.evm-screening-note{margin-top:10px;padding:10px 12px;background:#fdf5e7;border-left:3px solid var(--warning);font-size:11px;color:#6f4c0f;line-height:1.5}
@media(max-width:700px){.yat-tool-promo{grid-template-columns:1fr}.yat-tool-promo a{width:100%}}