/* ==========================================================================
   Bidmark

   One rule the whole interface follows:

       COLOUR MEANS PROVENANCE. NOTHING ELSE IS COLOURED.

   Green says a government source published this. Amber says a web search
   found it and nobody has checked it yet. Red says something is wrong. Blue
   is the one interactive accent. Everything else is grey on white, so a
   coloured thing on this page is always making a claim about where a fact
   came from, never decorating.

   The values below are the vivid cut of that palette. An earlier pass picked
   the darkest tone that passed contrast for every job, which is how the page
   ended up looking dusty: a muted green and a brown-amber read as age rather
   than as signal. Each provenance colour is now a pair. The darker one is the
   only one allowed under text, and the bright one draws rules, icons and
   fills, where nothing has to be legible through it. That is what lets the
   interface be bright without a single word of it dropping below 4.5:1.

   Structure is carried by elevation, not by outlines. A card is a surface
   lifted off the page; borders appear only where they mean something, which
   here is a selected state or a rule between rows of data. That is what stops
   a long form reading as a stack of boxes.

   Type is DM Sans, and the greys and blue are Figma's own. DM Sans is a
   variable font spanning weights 100 to 1000 with an optical size axis, which
   is why the interface can use 550 and 650 as real weights rather than
   rounding to the nearest static cut. DM Mono keeps the same drawing for
   values a government published, so a solicitation number still reads as
   quoted rather than composed.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Mono:wght@400;500&display=swap');

:root {
    /* Light only. An earlier build followed the operating system into dark
       mode, which turned every provenance colour into a glowing accent and
       made a document look like a dashboard. */
    color-scheme: light;

    /* Greys: the entire interface, minus provenance. They carry a slight blue
       cast rather than being neutral, because a dead-neutral grey next to a
       vivid blue is what makes a page look dusty; sharing a hue with the
       accent is what makes it look lit. Every one clears 4.5:1 on white, so
       no text on this site is a light grey suggestion of text. */
    --canvas: #f2f5fb;
    --paper: #ffffff;
    --paper-2: #f7f9fd;
    --paper-3: #e9eff9;

    --ink: #0b1220;
    --ink-2: #2a3446;
    --ink-3: #55617a;
    --ink-4: #7b879e;

    --line: #e2e8f2;
    --line-2: #cbd4e4;

    /* The single interactive accent, and now a single value: #2563eb clears
       4.9:1 on white, so the one blue can be a link, a fill behind white text
       and an icon at once. The old accent could not hold text and needed a
       darker twin, which is why half the interface was drawn in the twin and
       looked navy. --brand-dark survives as the pressed state. */
    --brand: #2563eb;
    --brand-dark: #1d4ed8;
    --brand-lift: #3b82f6;
    --brand-wash: #eef4ff;
    --brand-wash-2: #dbe7fe;

    /* Provenance. Nothing else in the system gets to use these.
       The plain name is the text-safe tone; -bright is for rules, icons and
       fills, where nothing has to be read through it. */
    --verified: #15803d;
    --verified-bright: #22c55e;
    --verified-wash: #e9fbf0;
    --verified-line: #93e2b4;

    --unverified: #b45309;
    --unverified-bright: #f59e0b;
    --unverified-wash: #fff8e7;
    --unverified-line: #f7d488;

    --alert: #dc2626;
    --alert-wash: #fef2f2;
    --alert-line: #fecaca;

    --radius-sm: 9px;
    --radius: 13px;
    --radius-lg: 18px;

    /* Elevation does the work borders used to. Two soft layers rather than one
       hard one, so a card looks lifted instead of outlined, and tinted with
       the same blue as the greys so a shadow never turns a white card grey. */
    --lift-1: 0 1px 2px rgba(18, 33, 66, .05), 0 1px 3px rgba(18, 33, 66, .05);
    --lift-2: 0 1px 2px rgba(18, 33, 66, .05), 0 6px 16px -4px rgba(18, 33, 66, .09);
    --lift-3: 0 2px 4px rgba(18, 33, 66, .05), 0 14px 32px -8px rgba(18, 33, 66, .13);
    --lift-4: 0 4px 8px rgba(18, 33, 66, .06), 0 28px 56px -14px rgba(18, 33, 66, .2);

    --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Wide. A 900px column in the middle of a 1600px screen reads as a
       document; this is a tool. */
    --shell: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;

    /* Let DM Sans pick its optical size: the small-size cut opens the counters
       and adds spacing, which is exactly what small interface text needs. */
    font-optical-sizing: auto;

    /* Deliberately no -webkit-font-smoothing: antialiased. It thins every
       stroke on macOS, and thin is the opposite of legible at 13 and 14px. */
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }

a { color: var(--brand-dark); text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }


/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.mono { font-family: var(--mono); font-size: .88em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 14px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

.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;
}

.eyebrow {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-dark);
}


/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 36px;
    height: 68px;
    padding: 0 32px;
    background: var(--paper);
    box-shadow: 0 1px 0 rgba(16, 20, 28, .06);
}

/* The mark carries the colour, so the wordmark does not. Tinting half the
   name as well would be one accessory too many next to it. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}
.brand-mark { flex: 0 0 auto; width: 28px; height: 28px; }
.brand-word { font-size: 19.5px; font-weight: 700; letter-spacing: -.038em; }
.brand:hover { color: var(--ink); text-decoration: none; }

.topbar nav { display: flex; align-items: center; gap: 28px; }
.topbar nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
}
.topbar nav a:hover { color: var(--ink); }
.topbar nav a.is-here { color: var(--brand-dark); font-weight: 600; }

.topbar-cta { margin-left: auto; }

.wrap {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 36px 32px 80px;
}


/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); text-decoration: none; font-weight: 500; }
.crumbs a:hover { color: var(--brand-dark); text-decoration: underline; }

/* The trail starts at the search form, which is the landing page here. An
   icon rather than the word "Home", because the word would be the fourth
   piece of text in a row that is already only signposting. */
