/* ad-blocks.css — the detected ad-block strip: graded candidate breaks, shown but never actionable.
 *
 * Styled deliberately unlike .marker-segment and the hatched AI hint bars, so a block cannot be
 * mistaken for either a confirmed annotation or a hint. There is no edit affordance, no drag handle
 * and no overlay: the only interaction a bar has is a click that navigates to its first frame.
 *
 * The verdict is encoded redundantly, never by colour alone: green is a solid muted fill with a green
 * border, yellow is a diagonal hatch, red is a denser, steeper hatch behind a red border. A reviewer
 * who cannot separate the three hues can still separate a solid bar from a sparse hatch from a tight
 * one, and the verdict word travels in the element's title/aria-label as well.
 *
 * Palette comes from the :root custom properties in style.css — design-system.css is not loaded by
 * the discover page. The red/yellow/green values are literals because style.css has no verdict
 * custom properties. Square corners match the house style.
 */

.ad-blocks-section {
    background: var(--surface);
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border);
    padding: 8px 16px 12px;
    margin: 0;
    flex-shrink: 0;
    position: relative;
}

.ad-blocks-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ad-blocks-meta {
    color: var(--text-muted);
    font-size: 11px;
}

.ad-blocks-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}

.ad-blocks-outer {
    position: relative;
    height: 24px;
    overflow: hidden;
    background: var(--elevated);
    border-radius: 0;
    border: 1px solid var(--border);
    margin-top: 6px;
}

/* Inner container — shifted left via transform to sync with #timeline-scroll, the same technique
 * viewership.css, ad-hints.css and the annotation strip use. The outer is never scrolled. */
.ad-blocks-inner {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    will-change: transform;
}

/* A block is a review target, not an annotation. It is a <button> so it is keyboard reachable and
 * activatable; these declarations strip the user agent's button styling back to the flat bar the
 * strip needs. `overflow:hidden` keeps the decorative spots inside the bar's own bounds. */
.ad-block-bar {
    position: absolute;
    top: 3px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    font: inherit;
    color: inherit;
    border-radius: 0;
    cursor: pointer;
    overflow: hidden;
    min-width: 2px;
    border: 1px solid var(--border-active);
    background: var(--elevated);
}

.ad-block-bar:hover {
    border-color: var(--accent);
    filter: brightness(1.25);
}

/* Keyboard users need to see which bar has focus. */
.ad-block-bar:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* Green — shaped normally: a solid muted fill, no pattern, so it reads as "nothing to see". */
.ad-block-bar.verdict-green {
    border: 1px solid rgba(76, 175, 120, 0.75);
    background: rgba(76, 175, 120, 0.30);
}

/* Yellow — looks short: a diagonal hatch, coarser and shallower than red's. */
.ad-block-bar.verdict-yellow {
    border: 1px solid rgba(214, 178, 60, 0.80);
    background: repeating-linear-gradient(
        45deg,
        rgba(214, 178, 60, 0.45) 0px,
        rgba(214, 178, 60, 0.45) 3px,
        rgba(214, 178, 60, 0.15) 3px,
        rgba(214, 178, 60, 0.15) 7px
    );
}

/* Red — possible split break: a denser, steeper hatch behind a red border. */
.ad-block-bar.verdict-red {
    border: 1px solid rgba(214, 74, 74, 0.90);
    background: repeating-linear-gradient(
        60deg,
        rgba(214, 74, 74, 0.55) 0px,
        rgba(214, 74, 74, 0.55) 2px,
        rgba(214, 74, 74, 0.18) 2px,
        rgba(214, 74, 74, 0.18) 4px
    );
}

/* One detection inside a block — a darker inset segment. Decorative: no cursor, no pointer events. */
.ad-block-spot {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    border-left: 1px solid rgba(0, 0, 0, 0.45);
    pointer-events: none;
    min-width: 1px;
}

/* The merge-candidate gap between two blocks — the red region. A distinct button (the reason text's
 * click target), thinner than a block, hatched in the same red so the encoding is consistent. */
.ad-block-gap {
    position: absolute;
    top: 6px;
    height: 10px;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    font: inherit;
    color: inherit;
    border-radius: 0;
    cursor: pointer;
    min-width: 2px;
    border: 1px solid rgba(214, 74, 74, 0.90);
    background: repeating-linear-gradient(
        60deg,
        rgba(214, 74, 74, 0.60) 0px,
        rgba(214, 74, 74, 0.60) 2px,
        rgba(214, 74, 74, 0.20) 2px,
        rgba(214, 74, 74, 0.20) 4px
    );
}

.ad-block-gap:hover {
    border-color: var(--accent);
    filter: brightness(1.25);
}

.ad-block-gap:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}