/* Contract Desk by Critical BS Inc. — restrained, high-contrast, readable.
   Brand: navy and gold from criticalbs.com. Gold (#c59c53) is 2.4:1 on white, so it is only ever a fill
   with navy text on it, or an accent beside text — never text on white and never the only cue.
   Targets WCAG 2.2 AA: 4.5:1 text contrast, 3:1 UI contrast, visible focus,
   24px+ targets (we use 44px for buttons), no color-only meaning, reflow to 320px. */

/* Manrope, the criticalbs.com typeface, served from this app: the CSP allows fonts from 'self' only.
   Variable weight 200-800, Latin subset, @fontsource-variable/manrope 5.3.0 (SIL OFL 1.1, see OFL.txt).
   swap: text shows at once in the fallback and changes face when the font arrives. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope/manrope-latin-wght.938c6e8019b6.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;
}

:root {
  --text: #1b1d21;
  --text-muted: #50565e;
  --bg: #ffffff;
  --bg-soft: #f4f5f7;
  --bg-softer: #fafafb;
  --border: #6b7280;
  --border-soft: #d0d4da;
  --navy: #152949;      /* criticalbs.com body */
  --navy-deep: #081428;  /* criticalbs.com button text, gradient end */
  --navy-soft: #1e3557;  /* criticalbs.com gradient start */
  --gold: #c59c53;       /* criticalbs.com call to action */
  --gold-dark: #a9823c;
  --gold-tint: #f7efe0;
  --primary: #1b3a6b;    /* 11:1 on white */
  --primary-dark: #152949;
  --focus-dark: #1b1d21;
  --focus-halo: #e3c27f;
  --ok-text: #14632f;   --ok-bg: #e7f4ea;
  --warn-text: #7a4100; --warn-bg: #fff3dc;
  --bad-text: #a1181b;  --bad-bg: #fdeceb;
  --info-text: #1b3a6b; --info-bg: #e9eef6;
  --neutral-text: #3b4149; --neutral-bg: #eef0f2;
  --radius: 8px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --measure: 70ch;
  --font: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

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

html { font-size: 106.25%; } /* 17px base */
body {
  margin: 0;
  font-family: var(--font);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 1.6em 0 .5em; }
h1 { font-size: 1.9rem; margin-top: .4em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
p, li, dd { max-width: var(--measure); }
a { color: var(--primary); text-underline-offset: .15em; }
a:hover { color: var(--primary-dark); text-decoration-thickness: 2px; }
code, .mono { font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--border-soft); margin: 2rem 0; }

html { scroll-padding-top: calc(var(--header-height, 0px) + 1rem); }