.crumb-home { display: inline-flex; align-items: center; }
.crumb-home svg { width: 17px; height: 17px; }
.crumb-home:hover { text-decoration: none; }
.crumbs span[aria-current] { color: var(--ink-2); font-weight: 550; }
.crumbs .sep { color: var(--line-2); }


/* --------------------------------------------------------------------------
   Page heading
   -------------------------------------------------------------------------- */

.page-head { margin-bottom: 28px; }

.page-head h1 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -.035em;
}

.page-lead {
    max-width: 62ch;
    margin: 12px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-2);
}

.head-row { display: flex; align-items: flex-start; gap: 24px; }
.head-row > .btn { margin-left: auto; flex-shrink: 0; }

.back-link {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-3);
    text-decoration: none;
}
.back-link:hover { color: var(--brand-dark); }


/* --------------------------------------------------------------------------
   Steps

   Three decisions, shown as three, so the form never looks like one long wall
   of controls. The numbers are honest: this genuinely is a sequence, and the
   later steps depend on the earlier ones.
   -------------------------------------------------------------------------- */

.steps {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 26px;
}

.step-item {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 6px 14px 6px 6px;
    border: 0;
    border-radius: 999px;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 550;
    color: var(--ink-3);
    cursor: pointer;
}
.step-item:hover { color: var(--ink); }

.step-num {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--paper-3);
    color: var(--ink-3);
    font-size: 13.5px;
    font-weight: 700;
}

.step-item.is-current { color: var(--brand-dark); font-weight: 650; }
.step-item.is-current .step-num { background: var(--brand-dark); color: #fff; }

.step-item.is-done .step-num { background: var(--brand-wash-2); color: var(--brand-dark); }

.step-line {
    flex: 0 1 90px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--line-2);
}


/* --------------------------------------------------------------------------
   Split layout: the work on the left, what you have chosen on the right
   -------------------------------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}

.card {
    padding: 26px 28px 28px;
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--lift-2);
}
.card + .card { margin-top: 20px; }

.card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.card-head h2 { font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.card-head p { margin: 5px 0 0; font-size: 15px; color: var(--ink-3); }

.tag-required {
    margin-left: auto;
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--brand-wash);
    color: var(--brand-dark);
    font-size: 12.5px;
    font-weight: 650;
}

.card-note {
    margin: 22px 0 0;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--paper-2);
    font-size: 14px;
    color: var(--ink-2);
}

.field-block { margin-top: 26px; }
.field-block > .field-label { margin-bottom: 12px; font-size: 15px; }


/* --------------------------------------------------------------------------
   Tiles

   The whole tile is the target, the icon says what kind of work it is at a
   glance, and the checked state is unmistakable. A 16px native checkbox with a
   13px label beside it was what made the first build read as a settings screen.
   -------------------------------------------------------------------------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.tiles--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tile {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 22px;
    gap: 14px;
    align-items: start;
    padding: 16px 16px 16px 14px;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--lift-1);
    cursor: pointer;
    transition: box-shadow .13s ease, border-color .13s ease, background .13s ease;
}
.tile:hover { box-shadow: var(--lift-2); }

.tile input { position: absolute; opacity: 0; width: 0; height: 0; }

.tile-icon {
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 10px;
    background: var(--brand-wash);
    color: var(--brand-dark);
}

.tile-body { min-width: 0; }

.tile-label {
    display: block;
    font-size: 15.5px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--ink);
}

.tile-terms {
    display: block;
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-3);
}

/* The box is drawn rather than native, so it can sit at the top right of a
   two-line tile and still line up with the label. */
.tile-box {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1.5px solid var(--line-2);
    border-radius: 6px;
    background: var(--paper);
    transition: border-color .13s ease, background-color .13s ease;
}

.tile:has(input:checked) {
    border-color: var(--brand-dark);
    background: var(--brand-wash);
    box-shadow: var(--lift-2);
}
.tile:has(input:checked) .tile-icon { background: var(--brand-wash-2); }
.tile:has(input:checked) .tile-box {
    border-color: var(--brand-dark);
    background-color: var(--brand-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.4l3.3 3.3L12.8 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}
.tile:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Buyer and certification tiles carry no description, so they lose the second
   line and tighten up. */
.tile--slim { grid-template-columns: 34px minmax(0, 1fr) 22px; align-items: center; padding: 13px 14px; }
.tile--slim .tile-icon { width: 34px; height: 34px; padding: 6px; border-radius: 9px; }
.tile--slim .tile-box { margin-top: 0; }
.tile--plain { grid-template-columns: minmax(0, 1fr) 22px; align-items: center; padding: 14px 16px; }



/* --------------------------------------------------------------------------
   Groups within a step

   Step 2 asks one question about two kinds of buyer. A heading between the two
   grids says which is which without splitting them into two cards, because they
   are not two decisions.
   -------------------------------------------------------------------------- */

.group-head { margin: 0 0 12px; }
.group-head--spaced { margin-top: 26px; }
.group-head h3 {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.012em;
    color: var(--ink);
}
.group-head p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }


/* --------------------------------------------------------------------------
   The adder

   A category the user types is a first-class selection, not a keyword, so it
   has to look like one. Chips rather than a comma-separated box: a comma list
   reads as a note to ourselves, whereas a chip reads as something chosen, which
   is exactly what it is.
   -------------------------------------------------------------------------- */

.adder { display: flex; gap: 10px; align-items: stretch; }
.adder input[type="text"] { flex: 1 1 auto; }
.adder .btn { flex: 0 0 auto; }

.adder-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.adder-chips:not(:empty) { margin-top: 12px; }

