/* ==========================================================================
   Vote analytics (vote_tracking.php) — loaded after server-detail.css
   --------------------------------------------------------------------------
   The old dashboard: animate.css zoom-ins, a full FontAwesome from a CDN on
   top of the site's subset, Chart.js plus two copies of its date adapter, a
   ten-colour rainbow donut for countries, a two-slice donut for the success
   rate, and three charts defined twice. ~450 KB of script for three numbers.

   Now: one filter row (the range) above everything it scopes, four stat
   cells in the .ph header, a hand-drawn SVG line for votes per day, plain
   HTML bars for countries and block reasons, a single stacked bar for the
   outcome. No chart library. Every chart has a table twin or carries its
   values as direct labels.

   Data colours, validated with the dataviz palette checker against this
   site's surface (#0a0a0f, dark mode; all checks pass for the pairs that
   share a chart):
     --viz-1    #2aa3b5  the one data hue: votes counted (line, bars, segment)
     --viz-bad  #d1405f  blocked attempts (status, never a series)
     --viz-other #5b6472 the "Other" bucket (de-emphasis)
   Text never wears a data colour; identity comes from the mark beside it.
   ========================================================================== */

.vt {
    --viz-1: #2aa3b5;
    --viz-1-soft: rgba(42, 163, 181, 0.12);
    --viz-bad: #d1405f;
    --viz-bad-soft: rgba(209, 64, 95, 0.12);
    --viz-other: #5b6472;
    --viz-grid: rgba(255, 255, 255, 0.07);
    --viz-surface: #0a0a0f;
}
.vt .sd-hero-banner { max-width: 364px; }

/* ---------- chart grid ---------- */
.vt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.vt-span2 { grid-column: 1 / -1; }
.vt-fig { margin: 0; min-width: 0; }
.vt-fig figcaption { display: contents; }