:focus-visible {
  outline: 3px solid var(--focus-dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 100;
  background: var(--focus-halo); color: var(--text); padding: .6rem 1rem; font-weight: 700;
}
.skip-link:focus { top: .5rem; }

/* ---------- Page frame ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(168deg, var(--navy-soft) 0%, var(--navy) 46%, var(--navy-deep) 100%);
  color: #fff; border-bottom: 3px solid var(--gold);
}
.site-header :focus-visible { outline-color: #fff; }
/* Two rows at every width: the brand and the two menus, then the main menu as one line. It never wraps into a
   third row, so the sticky header stays short; if the line is too long for the screen it scrolls sideways in its
   own box. Nothing in the first row can push past the screen edge: the name shortens with an ellipsis first. */
.site-header__inner {
  max-width: 76rem; margin: 0 auto; padding: .45rem 1.25rem .3rem;
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; grid-template-areas: "brand . menus" "nav nav nav";
  align-items: center; gap: .15rem 1.5rem;
}
.brand { grid-area: brand; }
.header-menus { grid-area: menus; }
/* A box that scrolls sideways also clips up and down, so it keeps room on every side for the whole focus ring
   (3px outline 2px out, then the 6px halo). The padding gives that room; the negative margins take it back, so
   the header is no taller. The list is as wide as its items (so the end padding scrolls into view after the last
   one), and each item's scroll margin keeps that room when Tab scrolls it into view (app.js does that scroll for
   an item the browser would leave partly showing). */
.main-nav {
  grid-area: nav; min-width: 0; overflow-x: auto; scrollbar-width: thin;
  margin: -6px -.5rem -3.6px; padding: 6px .5rem;  /* the row keeps its old height: 44px + 2.4px */
}
.main-nav a { white-space: nowrap; scroll-margin-inline: .5rem; }

/* The name and the credit are separate links, each at least 24px tall so each is easy to hit (WCAG 2.5.8). */
.brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; padding: 1.2px 0; }  /* 48px of links + 2.4px: the header stays the height it was */
.brand__name, .brand__by { display: block; line-height: 24px; }
.brand__mark { display: block; width: 26px; height: 44px; flex: none; }
.brand__text { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; }
.brand__name { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.brand__name:hover { color: #fff; }
.brand__by { color: var(--gold); text-decoration: none; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.brand__by:hover { color: var(--gold); text-decoration: underline; }
/* A client's own logo (Settings → Branding): as tall as the CBS mark, never wider than a short name. */
.brand__logo { display: block; height: 44px; width: auto; max-width: 10rem; object-fit: contain; flex: none; }
.brand-preview { display: block; height: 44px; width: auto; max-width: 12rem; object-fit: contain;
  background: var(--navy); padding: .25rem; border-radius: var(--radius); }
.input--short { max-width: 10rem; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: .25rem; width: max-content; }
.main-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .25rem .7rem;
  border-radius: var(--radius); color: #fff; text-decoration: none; font-weight: 600;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.main-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.main-nav a[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 -3px 0 var(--gold); }
/* Settings and the profile: native <details> menus at the right of the header. */
.header-menus { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.menu { position: relative; }
.menu__button {
  list-style: none; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .25rem .7rem;
  border-radius: var(--radius); color: #fff; font-weight: 600; cursor: pointer; user-select: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.menu__button::-webkit-details-marker { display: none; }
.menu__button::after {
  content: ""; width: .45em; height: .45em; margin-left: .1rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s var(--ease-out);
}
.menu[open] > .menu__button::after { transform: translateY(2px) rotate(-135deg); }
.menu__button:hover, .menu[open] > .menu__button { background: rgba(255, 255, 255, .1); }
.menu__button.is-current { background: rgba(255, 255, 255, .12); box-shadow: inset 0 -3px 0 var(--gold); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 45; min-width: 15rem; max-width: calc(100vw - 2rem);
  margin: 0; padding: .4rem; list-style: none; background: var(--bg); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: 0 18px 40px -14px rgba(8, 20, 40, .5);
  animation: menu-in .16s var(--ease-out) both;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.menu__panel ul { list-style: none; margin: 0; padding: 0; }
.menu__panel li { max-width: none; }
.menu__panel form { margin: 0; }
.menu__panel a, .menu__panel button {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: .4rem .75rem; border: 0;
  border-radius: 6px; background: none; color: var(--text); font: inherit; font-weight: 600; text-align: left;
  text-decoration: none; cursor: pointer;
}
.menu__panel a:hover, .menu__panel button:hover { background: var(--info-bg); color: var(--primary-dark); }
.menu__panel a[aria-current="page"] { background: var(--gold-tint); box-shadow: inset 3px 0 0 var(--gold); }
/* Inside the white panel the header's white focus ring would vanish: use the page's own. */
.site-header .menu__panel :focus-visible { outline-color: var(--focus-dark); }
.menu__who {
  margin: 0 0 .3rem; padding: .45rem .75rem .6rem; border-bottom: 1px solid var(--border-soft);
  color: var(--text-muted); font-size: .92rem; overflow-wrap: anywhere;
}
.menu__who strong { color: var(--text); }
.avatar {
  flex: none; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--gold); color: var(--navy-deep); font-size: .82rem; font-weight: 800; letter-spacing: .03em;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}
.menu__business { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 48rem) { .site-header__inner { padding: .4rem 1rem .25rem; gap: .1rem 1rem; } }
@media (max-width: 36rem) {
  .menu__business, .brand__by, .menu__button--account::after { display: none; }
  .site-header__inner { column-gap: .5rem; }
  .brand { gap: .45rem; }
  .brand__name { font-size: 1.05rem; }
  .menu__button { padding: .25rem .5rem; gap: .4rem; }
  .header-menus { gap: .15rem; }
}
/* A short screen (a phone on its side) keeps the whole height for the page. */
@media (max-height: 30rem) { .site-header { position: static; } }
.inline-form { display: inline; margin: 0; }

.page { max-width: 76rem; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
.page:focus { outline: none; box-shadow: none; }
.narrow { max-width: 34rem; }
.site-footer {
  border-top: 1px solid var(--border-soft); color: var(--text-muted);
  max-width: 76rem; margin: 0 auto; padding: 1rem 1.25rem 2rem; font-size: .95rem;
}
.lead { font-size: 1.12rem; color: var(--text-muted); margin-top: 0; }
.muted { color: var(--text-muted); }

.demo-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  background: #fff0b3; color: #3d2a00; padding: .6rem 1.25rem;
  border-top: 4px dashed #7a4100; border-bottom: 4px dashed #7a4100;
}
.demo-banner p { margin: 0; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .55rem 1.25rem; border-radius: 999px;
  border: 2px solid var(--primary); background: var(--primary); color: #fff;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .2s var(--ease-out), transform .08s ease;
}
.button:hover { box-shadow: 0 4px 12px rgba(8, 20, 40, .18); }
.button:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.button:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.button--secondary { background: var(--bg); color: var(--primary); }
.button--secondary:hover { background: var(--info-bg); color: var(--primary-dark); }
.button--accent { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.button--accent:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--navy-deep); }
.button--danger { background: var(--bad-text); border-color: var(--bad-text); }
.button--danger:hover { background: #7f1215; border-color: #7f1215; }
.button--small { min-height: 36px; padding: .3rem .8rem; font-size: .95rem; }
.button--link {
  background: none; border: 0; color: var(--primary); padding: .25rem .2rem; min-height: 44px;
  font-weight: 600; text-decoration: underline; text-underline-offset: .15em;
}
.button--link:hover { background: none; color: var(--primary-dark); box-shadow: none; }
.button--link:active { transform: none; }
.button[aria-disabled="true"] { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
/* The button that was pressed shows it is working; the label stays, so it still says what it does. */
.button[aria-busy="true"]::before {
  content: ""; width: .9em; height: .9em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.5rem 0; }

.pagination { margin: 1rem 0 1.5rem; }
.pagination__summary { margin: 0 0 .25rem; color: var(--text-muted); }
.pagination__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.pagination__links a, .pagination__links span { display: inline-flex; align-items: center; min-height: 44px; }
.pagination__links [aria-current="page"] { font-weight: 700; }

/* ---------- Forms ---------- */
.field { margin: 0 0 1.25rem; max-width: 40rem; }
.field__label { display: block; font-weight: 700; margin-bottom: .2rem; }
.field__optional { font-weight: 400; color: var(--text-muted); }
.field__hint { margin: 0 0 .35rem; color: var(--text-muted); }
.field__error { margin: 0 0 .35rem; color: var(--bad-text); font-weight: 700; }
.field__fieldset { border: 0; padding: 0; margin: 0; }
.field--error { border-left: 4px solid var(--bad-text); padding-left: .8rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"],
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="search"], input[type="tel"],
select, textarea {
  width: 100%; max-width: 40rem; font: inherit; color: var(--text); background: var(--bg);
  border: 2px solid var(--border); border-radius: var(--radius); padding: .5rem .6rem; min-height: 44px;
}
textarea { min-height: 7rem; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad-text); }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); }
input[type="file"] { max-width: 100%; font: inherit; }
.qr svg { width: 12rem; height: auto; background: #fff; padding: .5rem; border: 1px solid var(--border); }
.choice-list { list-style: none; padding: 0; margin: .25rem 0; }
.choice-list li { display: flex; align-items: flex-start; gap: .5rem; min-height: 44px; }
.choice-list label { font-weight: 400; }

.error-summary {
  border: 4px solid var(--bad-text); padding: 1rem 1.25rem; margin: 0 0 1.5rem; max-width: 46rem;
}
.error-summary__title { margin-top: 0; font-size: 1.2rem; }
.error-summary a { color: var(--bad-text); font-weight: 700; }

/* ---------- Messages ---------- */
.messages { margin: .5rem 0 1rem; display: grid; gap: .5rem; }
.message {
  padding: .7rem 1rem; border-radius: var(--radius); border-left: 6px solid; max-width: 60rem;
  display: flex; align-items: flex-start; gap: .5rem; animation: message-in .35s var(--ease-out) both;
}
.message__text { flex: 1; }
.message__dismiss {
  flex: none; margin: -.4rem -.5rem -.4rem 0; min-width: 44px; min-height: 44px; border: 0; border-radius: var(--radius);
  background: none; color: inherit; font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.message__dismiss:hover { background: rgba(0, 0, 0, .06); }
.message.is-leaving { animation: message-out .2s ease-in forwards; }
@keyframes message-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes message-out { to { opacity: 0; transform: translateY(-4px); } }
/* After a save lands mid-page, the confirmation follows the person down instead of waiting at the top. */
.messages--floating {
  position: fixed; z-index: 50; left: 50%; bottom: 1rem; transform: translateX(-50%);
  width: min(40rem, calc(100% - 2rem)); margin: 0;
  /* Never taller than part of the screen: a long stack scrolls inside itself instead of running off the top. */
  max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; padding: .25rem;
}
.messages--floating .message { box-shadow: 0 10px 30px rgba(8, 20, 40, .22); }
.message--success, .message--info { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-text); }
.message--warn { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-text); }
.message--error { background: var(--bad-bg); color: var(--bad-text); border-color: var(--bad-text); }

/* ---------- Status badges (text + shape + color) ---------- */
.status {
  display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem;
  border-radius: 999px; border: 1px solid currentColor; font-size: .9rem; font-weight: 700;
  white-space: nowrap; line-height: 1.6;
}
.status__icon { font-size: .85em; }
.status--ok { color: var(--ok-text); background: var(--ok-bg); }
.status--warn { color: var(--warn-text); background: var(--warn-bg); }
.status--bad { color: var(--bad-text); background: var(--bad-bg); }
.status--info { color: var(--info-text); background: var(--info-bg); }
.status--neutral { color: var(--neutral-text); background: var(--neutral-bg); }
.status--progress { color: var(--info-text); background: var(--bg); border-style: dashed; }

.pill { display: inline-block; padding: 0 .5rem; border-radius: 4px; background: var(--neutral-bg); color: var(--neutral-text); font-size: .85rem; font-weight: 700; }
.pill--sample { background: #fff0b3; color: #3d2a00; border: 1px dashed #7a4100; }

/* ---------- Cards, panels, facts ---------- */
.card {
  border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1rem 1.25rem;
  background: var(--bg); margin-bottom: 1rem; transition: box-shadow .2s ease, border-color .2s ease;
}
.card h3, .card h2 { margin-top: 0; }
.card__meta { color: var(--text-muted); font-size: .95rem; }
.card--warn { border-left: 6px solid var(--warn-text); }
.card--bad { border-left: 6px solid var(--bad-text); }
.card--ok { border-left: 6px solid var(--ok-text); }
.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.panel { background: var(--bg-soft); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0; }
.empty-state { border: 2px dashed var(--border-soft); border-radius: var(--radius); padding: 1.25rem; margin: 1.5rem 0; }
.empty-state h2 { margin-top: 0; font-size: 1.2rem; }
.empty-state--clear { border: 2px solid var(--gold); background: var(--gold-tint); display: flex; gap: 1rem; align-items: flex-start; }
.empty-state--clear h2 { color: var(--navy); }
.all-clear__mark {
  flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--gold); color: var(--navy-deep); font-weight: 800; font-size: 1.3rem;
  animation: pop .5s var(--ease-out) both;
}
p.all-clear { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--navy); }
p.all-clear .all-clear__mark { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }

.facts { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: .4rem 1rem; margin: 0 0 1rem; }
/* min-width: 0 lets a grid item be narrower than its longest word; without it a long web address
   in a fact pushes the whole page wider than a phone screen. overflow-wrap then breaks the address. */
.facts dt, .facts dd { min-width: 0; overflow-wrap: anywhere; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
@media (max-width: 40rem) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: .5rem; } }

.term { text-decoration-style: dotted; }
.term__definition { color: var(--text-muted); }
.glossary__item { padding: .5rem 0; border-bottom: 1px solid var(--border-soft); }
.glossary dt { font-weight: 700; }
.glossary dd { margin: .15rem 0 0; }
.glossary__item:target { background: var(--focus-halo); }

.steps { padding-left: 1.4rem; }
.steps li { margin-bottom: .35rem; }
.step-list li, .missing-list li { margin-bottom: .6rem; }
/* Setup steps as numbered pills. The current fill is a fixed navy, never the branded header colour, so a pale
   client colour can't leave white text unreadable; outlined and done pills use body text on white. */
.step-nav { --step-current: #152949; --step-done: var(--ok-text); }
.step-pills { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.step-pills li { max-width: 100%; margin: 0; }
.step-pill { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; max-width: 100%;
  padding: .25rem .9rem .25rem .3rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg);
  color: var(--text); font-size: .92rem; font-weight: 600; line-height: 1.25; text-decoration: none; }
.step-pill:hover { color: var(--text); background: var(--bg-soft); border-color: var(--text); text-decoration: none; }
.step-pill__label { overflow-wrap: anywhere; }
.step-pill__marker { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.8rem;
  height: 1.8rem; border: 2px solid var(--border); border-radius: 50%; font-size: .85rem; font-weight: 800; }
.step-pill--done .step-pill__marker { background: var(--step-done); border-color: var(--step-done); color: #fff; }
.step-pill--current, .step-pill--current:hover { background: var(--step-current); border-color: var(--step-current);
  color: #fff; font-weight: 800; }
.step-pill--current .step-pill__marker { background: #fff; border-color: #fff; color: var(--step-current); }
@media (max-width: 40rem) { .step-pills { gap: .35rem; } .step-pill { font-size: .88rem; padding-right: .7rem; } }
.unknown { color: var(--text-muted); font-style: italic; }
.prose p { max-width: var(--measure); }
details.panel > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.collection { margin-bottom: 2rem; }
.today-section { margin-bottom: 1.75rem; }
/* minmax(0, 1fr): a wide table inside a card scrolls in its own box instead of stretching the page. */
.today-list, .requirement-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem;
  grid-template-columns: minmax(0, 1fr); }
/* A Today card reads in one glance: what, then why, then the one thing to do. The whole card is the button's
   target (its link stretches over the card), so a miss by a few pixels still lands. */
.today-card {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem; margin: 0; transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out), border-color .2s ease;
}
.today-card:hover { box-shadow: 0 8px 22px -12px rgba(8, 20, 40, .45); transform: translateY(-2px); border-color: var(--border); }
.today-card:active { transform: translateY(0); }
.today-card__body { flex: 1 1 22rem; min-width: 0; }
.today-card__what { margin: 0 0 .2rem; font-size: 1.08rem; overflow-wrap: anywhere; }
.today-card__why { margin: 0; color: var(--text-muted); }
.today-card__next { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.today-card__next .button::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.today-card__next .button { position: static; }
.due-chip { font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .today-card__next { width: 100%; justify-content: space-between; } }
.count { color: var(--text-muted); font-weight: 400; }
.source-text { border-left: 4px solid var(--border-soft); margin: .5rem 0; padding: .25rem .9rem; background: var(--bg-softer); }
ul.compact { margin: .25rem 0; padding-left: 1.1rem; }
ul.compact li { margin: 0; }

/* Consequence panel: the five questions before any consequential action. */
.consequences { border: 2px solid var(--text); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.25rem 0; max-width: 60rem; }
.consequences h2 { margin-top: 0; }
.consequences dt { font-weight: 800; margin-top: .75rem; }
.consequences dd { margin: .2rem 0 0; }

/* ---------- Tables ---------- */
/* position: relative keeps screen-reader-only labels (position: absolute) inside the scroll box;
   without it they escape and widen the whole page on small screens. */
.table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; position: relative; }
.table-wrap:focus-visible { outline-offset: 4px; }
table { border-collapse: collapse; width: 100%; min-width: 36rem; }
caption { text-align: left; font-weight: 800; font-size: 1.1rem; padding: .25rem 0 .6rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .7rem; border-bottom: 1px solid var(--border-soft); }
thead th { background: var(--bg-soft); border-bottom: 2px solid var(--border); white-space: nowrap; }
tbody tr:nth-child(even) { background: var(--bg-softer); }
th a { color: var(--text); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A heading row inside a table that starts a group, such as "Set-aside not known". */
tbody tr.group-row th { background: var(--bg-soft); border-top: 2px solid var(--border); font-weight: 800; }
/* A set-aside in a table cell: status, type and verdict on three short lines. */
.set-aside { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .2rem; max-width: 18rem; }
.set-aside__type { overflow-wrap: anywhere; }
/* The match lines are sentences, so their badges wrap instead of running off a phone screen. */
.set-aside .status, #set-aside-row .status, #set-aside .status { white-space: normal; border-radius: .6rem; }
.set-aside__match { display: inline-flex; align-items: flex-start; gap: .35rem; }
.help-tip {
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 24px; min-height: 24px;
  border: 1px solid currentColor; border-radius: 999px; font-weight: 800; text-decoration: none;
}

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; background: var(--bg-soft); padding: 1rem; border-radius: var(--radius); margin: 1rem 0; }
.filters .field { margin: 0; min-width: 12rem; flex: 1 1 12rem; }
.filters__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.filters__buttons a { display: inline-flex; align-items: center; min-height: 44px; }
/* The less-used filters fold away under one line; the chips below the form say which of them are on. */
.filters__more { flex: 1 1 100%; border-top: 1px solid var(--border-soft); padding-top: .5rem; }
.filters__more > summary {
  cursor: pointer; font-weight: 700; color: var(--primary); min-height: 44px; display: inline-flex; align-items: center;
}
.filters__more > summary:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: .15em; }
.filters__grid { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; margin: .5rem 0 1rem; }

/* The state picker: a button that opens a searchable list of checkboxes. Without the page script it is a plain
   <details>; with it, a real button (aria-expanded) opens the same panel. */
.state-pick { position: relative; }
.state-pick__button {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; max-width: 40rem;
  min-height: 44px; padding: .5rem .6rem; border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; list-style: none;
}
.state-pick__button::-webkit-details-marker { display: none; }
.state-pick__button::after {
  content: ""; flex: none; width: .45em; height: .45em; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s var(--ease-out);
}
.state-pick[open] > .state-pick__button::after,
.state-pick__button[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.state-pick__button:hover { border-color: var(--primary); }
.state-pick.is-enhanced > summary { display: none; }
.state-pick__panel {
  position: absolute; left: 0; top: calc(100% + .35rem); z-index: 40; width: 22rem; max-width: calc(100vw - 2rem);
  padding: .75rem; background: var(--bg); color: var(--text); border: 1px solid var(--border-soft);
  border-radius: var(--radius); box-shadow: 0 18px 40px -14px rgba(8, 20, 40, .5);
}
.state-pick__panel[hidden] { display: none; }
.state-pick__find { margin-bottom: .5rem; }
.state-pick__find[hidden] { display: none; }
.state-pick__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.state-pick__list { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.state-pick__list li { max-width: none; margin: 0; }
.state-pick__list li[hidden] { display: none; }
.state-pick__option {
  display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .25rem .4rem; border-radius: 6px;
  cursor: pointer;
}
.state-pick__option:hover { background: var(--info-bg); }
.state-pick__option input { flex: none; margin: 0; }
.state-pick__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.state-pick__count { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.state-pick__none { margin: .25rem 0 0; color: var(--text-muted); }
.state-pick__none:empty { display: none; }
.state-pick__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .6rem; padding-top: .6rem;
  border-top: 1px solid var(--border-soft);
}
.state-pick__actions .button { min-height: 44px; }
.state-pick__actions [hidden] { display: none; }
/* On a phone the panel opens in the page's flow, full width, so it never runs off the side of the screen. */
@media (max-width: 40rem) {
  .state-pick__panel { position: static; width: auto; max-width: none; margin-top: .35rem; box-shadow: none; }
}

/* Filters in use, each a link that removes just that one. */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 1rem; }
.filter-chips__title { margin: 0; font-weight: 700; }
.filter-chips__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .35rem .9rem;
  border: 1px solid var(--border-soft); border-radius: 999px; background: var(--info-bg); color: var(--navy);
  font-weight: 600; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .2s var(--ease-out), transform .08s ease;
}
.filter-chip span[aria-hidden] { font-size: 1.15em; line-height: 1; }
.filter-chip:hover { color: var(--navy-deep); border-color: var(--primary); box-shadow: 0 2px 8px rgba(8, 20, 40, .12); }
.filter-chip:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.filter-clear { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; font-weight: 600; }

/* ---------- Progress meters (bid readiness, company setup) ---------- */
/* A native <progress>: the CSP allows no inline width, and screen readers already announce it. */
.meter-label { display: block; font-weight: 700; margin-bottom: .35rem; }
.meter {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 40rem; height: .8rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-soft); overflow: hidden; color: var(--primary);
}
.meter::-webkit-progress-bar { background: var(--bg-soft); border-radius: 999px; }
.meter::-webkit-progress-value {
  background: linear-gradient(90deg, var(--navy-soft), var(--primary)); border-radius: 999px; transition: width .6s var(--ease-out);
}
.meter::-moz-progress-bar { background: linear-gradient(90deg, var(--navy-soft), var(--primary)); border-radius: 999px; }
.meter--done::-webkit-progress-value { background: linear-gradient(90deg, var(--gold-dark), var(--gold)); }
.meter--done::-moz-progress-bar { background: linear-gradient(90deg, var(--gold-dark), var(--gold)); }

.readiness__head, .progress-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.readiness__head h2 { margin: 0; }
.readiness .meter { margin-bottom: 1rem; }
/* "+2 checks now pass": added by the page script when the count went up since this tab last saw the bid. */
.readiness__delta {
  display: inline-flex; align-items: center; padding: .1rem .65rem; border-radius: 999px;
  border: 1px solid var(--gold); background: var(--gold-tint); color: var(--navy); font-size: .9rem; font-weight: 700;
  animation: delta-in .4s var(--ease-out) both;
}
/* Empty for a moment while the live region registers; collapsed, not display: none, so it stays announced. */
.readiness__delta:empty { padding: 0; border: 0; }
.readiness__delta.is-leaving { animation: message-out .3s ease-in forwards; }
@keyframes delta-in { from { opacity: 0; transform: translateY(4px) scale(.9); } }
/* Every check passing, the first time this tab sees it: one gold pop and a single shimmer, then still. */
.readiness__badge { display: inline-flex; position: relative; overflow: hidden; border-radius: 999px; }
.readiness__badge.is-celebrating { animation: ready-pop .7s var(--ease-out) both; }
.readiness__badge.is-celebrating::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%);
  animation: shimmer 1s .4s ease-in-out both;
}
@keyframes ready-pop {
  0% { transform: scale(.85); box-shadow: 0 0 0 0 rgba(197, 156, 83, 0); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(197, 156, 83, .55); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(197, 156, 83, 0); }
}
@keyframes shimmer { to { transform: translateX(110%); } }
.readiness--ready { border: 2px solid var(--gold); background: linear-gradient(180deg, var(--gold-tint), var(--bg) 6rem); }
.checklist { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.checklist__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; max-width: none; }
.checklist__item--pass { color: var(--text-muted); }
.progress-card { background: var(--bg-soft); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 0 1.25rem; max-width: 42rem; }
.progress-card--done { background: var(--gold-tint); border: 2px solid var(--gold); }
.step-list__item--done > a { color: var(--text-muted); }