.adder-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 13px;
    border-radius: 999px;
    border: 1.5px solid var(--brand-dark);
    background: var(--brand-wash);
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 600;
}

.adder-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.adder-x:hover { background: var(--brand-wash-2); }
.adder-x svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
    .adder { flex-wrap: wrap; }
    .adder input[type="text"] { flex: 1 1 100%; }
}
/* --------------------------------------------------------------------------
   The summary rail
   -------------------------------------------------------------------------- */

.rail-card {
    position: sticky;
    top: 92px;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--lift-2);
}

.rail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.rail-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }

.rail-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--brand-wash);
    color: var(--brand-dark);
}
.rail-mark svg { width: 21px; height: 21px; }

.rail-count { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-3); }

.rail-group + .rail-group { margin-top: 16px; }
.rail-group-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.rail-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.rail-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 13px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-wash);
    color: var(--brand-dark);
    font: inherit;
    font-size: 14px;
    font-weight: 550;
    cursor: pointer;
}
.rail-chip:hover { background: var(--brand-wash-2); }
.rail-chip svg { width: 15px; height: 15px; opacity: .75; }

.rail-empty { margin: 0; font-size: 14.5px; color: var(--ink-4); }

.rail-note {
    display: flex;
    gap: 13px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.rail-note svg { flex: 0 0 auto; width: 26px; height: 26px; color: var(--verified); }
.rail-note h3 { font-size: 14.5px; font-weight: 650; }
.rail-note p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }


/* --------------------------------------------------------------------------
   The action bar
   -------------------------------------------------------------------------- */

.actionbar {
    position: sticky;
    bottom: 20px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding: 15px 16px 15px 24px;
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--lift-3);
}

.actionbar-note { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14.5px; color: var(--ink-3); }
.actionbar-note strong { color: var(--ink-2); font-weight: 650; }

.footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0 0;
    font-size: 13.5px;
    color: var(--ink-4);
}
.footnote svg { width: 15px; height: 15px; }


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border: 1.5px solid var(--brand);
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--lift-1);
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; box-shadow: var(--lift-2); }
.btn svg { width: 17px; height: 17px; }

.btn-lg { padding: 14px 26px; font-size: 16px; }

.btn-secondary { background: var(--paper); border-color: var(--line-2); color: var(--ink); }
.btn-secondary:hover { background: var(--paper); border-color: var(--ink-4); color: var(--ink); }

.btn-quiet {
    background: none;
    border-color: transparent;
    color: var(--ink-2);
    box-shadow: none;
}
.btn-quiet:hover { background: var(--paper-3); border-color: transparent; color: var(--ink); box-shadow: none; }

.btn-outline {
    background: var(--paper);
    border-color: var(--brand);
    color: var(--brand-dark);
    box-shadow: none;
}
.btn-outline:hover { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-dark); box-shadow: none; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-3);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.btn-ghost:hover { background: var(--paper-3); color: var(--ink); }

.src-btn {
    padding: 8px 13px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--paper-3);
    color: var(--ink-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.src-btn:hover { background: var(--brand-wash); color: var(--brand-dark); }


/* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.field-grid > label { display: block; }

.field-label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 650;
    color: var(--ink);
}

.field-hint {
    display: block;
    margin-top: 7px;
    font-size: 13.5px;
    color: var(--ink-3);
}

input[type="text"], input[type="search"], select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
}
input::placeholder { color: var(--ink-4); }
input[type="text"]:focus, input[type="search"]:focus, select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-wash);
}

.checkline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.checkline input { width: 18px; height: 18px; accent-color: var(--brand-dark); cursor: pointer; }

.state-picker { margin-top: 18px; }

.state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 7px;
    margin-top: 10px;
}

.state-chip {
    position: relative;
    display: block;
    padding: 9px 0;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--paper);
    box-shadow: var(--lift-1);
    font-family: var(--mono);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}
.state-chip:hover { box-shadow: var(--lift-2); }
.state-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.state-chip:has(input:checked) { border-color: var(--brand-dark); background: var(--brand-dark); color: #fff; }


/* --------------------------------------------------------------------------
   Review step
   -------------------------------------------------------------------------- */

.recap { display: grid; gap: 2px; }

.recap-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.recap-row:last-child { border-bottom: 0; }
.recap-key { font-size: 14px; font-weight: 650; color: var(--ink-3); }
.recap-val { font-size: 15px; color: var(--ink); }
.recap-val .chip { margin: 0 6px 6px 0; }


/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.notice {
    margin: 0 0 22px;
    padding: 16px 20px;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--lift-1);
    font-size: 15px;
}
.notice strong { display: block; margin-bottom: 2px; }
.notice p { margin: 4px 0 0; color: var(--ink-2); }
.notice ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); }

.notice--bad { background: var(--alert-wash); box-shadow: inset 3.5px 0 0 var(--alert), var(--lift-1); }
.notice--bad strong { color: var(--alert); }

.notice--warn { background: var(--unverified-wash); box-shadow: inset 3.5px 0 0 var(--unverified-bright), var(--lift-1); }
.notice--warn strong { color: var(--unverified); }

.notice--good { background: var(--verified-wash); box-shadow: inset 3.5px 0 0 var(--verified-bright), var(--lift-1); }
.notice--good strong { color: var(--verified); }

/* Blue, not green. Confirming something you did is not a claim about where a
   fact came from, and green here would be the system congratulating itself in
   the one colour reserved for government sources. */
.notice--info { background: var(--brand-wash); box-shadow: inset 3.5px 0 0 var(--brand), var(--lift-1); }
.notice--info strong { color: var(--brand-dark); }

/* The icon variant. `.notice` lays its children out in normal flow, so a
   banner that wants an icon beside the text wraps that text in `.notice-body`
   rather than every existing banner growing a wrapper it does not need. */
