/* Win rate & pick rate trend charts (herotrends.js): the hero page's trends section and /herowinrates.
   The bracket colors are validated for color blindness and contrast on the dark card surface. */
.htsection { text-align: center; }
.ht {
  --ht-surface: #161616; --ht-text: #f0efec; --ht-text-2: #c3c2b7; --ht-muted: #898781;
  --ht-grid: #2c2c2a; --ht-ref: #55534e; --ht-border: rgba(255,255,255,0.08);
  --ht-all: #3987e5; --ht-vhigh: #d95926; --ht-high: #199e70; --ht-norm: #c98500;
  text-align: left; font-family: 'PT Sans', arial, sans-serif; color: var(--ht-text-2); margin-top: 18px;
}
.ht-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 4px 12px; font-size: 14px; }
.ht-legend-item { display: inline-flex; align-items: center; gap: 7px; color: var(--ht-text-2); }
.ht-legend-note { margin-left: auto; color: var(--ht-muted); font-size: 13px; }
.ht-key { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--ht-key); }
.ht-key.ht-all { --ht-key: var(--ht-all); } .ht-key.ht-vhigh { --ht-key: var(--ht-vhigh); }
.ht-key.ht-high { --ht-key: var(--ht-high); } .ht-key.ht-norm { --ht-key: var(--ht-norm); }
.ht-row { display: grid; gap: 14px; margin-bottom: 14px; }
.ht-row-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ht-row-narrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .ht-row-wide, .ht-row-narrow { grid-template-columns: minmax(0, 1fr); } }
.ht-card { position: relative; margin: 0; padding: 12px 12px 6px; background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: 8px; }
.ht-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 4px 6px; }
.ht-title { color: var(--ht-text); font-size: 15px; font-weight: bold; flex: 1 1 auto; }
.ht-sub { color: var(--ht-muted); font-weight: normal; font-size: 13px; }
.ht-now { color: var(--ht-text); font-size: 20px; font-weight: bold; }
.ht-delta { font-size: 13px; color: var(--ht-muted); width: 100%; text-align: right; }
.ht-delta.ht-up { color: #0ca30c; } .ht-delta.ht-down { color: #e66767; }
.ht-plot { position: relative; width: 100%; }
.ht-plot svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.ht-grid { stroke: var(--ht-grid); stroke-width: 1; shape-rendering: crispEdges; }
.ht-ref { stroke: var(--ht-ref); stroke-width: 1; shape-rendering: crispEdges; }
.ht-axis { fill: var(--ht-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ht-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke: var(--ht-c); }
.ht-dot { fill: var(--ht-c); stroke: var(--ht-surface); stroke-width: 2; }
.ht-line.ht-all, .ht-dot.ht-all { --ht-c: var(--ht-all); } .ht-line.ht-vhigh, .ht-dot.ht-vhigh { --ht-c: var(--ht-vhigh); }
.ht-line.ht-high, .ht-dot.ht-high { --ht-c: var(--ht-high); } .ht-line.ht-norm, .ht-dot.ht-norm { --ht-c: var(--ht-norm); }
.ht-line:not(.ht-all) { stroke-opacity: 0.8; }
.ht-cross { stroke: var(--ht-text-2); stroke-width: 1; stroke-opacity: 0.5; }
.ht-tip { display: none; position: absolute; top: 48px; z-index: 5; min-width: 150px; padding: 8px 10px; pointer-events: none;
  background: #222; border: 1px solid var(--ht-border); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.5); font-size: 13px; }
.ht-tip-date { color: var(--ht-text); font-weight: bold; margin-bottom: 4px; }
.ht-tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.6; }
.ht-tip-row b { margin-left: auto; padding-left: 12px; color: var(--ht-text); font-variant-numeric: tabular-nums; }
.ht-table { margin: 4px 4px 0; }
.ht-table summary { cursor: pointer; color: var(--ht-text-2); font-size: 14px; }
.ht-table-wrap { overflow-x: auto; margin-top: 8px; }
.ht-table table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ht-table th, .ht-table td { padding: 3px 8px; border-bottom: 1px solid var(--ht-grid); text-align: right; }
.ht-table th { color: var(--ht-text); text-align: center; }
.ht-table td:first-child { text-align: left; }
.ht-table-note { font-size: 12px; color: var(--ht-muted); margin-top: 6px; }

/* /herowinrates (herowinrates.js): one block per hero, five compact charts in a row */
.hw { margin-top: 24px; }
.hw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 4px 16px; padding: 12px 14px;
  background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: 8px; font-size: 14px; }
.hw-tools label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: normal; color: var(--ht-text-2); }
.hw-tools label[hidden] { display: none; }
.hw-tools select, .hw-tools input { height: 30px; padding: 2px 8px; color: var(--ht-text); background: #222; border: 1px solid #3a3a3a; border-radius: 4px; }
.hw-tools input { margin-left: auto; width: 180px; }
.hw-hero { margin: 0 0 22px; padding-top: 14px; border-top: 1px solid var(--ht-grid); }
.hw-hero[hidden] { display: none; }
.hw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0 4px 10px; }
.hw-name { display: inline-flex; align-items: center; gap: 10px; color: var(--ht-text); font-size: 18px; font-weight: bold; flex: 1 1 auto; }
.hw-name:hover { color: #fff; }
.hw-name img { width: 64px; height: 36px; border-radius: 3px; }
.hw-stat { font-size: 14px; color: var(--ht-text-2); }
.hw-stat b { color: var(--ht-text); font-size: 16px; margin: 0 4px; }
.hw-stat .ht-delta { width: auto; font-size: 13px; }
.hw-charts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .hw-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hw-none { color: var(--ht-muted); margin: 10px 4px; }
.ht-compact { padding: 8px 8px 2px; }
.ht-compact .ht-head { margin: 0 2px 2px; gap: 0 6px; }
.ht-compact .ht-title { font-size: 13px; }
.ht-compact .ht-now { font-size: 15px; }
.ht-compact .ht-delta { font-size: 12px; }
.ht-compact .ht-plot { min-height: 130px; }
.ht-compact .ht-tip { font-size: 12px; min-width: 132px; }
.hw-key { padding: 2px 8px; border: 1px solid #3a3a3a; border-radius: 10px; font-size: 12px; color: var(--ht-text-2); background: #1d1d1d; }
.hw-key[hidden] { display: none; }