/* ============================================================================
 * /government - the procurement verification sheet.
 *
 * Built on the shared --tp-* tokens in b2b-tokens.css, so this page, /business,
 * /team-trial and /why-us share one type scale, one palette and one page rhythm.
 * Both files arrive as <link>s from templates/policies/government.pt, the tokens
 * first. Nothing here may be @import'ed: /static/ is served with a 369-day
 * max-age and build_cache_id() cannot stamp a URL written inside a stylesheet.
 *
 * ORDER IS LOAD-BEARING, NOT ONLY SPECIFICITY
 * Carried over from business.css, and the same trap applies here. Most of the
 * undo block does not out-specify the light theme, it TIES it: `.gv p` and
 * `.landing-cms p` are both (0,1,1), and `.gv strong:not(a):not(a *)` and the
 * theme's `.landing-cms strong:not(a):not(a *)` are both (0,1,3), because :not()
 * takes the specificity of its argument and `a` is an element. Those rules win
 * only because government.pt emits this file after the theme's. If that order is
 * ever changed the page does not break loudly, it drifts: prose picks the theme's
 * 900px measure back up and slides out of the grid cells.
 * Keep the <link> order in templates/policies/government.pt as theme, tokens,
 * then this.
 *
 * WHY THE PAGE LOOKS QUIETER THAN /business
 * It is a reference document, not a landing page. No hero buttons, no
 * screenshot, no testimonial, no coloured emphasis doing the work of a sentence.
 * The reader is verifying facts and wants to scan for a row, so the dominant
 * component is a two-column table and the dominant colour is ink on white. If
 * this file ever grows a gradient or a call-to-action button, the page has
 * turned into the sales page issue #2135 decided it should not be.
 *
 * Everything is scoped to .gv, which sits on each top-level <section>.
 * ========================================================================= */

/* --------------------------------------- UNDO INHERITED CMS/BULMA DEFAULTS */

/* landing-cms-page-base-bulma.css caps every p/h/ul at 900px and auto-centres
   it, which silently misaligns anything built as a grid inside .landing-cms. */
.gv h1,
.gv h2,
.gv h3,
.gv p,
.gv ul,
.gv ol,
.gv dl {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.gv {
    color: var(--tp-ink);
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-body);
    line-height: var(--tp-lh-body);
}

.gv p {
    font-size: var(--tp-fs-body);
    line-height: var(--tp-lh-body);
    margin: 0 0 1rem;
    max-width: var(--tp-measure-wide);
}

.gv h1,
.gv h2,
.gv h3 {
    font-family: var(--tp-font-serif);
    font-weight: 700;
    color: var(--tp-ink);
    letter-spacing: -0.01em;
    margin-bottom: 0;
    /* site-bulma.css carries a bare `h1 { text-align: center }` at (0,0,1), which centred the
       hero headline above its own left-aligned subtitle. `inherit` rather than `left` so
       .gv-head--center still cascades into the one head that is deliberately centred; an
       explicit value here would out-specify the container and quietly break it. */
    text-align: inherit;
}

/* Ties .landing-cms strong:not(a):not(a *) { color: black } at (0,1,3) and wins
   on load order, per the header note. Pure black on white is heavier than the
   ink around it, so <strong> would jump off the line rather than emphasise
   within it. */
.gv strong:not(a):not(a *) {
    color: var(--tp-ink);
    font-weight: 600;
}

.gv a strong {
    color: inherit;
    font-weight: 600;
}

/* The theme paints code #f5f5f5 on #333 with !important, which is the only warm
   grey on an otherwise cool page, and its 0.4em side padding opens a visible gap
   after the UEI. Matched at (0,2,0) vs the theme's (0,1,1), and this file loads
   later besides. The UEI is the single most copy-pasted string on the page, so
   it gets a monospace face and a tint rather than being left as body text. */
