/* ============================================================
   renewal-radar.css — the contract-renewals surface
   Used by: contract-renewals.html (full browse) and the
            "coming up for renewal" module on contracts.html.
   Prefix: .rnw-   Loads ALONGSIDE govcon-hub.css on the hub page
   (it reuses the --gcx-* tokens defined there) and alongside
   contracts.css on the tool page, which defines the same tokens.
   NEVER name anything "*-hero" (nav-v7 verdict-bar injection trap).

   DELIBERATE COLOUR DECISION: the near-term band is AMBER, never the
   red used for closing-soon tenders. Red on this site means "a bid
   deadline you must act on". A contract term ending is not a deadline
   and must not borrow that urgency. See js/renewal-radar.src.js.
   ============================================================ */

/* .sr-only is NOT defined in main.css or govcon-hub.css. Without this the
   select labels on the renewals toolbar render as visible stray text. */
.rnw-tools .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------- toolbar ---------------- */
.rnw-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    background: var(--gvc-paper, #fffdf8);
    border: 1px solid var(--gcx-line, #e6dcc8);
    border-radius: 12px;
    /* longhands only: a padding shorthand here would clobber the side
       gutters of any wrap class sharing this element. */
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 14px;
    padding-right: 14px;
    margin-bottom: 18px;
}
.rnw-tools__row { display: flex; flex-wrap: wrap; gap: 10px; }
/* minmax(0, 1fr) not 1fr anywhere text lives: a 1fr track floors at min-content
   and a row of unshrinkable text pushes its container past the viewport. */
.rnw-tools__row > * { flex: 1 1 150px; min-width: 0; }
/* The advanced block used to be two direct grid children of .rnw-tools; wrapping
   it (so it can move into the mobile sheet as one node) has to reproduce the
   parent grid's gap or the two rows sit flush on desktop. */
.rnw-tools__adv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.rnw-search {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    font-family: var(--gcx-sans, system-ui);
    font-size: 15px;
    color: var(--gcx-ink, #1a1a1a);
    background: #fff;
    border: 1px solid var(--gcx-line, #e6dcc8);
    border-radius: 9px;
    padding: 10px 12px;
}
.rnw-search:focus-visible,
.rnw-sel:focus-visible { outline: 2px solid var(--gcx-sienna, #a85a3c); outline-offset: 1px; }

.rnw-sel {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    font-family: var(--gcx-sans, system-ui);
    font-size: 14px;
    color: var(--gcx-ink, #1a1a1a);
    background: #fff;
    border: 1px solid var(--gcx-line, #e6dcc8);
    border-radius: 9px;
    padding: 9px 10px;
}
.rnw-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 14px;
    color: var(--gcx-ink-2, #40403a);
    cursor: pointer;
    flex: 0 1 auto;
}
.rnw-check input { width: 18px; height: 18px; accent-color: var(--gcx-forest, #1a3d2e); }

/* ---------------- mobile filter sheet ----------------
   Below 640px the five selects plus the checkbox fill a phone screen before a
   single result appears, so they MOVE (js/renewal-radar-page.src.js does a DOM
   move, never a clone) into a bottom sheet behind the Filters button. Above the
   breakpoint the inline toolbar is untouched. */

/* Desktop default: the button does not exist. */
.rnw-filterbtn { display: none; }

.rnw-fchips {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
/* [hidden] loses to ANY rule that sets display, which would leave an empty chip
   strip eating 44px of a phone screen. Assert it, at a specificity that wins. */
.rnw-fchips[hidden] { display: none; }

.rnw-fchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    max-width: 100%;
    box-sizing: border-box;
    font-family: var(--gcx-sans, system-ui);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    color: #fff;
    background: var(--gcx-forest, #1a3d2e);
    border: none;
    border-radius: 22px;
    /* vertical LONGHANDS: a shorthand on a class that shares an element with a
       gutter-owning wrapper silently zeroes the side gutters. */
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 13px;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.rnw-fchip span { font-size: 16px; line-height: 1; opacity: .78; }
.rnw-fchip:hover span { opacity: 1; }
.rnw-fchip:focus-visible { outline: 2px solid var(--gcx-sienna, #a85a3c); outline-offset: 2px; }

.rnw-sheet-wrap { position: fixed; inset: 0; z-index: 9990; }
/* Same assertion as above: the closed sheet must not become an invisible
   full-screen click blocker over the list. */
.rnw-sheet-wrap[hidden], .rnw-sheet[hidden] { display: none; }
.rnw-sheet-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 42, 31, .45);
    opacity: 0;
    transition: opacity .22s;
}
.rnw-sheet-wrap.open .rnw-sheet-overlay { opacity: 1; }
.rnw-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--gvc-paper, #fffdf8);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(15, 42, 31, .22);
    transform: translateY(102%);
    transition: transform .26s cubic-bezier(.22, .9, .3, 1);
    padding-top: 10px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding-left: 18px;
    padding-right: 18px;
}
.rnw-sheet-wrap.open .rnw-sheet { transform: translateY(0); }
.rnw-sheet__grab { width: 40px; height: 4px; border-radius: 999px; background: var(--gcx-line, #e6dcc8); margin: 4px auto 12px; }
.rnw-sheet__title {
    font-family: var(--gcx-serif, Georgia, serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--gcx-forest, #1a3d2e);
    margin: 0 0 14px;
}
/* Once the block leaves .rnw-tools its sr-only labels are no longer hidden by
   the scoped rule at the top of this file. Rather than leave that to chance,
   promote them into the sheet's visible field labels. */
.rnw-sheet .sr-only {
    position: static;
    display: block;
    width: auto; height: auto;
    margin: 0 0 6px;
    padding: 0;
    overflow: visible;
    clip: auto;
    font-family: var(--gcx-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gcx-forest, #1a3d2e);
}
.rnw-sheet .rnw-tools__row { display: block; }
.rnw-sheet .rnw-tools__row > * { margin-bottom: 14px; }
.rnw-sheet .rnw-sel { min-height: 48px; font-size: 15px; }
.rnw-sheet .rnw-check { min-height: 48px; display: flex; }
.rnw-sheet__foot { display: flex; gap: 12px; margin-top: 4px; }
.rnw-sheet__reset,
.rnw-sheet__done {
    min-height: 48px;
    font-family: var(--gcx-sans, system-ui);
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    padding-top: 13px;
    padding-bottom: 13px;
}
.rnw-sheet__reset {
    flex: 0 0 auto;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 14.5px;
    color: var(--gcx-sienna, #a85a3c);
    background: none;
    border: 1px solid var(--gcx-line, #e6dcc8);
}
.rnw-sheet__done {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--gcx-forest, #1a3d2e);
    border: none;
}
.rnw-sheet__reset:focus-visible,
.rnw-sheet__done:focus-visible { outline: 2px solid var(--gcx-sienna, #a85a3c); outline-offset: 2px; }
body.rnw-sheet-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .rnw-sheet, .rnw-sheet-overlay { transition: none; }
}

@media (max-width: 639px) {
    /* While the block is still parented by the toolbar it stays out of the way;
       inside the sheet this selector no longer matches, so it shows. */
    .rnw-tools .rnw-tools__adv { display: none; }
    .rnw-filterbtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex: 0 0 auto;
        min-height: 44px;
        font-family: var(--gcx-sans, system-ui);
        font-size: 14.5px;
        font-weight: 600;
        color: var(--gcx-forest, #1a3d2e);
        background: #fff;
        border: 1px solid var(--gcx-line, #e6dcc8);
        border-radius: 9px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 16px;
        padding-right: 16px;
        cursor: pointer;
    }
    .rnw-filterbtn:focus-visible { outline: 2px solid var(--gcx-sienna, #a85a3c); outline-offset: 1px; }
    .rnw-filterbtn__n {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        font-family: var(--gcx-mono, monospace);
        font-size: 11.5px;
        font-weight: 600;
        color: #fff;
        background: var(--gcx-forest, #1a3d2e);
        border-radius: 999px;
        padding: 0 5px;
    }
    .rnw-filterbtn__n[hidden] { display: none; }
    .rnw-fchips { display: flex; }
    .rnw-fchips[hidden] { display: none; }
    /* The search keeps the row; the button takes only what it needs. */
    .rnw-tools__row > .rnw-search { flex: 1 1 140px; }
}

.rnw-count {
    font-family: var(--gcx-mono, monospace);
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--gcx-ink-2, #40403a);
    margin: 0;
    padding-top: 2px;
}
.rnw-count b { color: var(--gcx-forest, #1a3d2e); }

/* ---------------- rows ---------------- */
.rnw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.rnw-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    background: #fff;
    border: 1px solid var(--gcx-line, #e6dcc8);
    border-left: 3px solid var(--gcx-line, #e6dcc8);
    border-radius: 11px;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 15px;
    padding-right: 15px;
}
.rnw-row--near { border-left-color: var(--gvc-amber, #b3801f); }
.rnw-row--mid { border-left-color: #c9b98a; }
.rnw-row--past { border-left-color: #b9b4a8; background: #fbfaf6; }

.rnw-row__main { min-width: 0; }
.rnw-row__title {
    font-family: var(--gcx-serif, Georgia, serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.32;
    color: var(--gcx-ink, #1a1a1a);
    margin: 0 0 7px;
    overflow-wrap: anywhere;
}
.rnw-row__held { font-size: 14.5px; color: var(--gcx-ink, #1a1a1a); margin: 0 0 3px; overflow-wrap: anywhere; }
.rnw-row__held strong { font-weight: 600; }
.rnw-row__heldby { color: var(--gcx-ink-2, #40403a); }
.rnw-row__prov { color: var(--gcx-ink-2, #40403a); font-size: 13px; }
.rnw-row__buyer { font-size: 13.5px; color: var(--gcx-ink-2, #40403a); margin: 0; overflow-wrap: anywhere; }
.rnw-row__sep { opacity: .55; }
.rnw-row__sol {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--gcx-ink-2, #40403a);
    margin: 2px 0 0;
    padding-top: 9px;
    border-top: 1px dashed var(--gcx-line, #e6dcc8);
    overflow-wrap: anywhere;
}
.rnw-row__sol code { font-family: var(--gcx-mono, monospace); font-size: 11.5px; background: var(--gcx-parchment, #fcf6e9); border-radius: 4px; padding: 1px 5px; }

.rnw-row__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rnw-chip {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--gcx-forest, #1a3d2e);
    background: var(--gvc-sage, #eef2ea);
    border-radius: 20px;
    padding: 3px 9px;
    /* never nowrap: a nowrap pill overflows its column silently and no
       scrollWidth check can see it (govcon sprint, 2026-07-20). */
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
}
.rnw-chip--warn { color: #7a4a10; background: #fbf0d8; }
.rnw-chip--quiet { color: var(--gcx-ink-2, #40403a); background: var(--gcx-parchment, #fcf6e9); }
.rnw-chip[data-tip] { border-bottom: 1px dotted currentColor; cursor: help; }

/* term block */
.rnw-row__term {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 3px 10px;
    align-content: start;
    background: var(--gcx-parchment, #fcf6e9);
    border-radius: 9px;
    padding: 10px 12px;
}
.rnw-term__label {
    grid-column: 1 / -1;
    font-family: var(--gcx-mono, monospace);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gcx-ink-2, #40403a);
    border-bottom: 1px dotted currentColor;
    cursor: help;
    justify-self: start;
}
.rnw-term__date { font-size: 15.5px; font-weight: 600; color: var(--gcx-ink, #1a1a1a); white-space: normal; }
.rnw-term__rel { font-size: 12.5px; color: var(--gcx-ink-2, #40403a); }
.rnw-row--near .rnw-term__rel { color: #7a4a10; font-weight: 600; }
.rnw-term__val {
    grid-column: 1 / -1;
    font-family: var(--gcx-mono, monospace);
    font-size: 14px;
    font-weight: 600;
    color: var(--gcx-forest, #1a3d2e);
    border-bottom: 1px dotted currentColor;
    cursor: help;
    justify-self: start;
    margin-top: 4px;
}
.rnw-term__val--none { font-size: 11.5px; font-weight: 500; color: var(--gcx-ink-2, #40403a); text-transform: none; }

@media (min-width: 720px) {
    .rnw-row { grid-template-columns: minmax(0, 1fr) 200px; }
    .rnw-row__term { justify-items: start; }
}

/* ---------------- states ---------------- */
.rnw-state {
    text-align: center;
    color: var(--gcx-ink-2, #40403a);
    font-size: 14.5px;
    background: var(--gvc-paper, #fffdf8);
    border: 1px dashed var(--gcx-line, #e6dcc8);
    border-radius: 11px;
    padding: 26px 18px;
    margin: 0;
}
.rnw-skel { display: grid; gap: 10px; }
.rnw-skel div {
    height: 92px;
    border-radius: 11px;
    background: linear-gradient(100deg, #f6f1e6 30%, #fdfaf2 50%, #f6f1e6 70%);
    background-size: 220% 100%;
    animation: rnwShim 1.5s linear infinite;
}
@keyframes rnwShim { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .rnw-skel div { animation: none; } }

.rnw-more {
    display: block;
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    font-family: var(--gcx-sans, system-ui);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gcx-forest, #1a3d2e);
    background: #fff;
    border: 1px solid var(--gcx-line, #e6dcc8);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
}
.rnw-more:hover { background: var(--gcx-parchment, #fcf6e9); }

/* ---------------- caveat plate (ships with every surface) ---------------- */
.rnw-caveats {
    background: var(--gvc-sage, #eef2ea);
    border: 1px solid #d8e0d4;
    border-radius: 11px;
    padding: 15px 17px;
    margin-top: 18px;
}
.rnw-caveats h3 {
    font-family: var(--gcx-mono, monospace);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gcx-forest, #1a3d2e);
    margin: 0 0 9px;
}
.rnw-caveats ul { margin: 0; padding-left: 18px; }
.rnw-caveats li { font-size: 13.5px; line-height: 1.55; color: var(--gcx-ink-2, #40403a); margin-bottom: 6px; }
.rnw-caveats li:last-child { margin-bottom: 0; }
.rnw-attrib { font-size: 12px; color: var(--gcx-ink-2, #40403a); margin: 10px 0 0; }

/* ---------------- the module embedded on /contracts.html ---------------- */
/* [hidden] is silently beaten by ANY rule that sets display, which would turn
   the un-populated module into an invisible click-blocker. Assert it. */
.rnw-mod[hidden] { display: none; }
/* margin-top only: this element also carries .ctd-wrap, which owns the side
   gutters via a padding shorthand and the centring via `margin: 0 auto`. A
   shorthand here would silently kill both on mobile. */
.rnw-mod { margin-top: 26px; }
.rnw-mod__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 5px; }
.rnw-mod__title { font-family: var(--gcx-serif, Georgia, serif); font-size: 19px; font-weight: 600; margin: 0; }
.rnw-mod__link { font-size: 13.5px; font-weight: 600; }
.rnw-mod__lede { font-size: 14px; line-height: 1.6; color: var(--gcx-ink-2, #40403a); margin: 0 0 13px; max-width: 68ch; }