/* New design overrides — loaded after style.css, so ties resolve in favor of these rules. */

:root {
    --header-bg: #f5a623;
    --header-fg: #7a2a12;
    --flag-none: #4a7a4f;
    --flag-some: #e08a1e;
}

/* Yellow top bar */
header.site-header--new {
    background: var(--header-bg);
}
header.site-header--new .site-tagline {
    color: var(--header-fg);
}
header.site-header--new .nav-cta {
    background: var(--surface);
}

/* Homepage service cards: title row + flag-count badge */
.service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.flag-badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    white-space: nowrap;
    background: var(--accent);
}
.flag-badge--none { background: var(--flag-none); }
.flag-badge--some { background: var(--flag-some); }

/* Policy tabs: boxed white/black-border container instead of flat underline tabs */
.policy-tabs {
    border: 2.5px solid var(--fg);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.policy-tabs .tab-bar {
    border-bottom: 2px solid var(--fg);
    margin-bottom: 0;
    position: static;
    background: #fff;
}
.policy-tabs .tab-label {
    color: var(--muted);
    border-bottom: none;
    margin-bottom: 0;
}
#tab-concerns:checked ~ .tab-bar label[for="tab-concerns"],
#tab-explore:checked ~ .tab-bar label[for="tab-explore"],
#tab-history:checked ~ .tab-bar label[for="tab-history"] {
    background: var(--accent);
    color: #fff;
}
#tab-concerns:checked ~ .tab-bar label[for="tab-concerns"] .tab-count,
#tab-explore:checked ~ .tab-bar label[for="tab-explore"] .tab-count,
#tab-history:checked ~ .tab-bar label[for="tab-history"] .tab-count {
    color: #fff;
}
.policy-tabs .tab-panel {
    padding: 1.25rem 1.4rem 1.5rem;
}

/* Insight cards: white bg, thick black border, rounded corners, rotated sticker badge */
.insight-card {
    background: #fff;
    border: 2px solid var(--fg);
    border-left: 2px solid var(--fg);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-top: 0.9rem;
    position: relative;
}
.insight-card:first-child { margin-top: 0.5rem; }
.insight-concern::before { content: none; }
.insight-badge {
    position: absolute;
    top: -10px;
    left: 12px;
    transform: rotate(-4deg);
    border: 1.5px solid var(--fg);
    background: var(--color-warning);
}
.insight-card--red-flag .insight-badge { background: var(--accent); }
.insight-concern { margin-top: 0.4rem; }

/* Question cards (Explore tab / "Tell me more") to match the boxed look */
.question-card {
    background: #fff;
    border: 2px solid var(--fg);
    border-radius: 10px;
}
.question-card:hover { box-shadow: none; background: #fdf6ea; }
.question-card.active { background: var(--accent); border-color: var(--fg); }

/* History tab version items */
.version-item {
    background: #fff;
    border: 2px solid var(--fg);
    border-radius: 10px;
}
.versions-list::before { display: none; }
.version-item::before { display: none; }

/* ── Red-flag cloud: boxed pill treatment ─────────────────────────────
   Order matters. The tier-neutralising rule is 0,2,0 — the same weight
   as .flag-bubble:hover — so any property declared there would beat
   hover on source order. State props (background, border-color) stay on
   the 0,1,0 base rule, and state rules come last. */

/* 0,1,0 — beats the generic `button` rule (0,0,1); ties style.css's
   .flag-bubble and wins on load order. Carries no font-size/padding:
   the tier rules at 0,2,0 would outrank it. */
.flag-bubble {
    background: #fff;
    border: 1.5px solid var(--muted);
    border-radius: 999px;
    gap: 0.3rem;
    transition: background 0.15s, border-color 0.15s;
}

/* 0,2,0 — ties each .flag-bubble[data-tier="N"], wins on load order.
   Must declare every property any tier sets: font-size + padding (all
   three), color (tier 1 → --muted), font-weight (tier 3 → 600). */
.flag-bubble[data-tier] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fg);
    padding: 0.5rem 1.25rem;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* Badge font-size is absolute, so it never scaled with the pill and
   reads small against 1.05rem/600 text. min-width + centring also makes
   it a true circle at one digit instead of a flat oval. */
.flag-bubble-count {
    font-size: 0.72rem;
    line-height: 1;
    min-width: 1.5em;
    padding: 0.25em 0.4em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Deeper red than the bright --accent so the badge draws less attention.
       White text is inherited from style.css and stays legible on it. */
    background: var(--accent-hover);
}

/* 0,2,0 — beats `button:hover` (0,1,1) on class count, order-independent.
   box-shadow must be killed explicitly: tying style.css's identical
   selector only wins per declared property. No `transform` here — fadeUp's
   fill-mode pins it at the animation origin, which outranks author-normal. */
.flag-bubble:hover,
.flag-bubble:focus-visible {
    background: #fdf6ea;
    border-color: var(--muted);
    box-shadow: none;
}

/* Separate rule so the ring never fires on mouse hover. --accent on --fg
   is only ~2.1:1, so border-color alone would fail WCAG 1.4.11. */
.flag-bubble:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Popover opens directly off these pills — leaving it on the old look
   would be the most conspicuous seam this change could create. */
.flag-popover {
    background: #fff;
    border: 2px solid var(--fg);
    border-radius: 10px;
    box-shadow: none;
    padding: 0.35rem;
}
.flag-popover a { border-radius: 6px; }
.flag-popover a:hover { background: #fdf6ea; color: var(--accent); }

/* Accordion: only the top pills show until the toggle reveals the rest. */
.flag-bubble--overflow { display: none; }
.bubble-cloud.show-all .flag-bubble--overflow { display: inline-flex; }

/* The "Show N more" control — a quieter, link-like pill so it reads as a
   control rather than another red flag. Matches the pill radius/padding but
   drops the fill and softens the border to a dashed muted outline. */
.flag-bubble-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    color: var(--muted);
    border: 1.5px dashed var(--border);
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.flag-bubble-toggle:hover,
.flag-bubble-toggle:focus-visible {
    background: #fdf6ea;
    border-color: var(--muted);
    color: var(--fg);
}
.flag-bubble-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Every pill now renders at former-tier-3 scale; without this the cloud
   grows several rows taller on a 375px viewport. */
@media (max-width: 640px) {
    .flag-bubble[data-tier] { font-size: 0.92rem; padding: 0.45rem 1rem; }
    .flag-bubble-toggle { font-size: 0.85rem; padding: 0.45rem 1rem; }
}