.gv code {
    background: var(--tp-surface-2) !important;
    color: var(--tp-ink) !important;
    border: 0;
    padding: 0.1em 0.3em;
    font-size: 0.95em;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Prose links carry an underline, not just colour: --tp-blue against --tp-ink-2
   body copy is under 3:1, and WCAG G183 wants 3:1 where colour is the only cue. */
.gv p a,
.gv dd a,
.gv td a,
.gv caption a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: hsl(207, 56%, 72%);
}

.gv p a:hover,
.gv dd a:hover,
.gv td a:hover,
.gv caption a:hover {
    text-decoration-color: currentColor;
}

/* --tp-blue is 4.67:1 on --tp-surface but only clears AA with no headroom, so
   every link sitting on a tinted band gets the darker blue (6.34:1 there). At
   (0,4,1) this beats the theme's link rule without depending on load order. */
.landing-cms .gv.gv-section--tint a,
.landing-cms .gv.gv-final a,
.landing-cms .gv .gv-split-aside a,
.landing-cms .gv .gv-note a {
    color: var(--tp-blue-dark);
}

/* Without this every prose link falls through to the browser default ring, which
   Bulma suppresses on several of the elements this page uses. */
.gv a:focus-visible {
    outline: var(--tp-focus-ring);
    outline-offset: var(--tp-focus-offset);
    border-radius: var(--tp-r-sm);
}

.gv .gv-nowrap {
    white-space: nowrap;
}

/* ------------------------------------------------------------------ LAYOUT */

.gv.gv-section {
    padding: var(--tp-section-y) 0;
}

.gv.gv-section--tint {
    background: var(--tp-surface);
}

/* The closing block sits on the second tint so the page terminates rather than
   butting into the black footer off plain white. */
.gv.gv-final {
    background: var(--tp-surface-2);
}

.gv .gv-wrap {
    max-width: var(--tp-wrap);
    margin: 0 auto;
    padding: 0 var(--tp-gutter);
}

.gv .gv-wrap--narrow {
    max-width: var(--tp-wrap-narrow);
}

.gv .gv-head {
    max-width: 640px;
    margin: 0 0 var(--tp-head-gap);
}

.gv .gv-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.gv .gv-head--center .gv-lede {
    margin-left: auto;
    margin-right: auto;
}

.gv .gv-h2 {
    font-size: var(--tp-fs-h2);
    line-height: var(--tp-lh-tight);
    margin: 0 0 0.75rem;
}

/* One oversized heading per page. On a reference sheet it belongs on vendor
   identification, which is the block most readers arrived to check. */
.gv .gv-h2--lead {
    font-size: var(--tp-fs-h2-lead);
}

/* A second-level heading inside a section that already has one. Sans, so it
   reads as a label for the block below rather than a rival to the head above. */
.gv .gv-h3-band {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-body-lg);
    font-weight: 600;
    letter-spacing: 0;
    margin: 3rem 0 1.25rem;
}

.gv .gv-lede {
    font-size: var(--tp-fs-body-lg);
    line-height: 1.6;
    color: var(--tp-ink-2);
    max-width: var(--tp-measure);
    margin: 0;
}

/* Provenance and caveat lines. Smaller and lighter, but --tp-ink-3 is 5.7:1 on
   white, so it is still body-legible rather than decorative. */
.gv .gv-fine {
    font-size: var(--tp-fs-fine);
    line-height: 1.55;
    color: var(--tp-ink-3);
}

/* -------------------------------------------------------------------- HERO */
/* Left aligned and short. A centred hero with a fact strip is the /business
   treatment and belongs on a page that is selling; this one just has to say what
   the document is and who publishes it. */

.gv.gv-hero {
    padding: 3.5rem 0 2.5rem;
}

.gv .gv-eyebrow {
    display: inline-block;
    font-size: var(--tp-fs-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tp-ink-3);
    margin-bottom: 0.75rem;
}

.gv.gv-hero h1 {
    font-size: var(--tp-fs-h1);
    line-height: var(--tp-lh-tight);
    margin: 0 0 1.25rem;
}

.gv .gv-hero-sub {
    font-size: var(--tp-fs-body-lg);
    line-height: 1.6;
    color: var(--tp-ink-2);
    max-width: var(--tp-measure-wide);
    margin: 0 0 1.5rem;
}