/* ---------- Sorting past awards ---------- */
/* The count stays in view while working down a long list; scroll padding keeps focus clear of it. */
.triage-progress { position: sticky; top: var(--header-height, 0px); z-index: 5; max-width: none; box-shadow: 0 6px 16px -10px rgba(8, 20, 40, .35); }
html:has(.triage-progress) { scroll-padding-top: calc(var(--header-height, 0px) + 8rem); }
@media (max-height: 34rem) { .triage-progress { position: static; } html:has(.triage-progress) { scroll-padding-top: calc(var(--header-height, 0px) + 1rem); } }
.toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-left: auto; font-weight: 600; cursor: pointer; }
.toggle[hidden] { display: none; }
.triage-finish { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.triage-finish p { margin: 0; }
.is-hiding-sorted [data-sorted="true"]:not(.is-settling) { display: none; }
.is-settling { animation: settle .9s ease-in both; }
@keyframes settle { 0%, 55% { opacity: 1; } 100% { opacity: 0; transform: scale(.98); } }
/* The card that just changed: the same gold wash as landing after a save, and its new status pops in. */
.is-updated { animation: landed 2.2s ease-out both; box-shadow: inset 4px 0 0 var(--gold); }
.is-updated .status { animation: pop .45s var(--ease-out) both; }
.is-updated.is-settling { animation: settle .9s ease-in both; }

/* ---------- A check in progress ---------- */
.checking { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: 0; }
.checking__dot {
  width: .6em; height: .6em; border-radius: 50%; background: currentColor;
  animation: breathe 1.4s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

/* ---------- An edited form that is not saved yet ---------- */
/* Text, not only colour: a gold dot beside words that say what it means. */
.unsaved-note {
  display: inline-flex; align-items: center; gap: .4rem; margin-left: .6rem; font-size: .9rem; font-weight: 700;
  color: var(--warn-text); animation: message-in .25s var(--ease-out) both;
}
.unsaved-note::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--warn-text); }
.stack-form .unsaved-note { margin-left: 0; justify-self: start; }

