/* IBM Plex, self-hosted.
   Previously an @import of fonts.googleapis.com, which could not begin until this
   file had been fetched and parsed, and then had to reach a second origin
   (fonts.gstatic.com) for the files themselves. Serving them from our own origin
   removes two DNS+TCP+TLS handshakes from the critical render path.
   Weights 400-700 only: the 800/900 declarations elsewhere in the CSS have no real
   cut in IBM Plex and are synthesised by the browser, exactly as they were before. */
/* IBM Plex Sans 400 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 500 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 600 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 600 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 700 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 700 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Serif 400 — latin */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Serif 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Serif 500 — latin */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Serif 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Serif 600 — latin */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Serif 600 — latin-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Serif 700 — latin */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Serif 700 — latin-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --bg-soft: #f2f6fb;
  --surface: #ffffff;
  --panel: #f7f9fc;
  --highlight-sand: #dce8f7;
  --text: #1a1f2b;
  --muted: #5f6b7a;
  --muted-soft: rgba(95, 107, 122, 0.62);
  --brand: #0f62fe; /* Menacon logo blue */
  --brand-hover: #0043ce;
  /* Wordmark navy and the light blue used only on navy. Both are the brand kit's
     exact values (brand/README.md) and sit a shade off --brand-accent, which is the
     site's ink rather than the logo's. Keep them separate: the logo should not drift
     when the page accent is retuned. */
  --menacon-navy: #14263d;
  --menacon-blue-light: #4589ff;
  --brand-accent: #182237; /* Primary site accent */
  --brand-soft: rgba(15, 98, 254, 0.1);
  --procureplus-lavender: #6e3ce8; /* ProcurePlus lavender */
  --procureplus-lavender-soft: rgba(110, 60, 232, 0.08);
  --border: #e2e8f0;
  --rule-faint: #eef1f5; /* row dividers, one step lighter than --border */
  --rule-mid: #c8d3e0; /* meta separators and dashed notices, one step darker */
  /* The long-form reading ramp, from the insights article handoff. --text is the
     strongest ink and stays on lead paragraphs; body copy sits one step back so a
     19px/1.8 column does not read as a wall of black, and the two muted steps carry
     captions and caveats. */
  --body-text: #33404f;
  --muted-light: #7a879a;
  --faint: #96a3b4;
  --accent: #182237; /* Primary ink for actions and active controls */
  --accent-hover: #24304a;
  --accent-soft: rgba(24, 34, 55, 0.08);
  --accent-border: rgba(24, 34, 55, 0.14);
  --accent-border-strong: rgba(24, 34, 55, 0.28);
  --focus-ring: rgba(15, 98, 254, 0.28);

  /* Spending Index chart. The provisional pair reads as "not yet real" against the
     navy of confirmed value, without introducing a third data colour. */
  --provisional-fill: #c9d6e8;
  --provisional-edge: #a9b6c8;
  /* The award-count series, in two steps of one hue: it is one measure at two
     states of completeness, so the steps are sequential (landed = darker) rather
     than two identities in different colours. Validated against the #f7f9fc panel:
     normal-vision ΔE 20.9, deutan 17.9, both lines clear of 3:1 contrast. */
  --index-line-landed: #0043ce;
  --index-line-projected: #5b8cf0;
  /* Eyebrow blue that holds contrast on the navy bands. */
  --on-dark-accent: #9fc0ff;
  /* The decomposition panel. Two different jobs, so two different colour logics.

     The procurement routes are parts of one stacked whole, so they are three steps of
     the chart's hue rather than three identities: nothing about "direct purchase" is
     categorically opposed to "open competition", and a red/blue pair would imply it
     was. The steps are far apart because the shares are: a 1% sliver has to survive
     next to a 96% block.

     The sectors are ordered by size and read against each other, not summed, so they
     take ONE fill. Colouring them categorically would invite the reader to look for
     meaning in a hue that only encodes rank. The pooled remainder is the exception —
     it is not a sector, so it is greyed out of the comparison. */
  --index-route-direct: #8fb0d6;
  --index-route-competition: #1f3f66;
  --index-route-other: #c3d2e4;
  --index-sector: #2f5583;
  --index-sector-other: #b8c8db;

  /* Two-series categorical pair for the insight charts. One hue, two steps: the
     series are two measures of the same thing, so they read as related rather than
     as competing identities. Both sit on white and on --panel. */
  --chart-series-1: #1f3f66;
  --chart-series-2: #9fb9d4;
  --success: #0f5132;
  --success-border: rgba(25, 134, 69, 0.32);
  --success-soft: rgba(25, 134, 69, 0.1);
  --warning: #184897;
  --warning-border: rgba(24, 72, 151, 0.28);
  --warning-soft: rgba(24, 72, 151, 0.1);
  --danger: #8f1d2c;
  --danger-border: rgba(176, 42, 55, 0.34);
  --danger-soft: rgba(176, 42, 55, 0.1);
  --info: #0f4fbf;
  --info-border: rgba(15, 98, 254, 0.32);
  --info-soft: rgba(15, 98, 254, 0.09);
  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 18px 46px rgba(15, 23, 42, 0.08);
  --transition: 0.2s ease;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --content-max: 1800px;
  /* The sticky top bar's height. Anything else that sticks has to clear it, and
     measuring it in JS on every scroll is a layout thrash we do not need. */
  --topbar-h: 54px;
  --copy-max: 860px;
  --gutter: clamp(16px, 2.5vw, 32px);
  /* Inset that lines the contents of a full-bleed section up with the centred
     content column below it — the left edge of `.container`, expressed as a
     padding so a section that spans the viewport can reach it.

     `.container` is `min(--content-max, 100% - 2 * gutter)` centred, so its edge
     is `(100% - that) / 2`: the gutter while the viewport is the binding
     constraint, and half the leftover once the column stops growing. The `+
     gutter` that used to sit on the end added the gutter a second time above
     --content-max, which put a full-bleed hero 32px inside every other section
     on the page at viewports over ~1860px.

     Resolves against the element it is used on, so only use it inside a section
     that actually spans the viewport. */
  --bleed-inset: max(var(--gutter), calc((100% - var(--content-max)) / 2));

  /* Typography scale (7 sizes total) */
  --type-caption: 0.75rem;    /* 12px */
  --type-small: 0.875rem;     /* 14px */
  --type-body: 1rem;          /* 16px */
  --type-subtitle: 1.125rem;  /* 18px */
  --type-title: 1.25rem;      /* 20px */
  --type-heading: 1.5rem;     /* 24px */
  --type-display: clamp(2rem, 4.2vw, 2.75rem);
  --type-display-lg: 2.875rem; /* 46px — homepage hero */
  --type-figure: 2.625rem;     /* 42px — the index headline number */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
}