/* Entity and contact, above the fold and above the first table, because a
   contracting officer opening this page from a search result needs to confirm
   they have the right vendor before reading anything else. */
.gv .gv-hero-meta {
    font-size: var(--tp-fs-small);
    line-height: 1.6;
    color: var(--tp-ink-2);
    padding-top: 1.25rem;
    border-top: 1px solid var(--tp-line);
    max-width: var(--tp-measure-wide);
    margin: 0;
}

/* ------------------------------------------------------- REFERENCE TABLES */
/* The page's primary component. Two columns, row headers on the left, because
   every one of these is a lookup: the reader is scanning the left column for a
   label and reading exactly one row. */

/* The light theme sets width: 65%, auto margins and border-collapse on every
   table with !important at (0,1,1), so these have to be !important too, at a
   higher specificity. Same trap /business and /why-us hit. */
.gv .gv-table {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: transparent !important;
    font-size: var(--tp-fs-body);
    line-height: 1.5;
}

/* The theme stripes even rows and tints on hover at (0,2,3). Beaten on
   specificity rather than !important so individual cells can still paint. */
.landing-cms .gv .gv-table tr th,
.landing-cms .gv .gv-table tr td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tp-line);
    padding: 0.85rem 0.75rem 0.85rem 0;
    color: var(--tp-ink);
    vertical-align: top;
    text-align: left;
}

/* The label column. Sans and uppercase, matching the dt treatment in the fact
   grids below so the two components read as one family. Sized in ch rather than
   a percentage: these labels are a known, short set, and a percentage column
   collapses "W-9" and "Simplified acquisition threshold" to the same width. */
.landing-cms .gv .gv-table tbody th {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--tp-ink-3);
    width: 26ch;
    padding-right: 2rem;
    padding-top: 1.05rem;
}

.landing-cms .gv .gv-table tbody td {
    color: var(--tp-ink-2);
}

.landing-cms .gv .gv-table tbody tr:last-child th,
.landing-cms .gv .gv-table tbody tr:last-child td {
    border-bottom: 0;
}

.gv .gv-table caption {
    caption-side: bottom;
    margin-top: 0.875rem;
    font-size: var(--tp-fs-fine);
    line-height: 1.5;
    color: var(--tp-ink-3);
    text-align: left;
}

/* The thresholds table, which sits in a narrow aside rather than across the
   page. Figures are the point, so they go right-aligned and tabular. */
.gv .gv-table--compact {
    font-size: 16px;
}

.landing-cms .gv .gv-table--compact tbody th {
    width: auto;
    padding-right: 1rem;
    text-transform: none;
    font-size: var(--tp-fs-small);
    letter-spacing: 0;
    color: var(--tp-ink-2);
    padding-top: 0.85rem;
}

.landing-cms .gv .gv-table--compact tbody td {
    text-align: right;
    white-space: nowrap;
    font-size: var(--tp-fs-body-lg);
    font-weight: 600;
    color: var(--tp-ink);
    font-variant-numeric: tabular-nums;
    padding-right: 0;
}

/* ------------------------------------------------------------ SPLIT BLOCKS */
/* Prose on the left, the artifact it refers to on the right. Used three times:
   the VPAT, the threshold figures and the terms document. */

.gv .gv-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    column-gap: 3rem;
    align-items: start;
}

.gv .gv-split-copy p:last-child {
    margin-bottom: 0;
}

/* A panel rather than a card with a shadow: this is a citation, not an action.
   --tp-surface-0 on --tp-surface gives it a quiet edge on the tinted sections
   and the border carries it on the untinted ones. */
.gv .gv-split-aside {
    background: var(--tp-surface-0);
    border: 1px solid var(--tp-line-strong);
    border-radius: var(--tp-r);
    padding: 1.5rem;
}

.gv .gv-doc-label {
    font-size: var(--tp-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tp-ink-3);
    margin: 0 0 0.5rem;
}

.gv .gv-doc-link {
    font-size: var(--tp-fs-body-lg);
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.75rem;
}