/* ---------- line chart ---------- */
.vt-plot { position: relative; padding: 14px 16px 8px; }
.vt-plot:focus-visible { outline: 2px solid rgba(0, 255, 255, 0.6); outline-offset: -2px; }
.vt-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-family, 'Rajdhani', sans-serif); }
.vt-svg .grid line { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.vt-svg .axis { fill: #7c8594; font-size: 11px; font-variant-numeric: tabular-nums; }
.vt-svg .area { fill: var(--viz-1); fill-opacity: .1; }
.vt-svg .line { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vt-svg .dot { fill: var(--viz-1); stroke: var(--viz-surface); stroke-width: 2; }
.vt-svg .dot--hover { fill: #ffffff; }
.vt-svg .lbl {
    fill: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    paint-order: stroke;
    stroke: var(--viz-surface);
    stroke-width: 4px;
    stroke-linejoin: round;
}
.vt-svg .empty { fill: #aab0bd; font-size: 13px; }
.vt-svg .xhair { stroke: rgba(0, 255, 255, 0.4); stroke-width: 1; shape-rendering: crispEdges; }
.vt-svg .hit { fill: transparent; cursor: crosshair; }

.vt-tip {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    padding: 7px 10px;
    background: rgba(10, 10, 15, 0.97);
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 18px rgba(0, 255, 255, 0.1);
    color: #aab0bd;
    font-size: .78rem;
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 14px));
}
.vt-tip.is-left { transform: translate(-8px, calc(-100% - 14px)); }
.vt-tip.is-right { transform: translate(calc(-100% + 8px), calc(-100% - 14px)); }
.vt-tip b { display: block; font-family: var(--font-heading, 'Orbitron', sans-serif); font-size: .92rem; color: #ffffff; }
.vt-tip b::before { content: ""; display: inline-block; width: 12px; height: 2px; background: var(--viz-1); vertical-align: middle; margin-right: 7px; }
.vt-tip[hidden] { display: none; }

/* ---------- HTML bars (countries, block reasons) ---------- */
.vt-bars { list-style: none; margin: 0; padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 7px; }
.vt-bar {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 10px;
    min-height: 20px;
    font-size: .84rem;
}
.vt-bar-l { display: flex; align-items: center; gap: 8px; min-width: 0; color: #cfd3dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-bar-l img { width: 20px; height: 15px; flex: none; border: 1px solid rgba(255, 255, 255, 0.12); }
.vt-bar-t { height: 16px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.vt-bar-f { display: block; height: 100%; min-width: 2px; background: var(--viz-1); border-radius: 0 4px 4px 0; transition: filter .12s; }
.vt-bar.is-other .vt-bar-f { background: var(--viz-other); }
.vt-bars--bad .vt-bar-f { background: var(--viz-bad); }
.vt-bar:hover .vt-bar-f { filter: brightness(1.25); }
.vt-bar-n { text-align: right; color: #ffffff; font-weight: 700; font-variant-numeric: tabular-nums; }
.vt-bar-n small { color: #7c8594; font-weight: 600; margin-left: 3px; }

/* ---------- outcome ---------- */
.vt-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 16px 6px; }
.vt-hero-n {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
}
.vt-hero-l { color: #aab0bd; font-size: .92rem; }
.vt-hero-l b { color: #ffffff; font-variant-numeric: tabular-nums; }
.vt-stack { display: flex; gap: 2px; height: 22px; margin: 10px 16px 0; }
.vt-stack span { display: block; height: 100%; min-width: 3px; }
.vt-stack .ok { background: var(--viz-1); border-radius: 4px 0 0 4px; }
.vt-stack .bad { background: var(--viz-bad); border-radius: 0 4px 4px 0; }
.vt-stack .ok:only-child { border-radius: 4px; }
.vt-legend { list-style: none; margin: 0; padding: 10px 16px 6px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; color: #aab0bd; }
.vt-legend .sw { display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; }
.vt-legend .sw--ok { background: var(--viz-1); }
.vt-legend .sw--bad { background: var(--viz-bad); }
.vt-legend b { color: #ffffff; font-variant-numeric: tabular-nums; margin-left: 5px; }
.vt-sub {
    margin: 8px 16px 0;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 255, 255, 0.1);
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7c8594;
}
.vt-sub + .vt-bars { padding-top: 10px; }

/* ---------- table view (the accessible twin of a chart) ---------- */
.vt-tv { border-top: 1px solid rgba(0, 255, 255, 0.1); }
.vt-tv summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7c8594;
}
.vt-tv summary::-webkit-details-marker { display: none; }
.vt-tv summary::before { content: "+"; width: 12px; font-family: var(--font-heading, 'Orbitron', sans-serif); color: var(--primary-color, #00ffff); }
.vt-tv[open] summary::before { content: "\2212"; }
.vt-tv summary:hover { color: #ffffff; }
.vt-tv-scroll { max-height: 260px; overflow: auto; }
.vt-tv table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.vt-tv th, .vt-tv td { padding: 6px 16px; border-top: 1px solid rgba(0, 255, 255, 0.06); text-align: left; color: #cfd3dc; }
.vt-tv th { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #7c8594; position: sticky; top: 0; background: #0a0a0f; }
.vt-tv td:last-child, .vt-tv th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- vote log ---------- */
.vt-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    background: rgba(0, 255, 255, 0.025);
}
/* Segmented buttons: the .ph-seg cut, for <button> */
.vt-seg { display: inline-flex; border: 1px solid rgba(0, 255, 255, 0.22); }
.vt-seg button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(0, 255, 255, 0.14);
    color: #aab0bd;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.vt-seg button:last-child { border-right: 0; }
.vt-seg button i { font-size: .74rem; }
.vt-seg button .n { font-size: .74rem; color: #7c8594; font-variant-numeric: tabular-nums; }
.vt-seg button:hover { background: rgba(0, 255, 255, 0.07); color: #ffffff; }
.vt-seg button.is-active {
    background: linear-gradient(180deg, rgba(0, 255, 255, .22) 0%, rgba(0, 255, 255, .08) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    color: #ffffff;
}
.vt-seg button.is-active .n { color: #d4fbff; }
.vt-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 200px;
    max-width: 320px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(0, 255, 255, 0.22);
    color: #7c8594;
}
.vt-search:focus-within { border-color: var(--primary-color, #00ffff); }
.vt-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #ffffff; font: inherit; font-size: .88rem; }
.vt-search input::placeholder { color: #7c8594; }
.vt-select {
    height: 34px;
    padding: 0 10px;
    background: #0a0a0f;
    border: 1px solid rgba(0, 255, 255, 0.22);
    color: #cfd3dc;
    font: inherit;
    font-size: .86rem;
}
.vt-select:focus { outline: none; border-color: var(--primary-color, #00ffff); }
.vt-tools .sd-h-n { margin-left: auto; }

.vt-log { width: 100%; border-collapse: collapse; font-size: .86rem; }
.vt-log th {
    padding: 9px 14px;
    text-align: left;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7c8594;
    border-bottom: 1px solid rgba(0, 255, 255, 0.12);
    white-space: nowrap;
}
.vt-log td { padding: 8px 14px; border-top: 1px solid rgba(0, 255, 255, 0.06); vertical-align: middle; color: #cfd3dc; }
.vt-log tbody tr:hover td { background: rgba(0, 255, 255, 0.03); }
.vt-log tr[hidden] { display: none; }
.vt-log .t { white-space: nowrap; font-variant-numeric: tabular-nums; color: #aab0bd; font-size: .8rem; }
.vt-log .t b { display: block; color: #ffffff; font-weight: 600; font-size: .86rem; }
.vt-log .ip { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-log .loc { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.vt-log .loc img { width: 20px; height: 15px; flex: none; border: 1px solid rgba(255, 255, 255, 0.12); }
.vt-log .loc small { color: #7c8594; }
.vt-log .why { max-width: 420px; }
.vt-log .empty { padding: 28px 16px; text-align: center; color: #aab0bd; }

/* Status: icon + label, never colour alone */
.vt-st {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
}
.vt-st--ok { border-color: rgba(42, 163, 181, 0.6); background: var(--viz-1-soft); }
.vt-st--ok i { color: var(--viz-1); }
.vt-st--bad { border-color: rgba(209, 64, 95, 0.6); background: var(--viz-bad-soft); }
.vt-st--bad i { color: var(--viz-bad); }

/* Detection chips */
.vt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    margin: 2px 4px 2px 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #cfd3dc;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
}
.vt-chip i { font-size: .68rem; color: #7c8594; }
.vt-chip span { overflow: hidden; text-overflow: ellipsis; }
.vt-chip--ok { border-color: rgba(42, 163, 181, 0.45); }
.vt-chip--ok i { color: var(--viz-1); }
.vt-chip--bad { border-color: rgba(209, 64, 95, 0.5); }
.vt-chip--bad i { color: var(--viz-bad); }
.vt-chip--warn { border-color: rgba(214, 155, 28, 0.55); }
.vt-chip--warn i { color: #d69b1c; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .vt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .vt .sd-hero-banner { max-width: none; }
    .vt-plot { padding: 12px 10px 6px; }
    .vt-bars { padding: 8px 12px 12px; }
    .vt-bar { grid-template-columns: 104px minmax(0, 1fr) 44px; gap: 8px; }
    .vt-hero { padding: 14px 12px 4px; }
    .vt-hero-n { font-size: 2.1rem; }
    .vt-stack, .vt-sub { margin-left: 12px; margin-right: 12px; }
    .vt-legend { padding: 10px 12px 4px; }
    .vt-tools { padding: 10px 12px; }
    .vt-seg { width: 100%; }
    .vt-seg button { flex: 1; justify-content: center; padding: 0 6px; font-size: .8rem; }
    .vt-search { max-width: none; }
    .vt-select { flex: 1; }
    .vt-log th, .vt-log td { padding: 8px 10px; }
    .vt-log .why { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .vt-bar-f, .vt-seg button { transition: none; }
}