.notice--icon { display: flex; align-items: flex-start; gap: 13px; }
.notice--icon > svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.notice--warn.notice--icon > svg { color: var(--unverified-bright); }
.notice--good.notice--icon > svg { color: var(--verified-bright); }
.notice-body { flex: 1 1 auto; min-width: 0; }
.notice-aside { flex: 0 0 auto; align-self: center; font-size: 14px; font-weight: 600; white-space: nowrap; }

.conflict-banner {
    margin-bottom: 20px;
    padding: 15px 18px;
    border-radius: var(--radius);
    background: var(--alert-wash);
    box-shadow: inset 3px 0 0 var(--alert), var(--lift-1);
    font-size: 15px;
}
.conflict-banner strong { color: var(--alert); }


/* --------------------------------------------------------------------------
   Provenance badges
   -------------------------------------------------------------------------- */

.official-badge, .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
}

.official-badge { background: var(--verified-wash); color: var(--verified); }
.official-badge::before { content: '\2713'; font-size: 11px; }

.ai-badge { background: var(--unverified-wash); color: var(--unverified); }
.ai-badge::before { content: '?'; font-weight: 700; }

/* Still amber, because the lead as a whole is still unconfirmed, but without
   the question mark. "Closed" and "The link no longer works" are things the
   fetcher established by reading the page; prefixing them with "?" says we are
   unsure of the one part we are not. */
.ai-badge--found::before { content: none; }

.not-stated { color: var(--ink-3); font-style: italic; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--paper-3);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 550;
    white-space: nowrap;
    text-decoration: none;
}
.chip code { font-family: var(--mono); font-size: 11.5px; }
.chip--official { background: var(--verified-wash); color: var(--verified); }
.chip--derived { background: var(--unverified-wash); color: var(--unverified); }

.score {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--paper-3);
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-2);
}


/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */

.results-head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 18px; }

.results-count { font-size: 34px; font-weight: 700; letter-spacing: -.035em; }

.results-sub { max-width: 62ch; margin: 7px 0 0; font-size: 15.5px; color: var(--ink-2); }

.results-actions { display: flex; gap: 10px; margin-left: auto; flex-shrink: 0; }
.results-actions form { margin: 0; }

/* What was asked for, as chips. Read-only: changing the question means
   re-running the search, and a web run costs real money, so it is a deliberate
   trip through Edit search rather than a stray click on a cross. */
.criteria { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.criteria-chip {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--paper);
    box-shadow: var(--lift-1);
    font-size: 14px;
    font-weight: 550;
    color: var(--ink-2);
}
.criteria-chip--quiet { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3); }

.criteria-edit { margin-left: 4px; font-size: 14px; font-weight: 550; }


/* --------------------------------------------------------------------------
   Refine panel
   -------------------------------------------------------------------------- */

.results-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 22px; align-items: start; }

.refine {
    position: sticky;
    top: 92px;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--lift-2);
}

.refine-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.refine-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.refine-clear { margin-left: auto; font-size: 13.5px; font-weight: 550; }

.refine-search { position: relative; display: block; margin-bottom: 20px; }
.refine-search svg { position: absolute; left: 12px; top: 12px; width: 17px; height: 17px; color: var(--ink-4); }
.refine-search input { padding-left: 38px; font-size: 14.5px; }

.refine-group { padding-top: 18px; border-top: 1px solid var(--line); }
.refine-group:first-of-type { padding-top: 0; border-top: 0; }
.refine-group + .refine-group { margin-top: 18px; }

.refine-group-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

.opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14.5px;
    color: var(--ink-2);
    cursor: pointer;
}
.opt:hover { color: var(--ink); }
.opt input { width: 17px; height: 17px; accent-color: var(--brand-dark); cursor: pointer; }
.opt-count { margin-left: auto; font-size: 13px; color: var(--ink-4); }

.refine-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-4); }

.refine-apply { width: 100%; margin-top: 20px; }


/* --------------------------------------------------------------------------
   Results panel
   -------------------------------------------------------------------------- */

.results-panel { min-width: 0; }

.panel-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--lift-1);
}

.filters { display: flex; gap: 4px; overflow-x: auto; }

.filters a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: var(--ink-3);
    font-size: 14.5px;
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
}
.filters a:hover { background: var(--paper-3); color: var(--ink); }
.filters a.is-active { background: var(--brand-dark); color: #fff; }

.chip-count {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--paper-3);
    font-size: 12.5px;
    font-weight: 650;
    color: var(--ink-2);
}
.filters a.is-active .chip-count { background: rgba(255, 255, 255, .22); color: #fff; }

.sortby { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; font-size: 14px; color: var(--ink-3); }
.sortby select { width: auto; padding: 8px 11px; font-size: 14px; }

.panel-sub {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 16px 0;
    font-size: 14.5px;
    color: var(--ink-2);
}
.panel-sub svg { width: 18px; height: 18px; color: var(--verified); }
.panel-sub strong { font-weight: 700; color: var(--ink); }


/* --------------------------------------------------------------------------
   Result card

   Official and discovered results are drawn differently on purpose. A notice
   from a government source can be traced field by field; a lead a web search
   turned up is only as good as its verification status. Collapsing those into
   one treatment is the failure this product exists to avoid, so the
   difference is carried three ways at once: the colour of the left rule,
   whether that rule is solid or dashed, and a badge that says it in words. It
   survives greyscale and colour blindness.
   -------------------------------------------------------------------------- */

.result {
    margin-bottom: 14px;
    padding: 22px 24px;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--lift-1);
    transition: box-shadow .13s ease;
}
.result:hover { box-shadow: var(--lift-2); }