* { box-sizing: border-box; }

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  background: linear-gradient(180deg, var(--bg-soft) 0px, var(--surface) 340px), var(--bg);
  color: var(--text);
  line-height: var(--leading-normal);
  /* Sticky footer: without this, a page shorter than the viewport leaves the footer
     floating in the middle with dead space under it. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: min(var(--content-max), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

.site-main {
  width: 100%;
  flex: 1;
}

.site-main > * {
  width: min(var(--content-max), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.site-main > .full-bleed {
  width: 100%;
  max-width: none;
}

.full-bleed img {
  display: block;
  width: 100%;
  height: auto;
}

.topbar {
  position: sticky; top: 0; backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 0;
}
/* Menacon wordmark. Set font-size to size it; the "o" and its arch are in em, so
   everything scales together. Markup lives in templates/_logo.html. */
.menacon-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-weight: 700;
  /* Off the type scale on purpose: the kit sets a 96px floor on the wordmark, and
     --type-title (20px) renders it at ~88px. 22px clears the floor at ~97px. Below
     96px the logo is the M alone, not the name shrunk further. */
  font-size: 1.375rem; /* 22px */
  letter-spacing: -0.02em;
  line-height: 1;
  /* The wordmark is Latin and never mirrors. Without this the flex items reverse
     under html[dir="rtl"] (see .topbar-inner below) and it reads "nocaneM". */
  direction: ltr;
  color: var(--menacon-navy);
  text-decoration: none;
}
.menacon-logo__o {
  position: relative;
  flex: none;
  width: 0.565em;
  height: 0.565em;
  margin: 0 0.04em;
  border-radius: 50%;
  background: var(--brand);
  overflow: hidden;
}
/* The arch is a cut-out, so it is painted in the colour behind the logo — not white
   by default. Tinted surfaces override this one declaration and nothing else. */
