/* 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; }

/* ── URL field + submit button: one joined control ────────────────────
   The two boxes previously sat in a gap with mismatched borders (1px
   --border vs 1.5px --fg), which read as a misalignment even though
   both are exactly 2.75rem tall. Collapsing the gap and sharing one
   border makes them a single segmented control. */
.url-input-row { gap: 0; }

.url-input-row input[type="url"] {
    background: #fff;
    border: 1.5px solid var(--fg);
    border-right: none;
    border-radius: 10px 0 0 10px;
}

/* 0,2,0 — ties style.css's .url-input-row .submit-btn, wins on load order. */
.url-input-row .submit-btn {
    border: 1.5px solid var(--fg);
    border-radius: 0 10px 10px 0;
    padding: 0 1.25rem;
}

/* An SVG arrow instead of the `→` glyph: mono arrow glyphs sit off the
   optical centre of the em box, so the old one looked low in the button. */
.url-input-row .submit-btn svg {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
}

/* ── 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-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--fg);
    padding: 0.5rem 1.1rem;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* The count is metadata, not a second call to action. A filled red disc
   made it the loudest element in the cloud and used --accent-hover, a
   colour that appears nowhere else at rest. Styled like .tab-count
   instead: mono, muted, unfilled. */
.flag-bubble-count {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    color: var(--muted);
    background: none;
}

.flag-bubble:hover .flag-bubble-count,
.flag-bubble:focus-visible .flag-bubble-count { color: var(--accent); }

/* 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.1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    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.78rem; padding: 0.45rem 0.9rem; }
    .flag-bubble-toggle { font-size: 0.75rem; padding: 0.45rem 0.9rem; }
}

/* Reindex: an inline form styled to sit in the "Last indexed" line like the
   neighbouring link, plus the result banner shown after the redirect. */
.policy .reindex-form {
    display: inline;
    margin: 0;
}
.policy .reindex-button {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--muted);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}
.policy .reindex-button:hover,
.policy .reindex-button:focus-visible {
    color: var(--fg);
}
.policy .reindex-button:disabled {
    cursor: progress;
    text-decoration: none;
}
.reindex-banner {
    padding: 0.75rem 1rem;
    border: 2px solid var(--muted);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
}