.result--official { box-shadow: inset 3.5px 0 0 var(--verified-bright), var(--lift-1); }
.result--official:hover { box-shadow: inset 3.5px 0 0 var(--verified-bright), var(--lift-2); }

/* Dashes drawn as a repeating gradient, so the lead rule stays visually
   different from the official one without a border. */
.result--lead {
    box-shadow: var(--lift-1);
    background-image: repeating-linear-gradient(
        to bottom,
        var(--unverified-bright) 0 7px,
        transparent 7px 13px
    );
    background-size: 3.5px 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

/* A lead somebody opened and confirmed against the official posting. The rule
   goes solid because the gap the dashes stood for has been closed, but it is
   green at all only because the person confirming it read a government page.
   Nothing here promotes itself. */
.result--checked { box-shadow: inset 3.5px 0 0 var(--verified-bright), var(--lift-1); }
.result--checked:hover { box-shadow: inset 3.5px 0 0 var(--verified-bright), var(--lift-2); }

.result-top { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 11px; }

/* Our own judgement, so it stays grey. Colour is reserved for saying where a
   fact came from. */
.result-score { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }

.result-title { font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -.022em; }
.result-title a { color: var(--ink); text-decoration: none; }
.result-title a:hover { color: var(--brand-dark); text-decoration: underline; }

.result-org { margin: 7px 0 0; font-size: 14.5px; font-weight: 550; color: var(--ink-2); }

.result-summary { max-width: 82ch; margin: 11px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

.match-pill {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--brand-wash);
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.result-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 16px;
    font-size: 14.5px;
    color: var(--ink-2);
}
.result-fact { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.result-fact > svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--ink-4); }

.result-fact-key { color: var(--ink-3); }

.deadline-pill {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
}
/* The same urgency colours where the deadline is the answer to a field rather
   than a footnote on a card. Without this it was a bare background behind
   running text, which read as a stray text selection. The negative left margin
   keeps the words optically flush with the values above and below it. */
.deadline {
    display: inline-block;
    margin-left: -10px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.deadline--passed, .deadline--critical { background: var(--alert-wash); color: var(--alert); }
.deadline--soon { background: var(--unverified-wash); color: var(--unverified); }
.deadline--comfortable { background: var(--paper-3); color: var(--ink-3); }
.deadline--unchecked { background: var(--unverified-wash); color: var(--unverified); }

/* A tender that has closed is not an error, so it is not drawn as one. Grey
   says "nothing here for you" without borrowing the colour that means a fact
   is in doubt. */
.deadline--closed { background: var(--paper-3); color: var(--ink-3); }

/* Read off the buyer's own page, so it is green — the same green that means
   "traced to the buyer" everywhere else. Colour carries provenance in this
   interface and nothing else, so a date quoted from a county's own PDF gets
   it and the identical date on a listing site does not. */
.deadline--onpage { background: var(--verified-wash); color: var(--verified); }

/* What we can say when the page states no closing date. Not a deadline, drawn
   nothing like one: plain grey text, no pill, no border. */
.stale-note {
    color: var(--ink-3);
    font-size: 13px;
    line-height: 1.4;
}

/* What the list is holding back, and how to see it. Quiet, because it is a
   footnote, but never absent: a filter that silently drops most of your
   results is its own kind of dishonesty. */
.closed-note {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin: 0 0 16px;
    padding: 11px 15px;
    border-radius: var(--radius);
    background: var(--paper-3);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-3);
}
.closed-note svg { flex: 0 0 auto; width: 17px; height: 17px; align-self: center; color: var(--ink-4); }
.closed-note span { flex: 1 1 340px; }
.closed-note strong { color: var(--ink); font-weight: 700; }
.closed-note a { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }

.deadline-raw { font-style: italic; color: var(--unverified); }

/* Why a tender reached you is the product's whole claim, so it gets a surface
   of its own rather than a line of grey text under the facts. */
.why-band {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    background: var(--brand-wash);
    font-size: 14px;
    color: var(--ink-2);
}
.why-band > svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--brand-dark); }
.why-label { font-weight: 650; color: var(--ink); }
/* Separators sit between items, so the adjacent-sibling selector is what is
   wanted here. `:first-of-type` would count the label span too, since it is
   also a span, and put a bullet in front of the first item. */
.why-item { position: relative; }
.why-item + .why-item { padding-left: 15px; }
.why-item + .why-item::before {
    content: '\2022';
    position: absolute;
    left: 4px;
    color: var(--ink-4);
}
.why-more { font-weight: 550; }

.result-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.result-foot form { display: inline; margin: 0; }

/* Also used on <button> for things that open a panel rather than navigate,
   which is why it resets the button chrome rather than assuming an anchor. */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }
.btn-link svg { width: 15px; height: 15px; }

.btn-ghost svg { width: 16px; height: 16px; }

.result-caution { font-size: 13.5px; color: var(--unverified); }


/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.empty {
    padding: 60px 32px;
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--lift-1);
    text-align: center;
}
.empty h2 { font-size: 23px; letter-spacing: -.025em; }
.empty p { max-width: 48ch; margin: 12px auto 0; font-size: 15.5px; color: var(--ink-2); }
.empty .btn { margin-top: 22px; }


/* --------------------------------------------------------------------------
   Search history
   -------------------------------------------------------------------------- */

.history-row {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 12px;
    padding: 20px 24px;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--lift-1);
    transition: box-shadow .13s ease;
}
.history-row:hover { box-shadow: var(--lift-2); }

.history-main { flex: 1 1 auto; min-width: 0; }

.history-title { font-size: 17px; font-weight: 650; line-height: 1.4; letter-spacing: -.018em; }
.history-title a { color: var(--ink); text-decoration: none; }
.history-title a:hover { color: var(--brand-dark); text-decoration: underline; }