.menacon-logo__o::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.283em;
  height: 0.395em;
  border-radius: 0.142em 0.142em 0 0;
  background: var(--bg);
}
/* On navy surfaces. */
.menacon-logo--reversed { color: #ffffff; }
.menacon-logo--reversed .menacon-logo__o { background: var(--menacon-blue-light); }
.menacon-logo--reversed .menacon-logo__o::after { background: var(--menacon-navy); }
/* One colour — print, stamps, embroidery. */
.menacon-logo--mono .menacon-logo__o { background: currentColor; }

/* The M alone: favicons, avatars, app icon. Never in a rounded tile. */
.menacon-m {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 8px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.lang-switch .lang-option {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--type-caption);
  font-weight: 700;
  color: var(--muted);
}
.lang-switch .lang-option.active {
  background: var(--brand-soft);
  color: var(--brand);
}
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav-inline-logout {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.nav-inline-logout:hover {
  color: var(--text);
}
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-toggle-bar + .nav-toggle-bar {
  margin-top: 5px;
}

.page-header { padding: 32px 0 10px; }

/* Typography */
h1 {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--type-heading);
  line-height: var(--leading-snug);
  font-weight: 800;
  letter-spacing: -0.3px;
}

h2,
h3,
h4 {
  color: var(--accent);
  font-family: var(--font-serif);
  font-weight: 600;
}

h2 {
  font-size: var(--type-heading);
  line-height: var(--leading-snug);
}

h3 {
  font-size: var(--type-title);
  line-height: var(--leading-snug);
}

h4 {
  font-size: var(--type-subtitle);
  line-height: var(--leading-normal);
}

h2.card-title {
  color: var(--accent);
}

.page-header h1 {
  margin: 0 0 12px;
  font-size: var(--type-display);
  line-height: var(--leading-tight);
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.3px;
}

.page-header h2 {
  color: var(--accent);
}

.page-header > h1,
.page-header > h2,
.page-header > p:not(.eyebrow) {
  max-width: 100%;
}

p {
  margin: 0 0 0.85rem;
  font-size: var(--type-body);
  line-height: var(--leading-relaxed);
}

.eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--type-caption); color: var(--muted); font-weight: 600; }

/* Slug, then badge, both left. The row is pinned to the eyebrow's own line box, so a
   status pill or a product wordmark cannot move the eyebrow or the heading whatever
   its height — it centres on that line and overflows it silently. Height rather than
   negative margins because this has to be exact, not close: these pages sit beside
   ones with no badge at all. */
.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(var(--type-caption) * var(--leading-normal));
}
.eyebrow-row > .eyebrow { margin: 0; }
.eyebrow-row > :not(.eyebrow) { flex: 0 0 auto; }

/* Narrow screens have no room for both on one line, and a fixed height would clip
   the wrap. Rhythm matters less than legibility here. */
@media (max-width: 700px) {
  .eyebrow-row {
    flex-wrap: wrap;
    height: auto;
  }
}
.muted { color: var(--muted); }