.gv .gv-doc-note {
    font-size: var(--tp-fs-fine);
    line-height: 1.55;
    color: var(--tp-ink-3);
    margin: 0;
}

/* The aside holds a table on the thresholds block instead of a document link. */
.gv .gv-split-aside .gv-table {
    margin: 0 !important;
}

/* --------------------------------------------------------- ORDERING ROUTES */

.gv .gv-ways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

/* White fill and one shadow, no border: --tp-line on --tp-surface measures
   1.09:1, so a border there is invisible while still counting as chrome. */
.gv .gv-way {
    padding: 1.75rem;
    background: var(--tp-surface-0);
    border: 0;
    border-radius: var(--tp-r);
    box-shadow: var(--tp-sh-sm);
}

.gv .gv-way h3 {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-body-lg);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0 0 0.625rem;
}

.gv .gv-way p {
    font-size: 16px;
    color: var(--tp-ink-2);
    margin: 0;
    max-width: none;
}

/* ------------------------------------------------------------------- NOTE */
/* Amber, per the token file's rule: it marks the one field people get wrong,
   and it is not red, which means error. The merchant-of-record split is exactly
   that field. A terms review that misses it reviews the wrong seller's
   agreement, which is the most expensive mistake available on this page.
   The left rule and the heading above it both carry the meaning, so colour is
   never the only cue (WCAG 1.4.1). */
.gv .gv-note {
    background: var(--tp-amber-bg);
    border-left: 4px solid var(--tp-amber-line);
    border-radius: 0 var(--tp-r-sm) var(--tp-r-sm) 0;
    padding: 1.25rem 1.5rem;
    /* The box is capped rather than the paragraph inside it. Left at the full 1032px wrap this
       ran about 120 characters a line, well past the 45-75 band the token file sets, and
       narrowing the text alone would have left a third of the amber panel empty. */
    max-width: 42rem;
}

.gv .gv-note p {
    color: var(--tp-amber-ink); /* 7.3:1 on --tp-amber-bg */
    margin: 0;
    max-width: none;
}

.gv .gv-note strong:not(a):not(a *) {
    color: var(--tp-amber-ink);
}

/* ---------------------------------------------------------- FACT GRIDS (DL) */

.gv .gv-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    row-gap: 1.75rem;
    margin: 0;
}

.gv .gv-fact-row dt {
    font-size: var(--tp-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tp-ink-3);
    margin-bottom: 0.25rem;
}

.gv .gv-fact-row dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--tp-ink-2);
    max-width: var(--tp-measure);
}

/* -------------------------------------------------------------- BREAKPOINTS */

@media screen and (max-width: 900px) {
    .gv .gv-split {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }

    .gv .gv-ways {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 720px) {
    .gv .gv-facts-grid {
        grid-template-columns: 1fr;
    }

    /* Row headers stack above their values below this width. A 26ch label column
       beside a wrapping value column leaves both unreadable on a phone, and this
       page is at its most useful on one: it is what gets opened from a search
       result in the middle of a market research call. */
    .landing-cms .gv .gv-table tbody th,
    .landing-cms .gv .gv-table tbody td {
        display: block;
        width: auto;
        padding-right: 0;
    }

    .landing-cms .gv .gv-table tbody th {
        border-bottom: 0;
        padding-bottom: 0.25rem;
    }

    .landing-cms .gv .gv-table tbody td {
        padding-top: 0;
        padding-bottom: 1rem;
    }

    /* The compact table keeps its two columns: a label and a dollar figure fit
       side by side at any width, and stacking them loses the alignment that
       makes two thresholds comparable at a glance. */
    .landing-cms .gv .gv-table--compact tbody th,
    .landing-cms .gv .gv-table--compact tbody td {
        display: table-cell;
    }

    .landing-cms .gv .gv-table--compact tbody th {
        border-bottom: 1px solid var(--tp-line);
        padding-bottom: 0.85rem;
    }

    .landing-cms .gv .gv-table--compact tbody td {
        padding-top: 0.85rem;
    }
}