.history-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 7px; font-size: 14px; color: var(--ink-3); }

.history-count { flex: 0 0 auto; text-align: right; }
.history-number { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.history-label { font-size: 13px; color: var(--ink-3); }

.history-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.history-actions form { margin: 0; }

.status-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; }
.status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.status-dot--bad { color: var(--alert); }
.status-dot--bad::before { background: var(--alert); }
.status-dot--busy { color: var(--brand-dark); }
.status-dot--busy::before { background: var(--brand); }


/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */

.running {
    max-width: 560px;
    margin: 56px auto;
    padding: 48px 40px;
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--lift-2);
    text-align: center;
}
.running h1 { font-size: 25px; letter-spacing: -.028em; }
.running > .muted { margin: 10px 0 0; font-size: 15.5px; }

.progress-track {
    position: relative;
    height: 6px;
    margin: 32px 0 14px;
    border-radius: 999px;
    background: var(--paper-3);
    overflow: hidden;
}

.progress-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width .4s ease; }

/* While every query is still in flight there is no honest fraction to show,
   so the bar sweeps rather than claiming a position. */
.progress-track--indeterminate .progress-fill {
    width: 40% !important;
    animation: sweep 1.5s ease-in-out infinite;
}
@keyframes sweep {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
    .progress-track--indeterminate .progress-fill { animation: none; width: 100% !important; }
}

.progress-label { margin: 0; font-size: 15.5px; font-weight: 650; }
.running-note { margin: 16px 0 0; font-size: 14.5px; }


/* --------------------------------------------------------------------------
   Detail pages
   -------------------------------------------------------------------------- */

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }

.section { margin-bottom: 20px; }
.section h1 { font-size: 30px; margin-top: 6px; letter-spacing: -.032em; }
.section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.section-title h2 { font-size: 18px; font-weight: 700; }

.panel { border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--lift-1); }

.panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 22px;
    border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }

.panel-body { padding: 20px 22px; }

.field {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.field:last-child { border-bottom: 0; }

.field-key { font-size: 14px; font-weight: 650; color: var(--ink-3); }
.field-val { font-size: 15px; min-width: 0; word-break: break-word; }

.rail .panel-body { padding: 18px 20px; }
.rail .panel + .panel { margin-top: 20px; }

.prose { font-size: 15px; line-height: 1.65; white-space: pre-wrap; color: var(--ink-2); }

/* `.ai-block` lived here: a dashed-border surface for AI output that must not
   share a panel with government data. It went with the placeholder section it
   was written for, since nothing generates AI output yet. Bring it back with
   the feature, not before. The boundary it drew is still enforced in the
   evidence drawer, where an AI-inferred row gets `.ai-badge` and can never
   appear under an official one. */

/* Anything quoted from a source we have not verified is set apart, so it can
   never be mistaken for a value this system worked out. */
.quoted {
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    background: var(--unverified-wash);
    box-shadow: inset 2px 0 0 var(--unverified-line);
    font-style: italic;
    color: var(--unverified);
}
.quoted-inline { font-style: italic; color: var(--ink-2); }

.break-url { word-break: break-all; }

.reason-row { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.reason-row:last-of-type { border-bottom: 0; }

.rail-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.rail-actions form { margin: 0; }
.rail-actions .btn-ghost { justify-content: center; width: 100%; }

.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; padding: 9px 0 9px 16px; border-left: 2px solid var(--line); }
.timeline li::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-2);
}
.timeline li.warning::before, .timeline li.critical::before { background: var(--alert); }
.timeline .when { font-size: 13px; color: var(--ink-3); }


/* --------------------------------------------------------------------------
   Evidence drawer
   -------------------------------------------------------------------------- */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: flex-end;
    background: rgba(0, 0, 0, .4);
}

.drawer { display: flex; flex-direction: column; width: min(600px, 100%); background: var(--paper); box-shadow: var(--lift-4); }

.drawer-head { display: flex; align-items: center; gap: 14px; padding: 22px 26px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 21px; letter-spacing: -.025em; }

.drawer-body { flex: 1; overflow-y: auto; padding: 22px 26px; }

.evidence-card { margin-bottom: 16px; padding: 20px; border-radius: var(--radius); background: var(--paper-2); }

.evidence-quote {
    margin-top: 14px;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    background: var(--verified-wash);
    box-shadow: inset 3px 0 0 var(--verified);
    font-size: 14.5px;
    line-height: 1.6;
}

.evidence-meta { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 6px 14px; margin: 16px 0 0; font-size: 13.5px; }
.evidence-meta dt { color: var(--ink-3); }
.evidence-meta dd { margin: 0; color: var(--ink-2); word-break: break-word; }

.evidence-note { margin: 0; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--paper-2); font-size: 14px; color: var(--ink-2); }


/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.howto::backdrop { background: rgba(0, 0, 0, .4); }

.howto {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--lift-4);
    color: var(--ink);
}

.howto-head { display: flex; align-items: center; gap: 14px; padding: 24px 26px 0; }
.howto-head h2 { font-size: 22px; letter-spacing: -.025em; }
.howto-head .btn-ghost { margin-left: auto; }

.howto-body { padding: 18px 26px 26px; }

.howto-step { display: flex; gap: 15px; padding: 13px 0; }
.howto-step + .howto-step { border-top: 1px solid var(--line); }
.howto-step h3 { font-size: 15.5px; font-weight: 650; }
.howto-step p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }

.howto-num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-wash);
    color: var(--brand-dark);
    font-size: 13.5px;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   Pager
   -------------------------------------------------------------------------- */