/* Bid matrix answer form: one field per line, so each label sits on top of its own box. */
.stack-form { display: grid; gap: .3rem; margin: .5rem 0; }
.stack-form label { font-weight: 700; font-size: .92rem; }
.stack-form .button { justify-self: start; margin-top: .25rem; }

/* ---------- Landing after a save ---------- */
/* The page returns to the thing just saved (#item-12, #tasks…); a brief gold wash says "this one". */
:target { scroll-margin-top: 1.5rem; }
:target.landing, h2:target { animation: landed 2.2s ease-out both; }
tr:target > * { animation: landed 2.2s ease-out both; }
/* A lasting marker too, so the place is still clear once the wash fades (or never plays, with reduced motion). */
:target.landing, tr:target > th:first-child { box-shadow: inset 4px 0 0 var(--gold); }
@keyframes landed { 0%, 30% { background-color: var(--gold-tint); box-shadow: inset 4px 0 0 var(--gold); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .button[aria-busy="true"]::before { border-right-color: currentColor; }
}

/* ---------- Certification nudges (design 2026-10-29, PR 4) ---------- */
/* Cards stack full width on a phone; every button keeps the 44px touch height. Words carry the meaning. */
.program-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.program-card { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.program-card h4 { margin: 0 0 .4rem; font-size: 1.08rem; }
.program-card__flag { margin: 0 0 .4rem; font-weight: 700; color: var(--navy); }
.program-card__why { margin: 0 0 .5rem; font-weight: 700; }
.program-card__caution { margin: 0 0 .5rem; padding-left: .6rem; border-left: 4px solid var(--warn-text); }
.program-card__note { font-size: .95rem; }
.program-card .facts { grid-template-columns: 1fr; gap: .15rem; }
.program-card .facts dd { margin-bottom: .45rem; }
.program-card__actions form, .win-card__actions form, .apply-nudge__actions form { display: inline; margin: 0; }
.program-card__actions .button, .win-card__actions .button, .apply-nudge__actions .button,
.apply-nudge__watch .button { min-height: 44px; }
.program__source { font-size: .95rem; overflow-wrap: anywhere; }
.program__footer { font-size: .9rem; margin-bottom: 0; }
.win-card { border-left: 6px solid var(--gold); overflow-wrap: anywhere; }
.apply-nudge { overflow-wrap: anywhere; }
.apply-nudge__facts { padding-left: 1.2rem; }
.apply-nudge__watch { list-style: none; padding: 0; display: grid; gap: .6rem; }
.apply-nudge__watch form { display: inline; }
.set-aside-nudge { overflow-wrap: anywhere; }
.set-aside-nudge__line + .set-aside-nudge__line { border-top: 1px solid var(--border-soft); padding-top: .5rem; }
.quiz__limits ul { padding-left: 1.2rem; }
.quiz__clear { margin-top: 1rem; }
.quiz__clear > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.held-list { padding-left: 1.2rem; }
/* Jobs list: the title (the row header) and the set-aside (its own cell) stay narrow enough on a phone that the
   set-aside shows without scrolling the table. */
.job-cell { min-width: 8rem; max-width: 16rem; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .job-cell { max-width: 9.5rem; }
  .job-set-aside .set-aside { max-width: 10rem; }
  .program-card__actions, .win-card__actions, .apply-nudge__actions { flex-direction: column; align-items: stretch; }
  .program-card__actions .button, .win-card__actions .button, .apply-nudge__actions .button { width: 100%; }
}

@media print {
  .site-header, .site-footer, .demo-banner, .skip-link, .actions, .message__dismiss { display: none; }
  .messages--floating { position: static; transform: none; width: auto; max-height: none; overflow: visible; }
  a { color: var(--text); }
}