/* =============================================
   poll-line-chart.css - shared chart-section styles
   for the D3 poll trend chart (js/gb-polls-d3-chart.js)
   on pages that do NOT load gb-polls.css (Scottish,
   Welsh, party pages...). Markup pattern, class names
   and values mirror the gb-polls trend chart exactly.
   Light theme only. Load after the page stylesheet.

   Expected markup:
     <p class="gbp-chart-help">...</p>
     <div class="gbp-chart-controls">
       <div class="gbp-range-group"> [gbp-btn pills] </div>
       <div class="gbp-chart-right-controls"> [gbp-btn toggles] </div>
     </div>
     <div id="..." class="gbp-chart-container"></div>
   ============================================= */

.gbp-chart-help {
    font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #666666;
    line-height: 1.5;
    margin: -8px 0 16px 0;
    max-width: 640px;
}

/* ---- Buttons ---- */
.gbp-btn {
    font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #DDDDDD;
    background: #FFFFFF;
    color: #333333;
    padding: 7px 13px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.1s;
    line-height: 1;
    white-space: nowrap;
}
.gbp-btn:hover {
    border-color: #BBBBBB;
}
.gbp-btn.is-active {
    background: #111111;
    color: #FFFFFF;
    border-color: #111111;
}

/* ---- Control row ---- */
.gbp-chart-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.gbp-range-group {
    display: flex;
    gap: 6px;
}
/* Larger, more prominent time-range pills (Politico-style). Only the range
   selector gets the accent highlight; the view toggles keep the dark invert. */
.gbp-range-group .gbp-btn {
    font-size: 14px;
    font-weight: 600;
    padding: 9px 17px;
    border-radius: 3px;
}
.gbp-range-group .gbp-btn.is-active {
    background: #C2410C;
    color: #FFFFFF;
    border-color: #C2410C;
}
.gbp-range-group .gbp-btn.is-active:hover {
    border-color: #C2410C;
}
.gbp-chart-right-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---- Chart container ---- */
.gbp-chart-container {
    position: relative;
    width: 100%;
    height: 680px;
}
.gbp-chart-container svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible; /* let end-of-line value labels render past the plot box */
}
.gbp-chart-container .axis text {
    font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 11px;
    fill: #999999;
}
.gbp-chart-container .axis path,
.gbp-chart-container .axis .domain {
    display: none;
}
.gbp-chart-container .axis .tick line {
    stroke: none;
}
.gbp-chart-container .grid-line {
    stroke: #F0F0F0;
    stroke-width: 0.5;
}
.gbp-chart-container .party-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}
.gbp-chart-container .event-marker {
    stroke: #999999;
    stroke-width: 1;
    stroke-dasharray: 3,3;
}
.gbp-chart-container .event-badge {
    fill: #333333;
}
.gbp-chart-container .event-badge-num {
    font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    fill: #ffffff;
}
.gbp-chart-container .crosshair {
    stroke: #DDDDDD;
    stroke-width: 1;
}
.gbp-chart-container .end-label {
    font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
}
.gbp-chart-container .end-label-narrow {
    font-size: 11px;
    font-weight: 700;
}

/* ---- Event legend strip below the chart ---- */
.gbp-event-legend {
    display: none;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 10px 0 0;
    font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #333333;
}
.gbp-event-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.gbp-event-legend-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #333333;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---- Tooltip ---- */
.gbp-tooltip {
    position: absolute;
    pointer-events: none;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 8px 12px;
    font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px;
    z-index: 10;
    box-shadow: none;
    white-space: nowrap;
}
.gbp-tooltip-date {
    font-weight: 700;
    color: #333333;
    margin-bottom: 4px;
    font-size: 11px;
}
.gbp-tooltip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
}
.gbp-tooltip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gbp-tooltip-party {
    flex: 1;
    color: #555555;
    font-size: 11px;
}
.gbp-tooltip-val {
    font-weight: 700;
    color: #111111;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}

/* ---- Responsive (same breakpoints/heights as gb-polls) ---- */
@media (max-width: 768px) {
    .gbp-chart-container {
        height: 600px;
    }
    /* Two clean rows: range pills on their own scrollable row, then the
       view toggles on the row below. */
    .gbp-chart-controls {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .gbp-range-group {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .gbp-range-group .gbp-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
    .gbp-chart-right-controls {
        flex: 1 1 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .gbp-chart-container {
        height: 560px;
    }
    .gbp-chart-controls {
        margin-bottom: 10px;
    }
    .gbp-range-group .gbp-btn {
        padding: 7px 12px;
        font-size: 13px;
    }
    .gbp-btn {
        padding: 7px 11px;
    }
    /* Larger axis text on a phone (absolute size, not a scaled-down desktop) */
    .gbp-chart-container .axis text {
        font-size: 12px;
    }
    .gbp-event-legend {
        font-size: 11px;
        gap: 5px 14px;
    }
}