.pager { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.pager a, .pager span {
    min-width: 40px;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    background: var(--paper);
    box-shadow: var(--lift-1);
    color: var(--ink-2);
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}
.pager a:hover { color: var(--brand-dark); box-shadow: var(--lift-2); }
.pager .current { background: var(--brand-dark); color: #fff; font-weight: 650; }
.pager .disabled { background: transparent; box-shadow: none; color: var(--ink-4); }


/* --------------------------------------------------------------------------
   Detail page header

   A result's own page opens with the same five things you triaged on in the
   list, so arriving here confirms you clicked the right one rather than
   making you re-read to find out.
   -------------------------------------------------------------------------- */

.detail-hero { margin-bottom: 22px; }
.detail-hero h1 { margin: 13px 0 0; font-size: 31px; line-height: 1.18; letter-spacing: -.034em; }

.hero-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.hero-org { margin: 9px 0 0; font-size: 15.5px; font-weight: 550; color: var(--ink-2); }

.hero-facts { display: flex; flex-wrap: wrap; gap: 11px 32px; margin-top: 17px; }
.hero-fact { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 14.5px; color: var(--ink-2); }
.hero-fact > svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--brand-lift); }

/* The one thing in a row of plain facts that goes somewhere, so the only
   drawn as a link. The external mark is not decoration: the rest of the row is
   plain text, and a link coloured like the text beside it is one nobody finds. */
.source-link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); }
.source-link svg { flex: 0 0 auto; width: 13px; height: 13px; }

/* A government term explained, once, where the reader meets it.

   Grey rather than coloured: an explanation is not a claim about where a fact
   came from, and colour on this site only ever means that. */
.jargon-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--paper-3);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-2);
}
.jargon-note > svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--ink-4); }
.jargon-note strong { font-weight: 650; color: var(--ink); }

/* What the search matched on, said in the same words as the card. */
/* Part of the header rather than a block of its own, so it is separated by a
   rule and not by a fill. The wash made it the loudest thing under the title,
   which put the emphasis on our own score instead of on who is buying. */
.matched-band {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 10px;
    margin-top: 17px;
    padding: 15px 0 0;
    border-top: 1px solid var(--line);
    font-size: 14.5px;
    color: var(--ink-2);
}
.matched-band > svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--brand); }
.matched-label { font-weight: 650; color: var(--brand-dark); }
.matched-item { position: relative; }
.matched-item + .matched-item { padding-left: 16px; }
.matched-item + .matched-item::before {
    content: '\2022';
    position: absolute;
    left: 5px;
    color: var(--ink-4);
}


/* --------------------------------------------------------------------------
   Tabs

   The tabs are links to `?tab=`, and the server marks the chosen one. With
   JavaScript they never reach the server: the script swaps the panels and
   rewrites the address. So the same markup is a set of pages when scripting
   is off and an instant switch when it is on, and neither version has a tab
   that does nothing.
   -------------------------------------------------------------------------- */

/* The bar scrolls sideways when three tabs will not fit, and only sideways.
   `overflow-x` alone does not say that: the moment one axis stops being
   `visible` the other computes to `auto` too, so the bar was one pixel of
   overhang away from a vertical scrollbar and the selected tab's underline
   was exactly that pixel. Hence `overflow-y` spelled out.

   The rule under the tabs is an inset shadow rather than a border for the
   same reason. A border sits outside the scrollport, so covering it meant
   hanging the underline over the edge; painted inside, the underline can
   cover it from within and nothing leaves the box. */
.tabbar {
    display: flex;
    gap: 2px;
    padding: 0 10px;
    box-shadow: inset 0 -1px 0 var(--line);
    overflow-x: auto;
    overflow-y: hidden;
}

.tab {
    position: relative;
    padding: 15px 16px;
    color: var(--ink-3);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab[aria-selected="true"] { color: var(--brand); }
.tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 2.5px;
    border-radius: 2px 2px 0 0;
    background: var(--brand);
}

.is-hidden { display: none; }

.tabpanel > h3 {
    margin-bottom: 9px;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.02em;
}



/* --------------------------------------------------------------------------
   Fact cards

   The handful of values you act on, lifted out of the table so they can be
   read at a glance. A value that has not been confirmed is drawn in amber and
   carries the word, because a field that looks like the others is a field
   that will be believed like the others.
   -------------------------------------------------------------------------- */

/* `align-items: start` so a card sizes to its own content. Without it a
   two-word value is stretched to match whatever the tallest card in the row
   is, which turned "Iowa" into a card the height of a paragraph. */
.factcards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 13px;
    margin-top: 18px;
}

/* The one value people act on. It is also the longest, because it is quoted
   rather than parsed, so it gets the full width instead of being squeezed
   into four lines beside something shorter. */
.factcard--wide { grid-column: 1 / -1; }

.factcard {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 13px;
    padding: 15px 17px;
    border-radius: var(--radius);
    background: var(--paper-2);
}

.factcard-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--brand-wash-2);
    color: var(--brand);
}
.factcard-icon svg { width: 19px; height: 19px; }