/* Kept in the accessibility tree, out of the visual one. Clip-based rather than
   display:none, which would remove it from screen readers too. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A table ignores the 1px above: the table layout algorithm treats `width` as a
   minimum and grows the box to its min-content width anyway. The data table behind
   the Spending Index chart therefore escaped the clip and pushed the whole page into
   horizontal scroll below about 1024px. `table-layout: fixed` makes the width
   authoritative — and unlike `display: block`, it keeps the rows a table to a screen
   reader, which is the only reason the element exists. */
table.visually-hidden {
  table-layout: fixed;
  max-width: 1px;
}

/* The caption sizes to its own text and drags the table box out with it, so it needs
   clipping in its own right. */
table.visually-hidden caption {
  overflow: hidden;
  width: 1px;
  white-space: nowrap;
}
.small { font-size: var(--type-small); }

.actions { display: flex; gap: 10px; margin: 16px 0; }
.btn,
.btn.secondary {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--surface);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: var(--leading-tight);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.btn.secondary {
  border-color: var(--accent-border);
  background: var(--surface);
  color: var(--accent);
  box-shadow: none;
}
.btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  filter: none;
}
.btn.secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border-strong);
  color: var(--accent);
}
.btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.btn:active {
  transform: translateY(1px);
}
.btn[aria-disabled="true"],
.btn:disabled {
  cursor: default;
  opacity: 0.58;
  transform: none;
}
/* The 2026 homepage and index run square: no radius, no shadow, flat ink. */
.btn-square {
  border-radius: 0;
  box-shadow: none;
  padding: 13px 22px;
  font-size: 0.9375rem;
}

.btn.small {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: var(--type-small);
}

.controls {
  display: flex;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  text-decoration: none;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: var(--leading-tight);
  transition: var(--transition);
}
.chip:hover {
  border-color: var(--accent-border-strong);
  color: var(--text);
}
.chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.alert,
.notice,
.success {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
}
.alert {
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  color: var(--danger);
}
.notice {
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
  color: var(--warning);
}
.success {
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  color: var(--success);
}

.summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin: 10px 0 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.grid {
  display: grid; gap: 14px; grid-template-columns: 1fr; padding: 10px 0 30px;
}
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }

main section + section {
  margin-top: 0;
  padding-top: 0;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border); border-radius: 14px; padding: 16px;
}
.card-input,
.card--input {
  background: var(--panel);
}

.card-display,
.card--display {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.card-title { margin: 0 0 6px; font-size: var(--type-subtitle); color: var(--brand); }
.link { color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }

.results {
  display: grid;
  gap: 12px;
  padding-bottom: 20px;
}

.results > * {
  margin: 0;
}

.results > p {
  max-width: var(--copy-max);
}

.divider, hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

.footer { padding: 18px 0; border-top: 1px solid var(--border); color: var(--muted); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer-link {
  color: var(--accent);
  font-size: var(--type-small);
  font-weight: 600;
  text-decoration: none;
}
.footer-link:hover { text-decoration: underline; }

html[dir="rtl"] .topbar-inner {
  direction: rtl;
}

html[dir="rtl"] .nav-links {
  direction: rtl;
}

html[dir="rtl"] .live-tender-strip {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .actions {
  justify-content: flex-start;
}

@media (max-width: 800px) {
  h1 {
    font-size: var(--type-heading);
  }

  .page-header h1 {
    font-size: clamp(1.7rem, 7.6vw, 2.1rem);
    line-height: 1.2;
  }

  .topbar-inner {
    position: relative;
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: inline-block;
  }

  .nav {
    display: none;
    position: static;
    width: 100%;
    margin-top: 10px;
    padding: 0;
  }

  .nav.open {
    display: block;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .lang-switch {
    margin: 10px 12px 0 12px;
    justify-content: center;
  }

  .nav a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
  }

  .nav a:hover {
    background: var(--panel);
  }
}

@media (min-width: 960px) {
  .page-header > h1,
  .page-header > h2,
  .page-header > p:not(.eyebrow) {
    max-width: 66%;
  }
}