.factcard-head { display: flex; align-items: flex-start; gap: 10px; }
.factcard-key { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.factcard-val { margin-top: 2px; font-size: 15.5px; font-weight: 600; color: var(--ink); word-break: break-word; }
.factcard-note { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }

.factcard--unverified { background: var(--unverified-wash); }
.factcard--unverified .factcard-icon { background: #fbe3ae; color: var(--unverified); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}
.pill--warn { background: #fbe3ae; color: var(--unverified); }

/* Green, and on this page it is rare on purpose. Almost nothing about a lead
   traces to the buyer; a closing date read out of the buyer's own document is
   one of the few things that does, and the pill is what says so. */
.pill--good { background: var(--verified-line); color: #0b5c31; }
.pill--ok { background: var(--verified-wash); color: var(--verified); }


/* --------------------------------------------------------------------------
   Discovery evidence
   -------------------------------------------------------------------------- */

/* How a lead was found, across the full width underneath the facts.

   The four parts are one account of a single event and read left to right in
   the order it happened. Stood up in a 292px column they became a ladder, and
   the part that wrapped worst was the query, which is the one that actually
   tells you whether the lead is on topic. */
.foundbar {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: var(--radius);
    background: var(--brand-wash);
}

.foundbar-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--paper);
    color: var(--brand);
}
.foundbar-icon svg { width: 19px; height: 19px; }

.foundbar-main { flex: 1; min-width: 0; }
.foundbar-head { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }

/* The query gets the wider column: it holds a quoted sentence, the other
   three hold a timestamp or a count. */
.foundbar-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    gap: 16px 24px;
    margin-top: 14px;
}

.evi-key { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.evi-val { margin-top: 3px; font-size: 14px; color: var(--ink-2); word-break: break-word; }


/* --------------------------------------------------------------------------
   What is still unknown

   The gaps, listed as plainly as the facts. Everywhere else an interface
   would leave silence, this product owes the reader a sentence.
   -------------------------------------------------------------------------- */

.unknown-band {
    margin-top: 20px;
    padding: 17px 21px;
    border-radius: var(--radius);
    background: var(--unverified-wash);
    box-shadow: inset 3.5px 0 0 var(--unverified-bright), var(--lift-1);
}

.unknown-items { display: flex; align-items: center; flex-wrap: wrap; gap: 11px 26px; }

.unknown-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--unverified);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.015em;
}
.unknown-title svg { flex: 0 0 auto; width: 19px; height: 19px; }

.unknown-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.unknown-item svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--unverified-bright); }

.unknown-note { margin: 13px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }


/* --------------------------------------------------------------------------
   Review rail
   -------------------------------------------------------------------------- */

.rail-panel-title { margin-bottom: 15px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.rail-sep { height: 1px; margin: 19px 0; border: 0; background: var(--line); }

.rail-status { display: flex; align-items: flex-start; gap: 10px; }
.rail-status > svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.rail-status--warn > svg { color: var(--unverified-bright); }
.rail-status--ok > svg { color: var(--verified-bright); }
.rail-status-key { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.rail-status-val { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }

/* How much of the check is left to do, as a count rather than a yes/no.
   "Not yet" said the same thing but gave no sense of what it would take, and
   the dead button underneath it looked broken rather than waiting.

   It stays amber at three ticks out of three. Ticking the boxes is not the
   same act as recording the check, and green here means a person confirmed
   it, so the colour is only earned once the form has been submitted. */
/* Laid out by .rail-status, so this only swaps the icon for the ring and puts
   the counter on the answer line. .pill keeps its margin-left:auto here, which
   sets the count against the right edge of the rail. */
.checkmeter .checkmeter-ring { margin-top: 2px; }
.checkmeter .rail-status-val { display: flex; align-items: center; gap: 10px; }

.checkmeter-ring {
    --pct: 0;
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: conic-gradient(var(--unverified-bright) calc(var(--pct) * 1%), var(--line-2) 0);
}
.checkmeter-ring::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--paper);
}

/* Three statements, each of which someone has to actually go and look at.
   The button stays dead until all three are ticked, because a one-click
   "mark as verified" is the shortcut this product exists to refuse. */
.checklist { display: grid; gap: 1px; margin-top: 13px; }
.checklist label { display: flex; align-items: center; gap: 11px; padding: 7px 0; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.checklist input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.checklist label:has(input:checked) { color: var(--ink); font-weight: 550; }

.btn:disabled, .btn[disabled] {
    background: var(--paper-3);
    border-color: var(--paper-3);
    color: var(--ink-4);
    box-shadow: none;
    cursor: not-allowed;
}
.btn:disabled:hover, .btn[disabled]:hover {
    background: var(--paper-3);
    border-color: var(--paper-3);
    color: var(--ink-4);
    box-shadow: none;
}

.reason-list { display: grid; gap: 11px; }
.reason-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.reason-item > svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--brand); }

/* A lead somebody has confirmed by hand. Green, because they read a
   government page to do it, but drawn as a ring rather than a filled wash so
   it never becomes indistinguishable from a notice we hold the record for. */
.checked-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--paper);
    box-shadow: inset 0 0 0 1.5px var(--verified-line);
    color: var(--verified);
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
}
.checked-badge::before { content: '\2713'; font-size: 11px; }


/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .rail-card { position: static; }
    .detail-layout { grid-template-columns: minmax(0, 1fr); }
    .results-layout { grid-template-columns: minmax(0, 1fr); }
    .refine { position: static; }
    .foundbar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .page-head h1 { font-size: 32px; }
    .tiles, .tiles--compact, .field-grid, .factcards { grid-template-columns: minmax(0, 1fr); }
    .foundbar-grid { grid-template-columns: minmax(0, 1fr); }
    .detail-hero h1 { font-size: 26px; }
    .field, .recap-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
    .results-head, .head-row { flex-direction: column; gap: 16px; }
    .results-actions, .head-row > .btn { margin-left: 0; }
    .history-row { flex-wrap: wrap; gap: 16px; }
    .history-main { flex-basis: 100%; }
    .history-count { text-align: left; }
    .history-actions { margin-left: auto; }
    .steps { overflow-x: auto; padding-bottom: 4px; }
    .step-line { flex-basis: 40px; }
}

@media (max-width: 620px) {
    .wrap { padding: 24px 16px 60px; }
    .topbar { gap: 18px; padding: 0 16px; }
    .topbar nav { gap: 16px; }
    .page-head h1 { font-size: 28px; }
    .page-lead { font-size: 16px; }
    .card { padding: 20px; }
    .result-facts { gap: 9px 18px; }
    .actionbar { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
    .actionbar .btn { width: 100%; }
    .actionbar-note { text-align: center; }
}