/* Find contracts (one list, one notice) and Team Up. Tokens follow DESIGN_DNA.md:
   navy primary, gold only for deadline accents, 12px panels, 44px targets,
   focus #2b6cb0, every status color carries a text label. */
.fx, .fx-dialog, .fx-sheet {
  --fx-ink: #182231; --fx-ink2: #3b4656; --fx-muted: #4a5568; --fx-line: #dfe3ea; --fx-line2: #c9d1dc;
  --fx-navy: #193b5d; --fx-navy-d: #0f2740; --fx-pale: #e8edf5; --fx-sel: #f3f7fc; --fx-match: #164e86;
  --fx-gold-bg: #fbefd5; --fx-gold-fg: #7a4b00; --fx-green: #1f7a3a; --fx-green-bg: #e7f3ec; --fx-green-fg: #1f5c34;
  --fx-red-bg: #fdecea; --fx-red-fg: #8a1f17; --fx-grey-bg: #eef0f3; --fx-focus: #2b6cb0; --fx-teal: #0f6b73;
  --fx-step-done: #1f6fb5; --fx-step-cur: #164e86;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; color: var(--fx-ink);
}
.fx { display: flex; flex-direction: column; gap: 16px; }
.fx *, .fx-dialog *, .fx-sheet * { box-sizing: border-box; }
.fx button, .fx select, .fx input, .fx textarea,
.fx-dialog button, .fx-dialog select, .fx-dialog input, .fx-dialog textarea { font-family: inherit; }
.fx :focus-visible, .fx-dialog :focus-visible { outline: 3px solid var(--fx-focus); outline-offset: 2px; }
.fx a, .fx-dialog a { color: var(--fx-navy); }
.fx a:hover, .fx-dialog a:hover { color: var(--fx-navy-d); }
.fx [hidden], .fx-dialog [hidden], .fx-backdrop [hidden] { display: none !important; }
/* Flex columns with a max height must not squeeze their rows (a scrolling row's minimum height is 0). */
.fx-panel > *, .fx-dialog > *, .fx-wizard > * { flex-shrink: 0; }
.fx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fx-muted { color: var(--fx-muted); }
.fx-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fx-muted); }
.fx-h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.fx-h2 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; }
.fx-h3 { margin: 0; font-size: 17px; font-weight: 700; }
.fx-kicker { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fx-muted); }

/* ---------- buttons ---------- */
.fx-btn, .fx-btn-o, .fx-btn-g, .fx-btn-go, .fx-btn-q {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.fx-btn { background: var(--fx-navy); color: #fff !important; border: 0; }
.fx-btn:hover { background: var(--fx-navy-d); }
.fx-btn-o { background: #fff; color: var(--fx-navy) !important; border: 2px solid var(--fx-navy); }
.fx-btn-o:hover { background: var(--fx-sel); }
.fx-btn-g { background: #fff; color: var(--fx-ink) !important; border: 1px solid var(--fx-line2); }
.fx-btn-g:hover { background: #f7f8fa; }
.fx-btn-go { background: var(--fx-green); color: #fff !important; border: 0; }
.fx-btn-q { background: transparent; color: var(--fx-navy) !important; border: 0; padding: 0 8px; }
.fx-btn[disabled], .fx-btn-o[disabled], .fx-btn-g[disabled], .fx-btn-go[disabled] { opacity: .55; cursor: not-allowed; }
.fx-btn.lg, .fx-btn-o.lg, .fx-btn-go.lg { min-height: 48px; font-size: 16px; padding: 0 22px; }
.fx-btn.sm, .fx-btn-o.sm, .fx-btn-g.sm { min-height: 40px; font-size: 14px; padding: 0 14px; }

/* ---------- pills and badges (text always says what the color means) ---------- */
.fx-pill { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 3px 10px; line-height: 1.35; }
.fx-pill.due { font-weight: 700; background: var(--fx-grey-bg); color: var(--fx-ink2); }
.fx-pill.due.soon { background: var(--fx-gold-bg); color: var(--fx-gold-fg); }
.fx-pill.due.gone { background: var(--fx-red-bg); color: var(--fx-red-fg); }
.fx-pill.sa { background: var(--fx-pale); color: var(--fx-navy); }
.fx-type { font-size: 13px; color: var(--fx-muted); }
.fx-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; line-height: 1.4; }
.fx-badge.role-prime { background: var(--fx-navy); color: #fff; }
.fx-badge.role-sub { background: #3d5a80; color: #fff; }
.fx-badge.role-ind { background: var(--fx-teal); color: #fff; }
.fx-badge.sam-in { background: var(--fx-green-bg); color: var(--fx-green-fg); }
.fx-badge.sam-out { background: var(--fx-grey-bg); color: var(--fx-ink2); }
.fx-badge.tag { background: var(--fx-pale); color: var(--fx-navy); font-weight: 600; }
.fx-badge.how { background: #fff; border: 1px solid currentColor; color: var(--fx-match); font-weight: 600; padding: 1px 7px; }
.fx-badge.how.jev { color: #0f5960; }
.fx-badge.ok { background: var(--fx-green-bg); color: var(--fx-green-fg); }
.fx-badge.wait { background: var(--fx-gold-bg); color: var(--fx-gold-fg); }
.fx-badge.no { background: var(--fx-grey-bg); color: var(--fx-ink2); }
.fx-badge.you { background: var(--fx-gold-bg); color: var(--fx-gold-fg); }

/* ---------- page head and tabs ---------- */
.fx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fx-head-l { display: flex; flex-direction: column; gap: 14px; }
.fx-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-tab { border: 1px solid var(--fx-line2); background: #fff; color: var(--fx-ink); font-size: 15px; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; cursor: pointer; min-height: 44px; }
.fx-tab[aria-selected="true"] { border-color: var(--fx-navy); background: var(--fx-navy); color: #fff; }
.fx-tab .n { font-weight: 500; opacity: .85; }
.fx-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
.fx-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- search card ---------- */
.fx-search { background: #fff; border: 1px solid var(--fx-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.fx-qrow { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.fx-q { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--fx-line2); border-radius: 10px; padding: 0 14px; min-height: 52px; background: #fff; }
.fx-q:focus-within { border-color: var(--fx-focus); box-shadow: 0 0 0 2px rgba(43, 108, 176, .25); }
.fx-q svg { flex: 0 0 20px; color: #5b6676; }
.fx-q input { border: 0; outline: 0; font-size: 16px; flex: 1; min-width: 0; color: var(--fx-ink); background: transparent; height: 50px; }
.fx-q input:focus-visible { outline: none; }
.fx-go { min-height: 52px; padding: 0 26px; font-size: 16px; }
.fx-frow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.fx-frow-l, .fx-frow-r { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-fl { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fx-ink2); }
.fx-sel { font-size: 14px; border: 1px solid var(--fx-line2); border-radius: 999px; padding: 8px 12px; background: #fff; color: var(--fx-ink); min-height: 40px; max-width: 220px; }
.fx-sel.sq { border-radius: 10px; }
.fx-sel.on { border-color: var(--fx-navy); background: var(--fx-sel); font-weight: 600; }
.fx-morebtn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; border: 1px solid var(--fx-line2); border-radius: 999px;
  padding: 8px 14px; background: #fff; color: var(--fx-ink); min-height: 40px; cursor: pointer; }
.fx-morebtn[aria-expanded="true"], .fx-morebtn.on { border-color: var(--fx-navy); background: var(--fx-sel); font-weight: 600; }
.fx-dots { width: 40px; height: 40px; border: 1px solid var(--fx-line2); border-radius: 10px; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fx-more { border-top: 1px solid var(--fx-line); padding-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.fx-more[hidden] { display: none; }
.fx-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fx-ink2); }
.fx-field input, .fx-field select, .fx-field textarea { font-size: 15px; font-weight: 400; border: 1px solid var(--fx-line2); border-radius: 10px; padding: 10px 12px; min-height: 44px; color: var(--fx-ink); background: #fff; }
.fx-field textarea { min-height: 0; line-height: 1.45; resize: vertical; }
.fx-field .hint { font-size: 13px; font-weight: 400; color: var(--fx-muted); }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; background: var(--fx-pale); color: var(--fx-navy); border-radius: 999px; padding: 2px 4px 2px 10px; }
.fx-chip button { border: 0; background: transparent; color: var(--fx-navy); font-size: 16px; line-height: 1; width: 28px; height: 28px; border-radius: 14px; cursor: pointer; }
.fx-chip button:hover { background: #d6e0ee; }
.fx-termnote { font-size: 13px; color: var(--fx-muted); }

/* ⋯ menu */
.fx-menuwrap { position: relative; }
.fx-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; background: #fff; border: 1px solid var(--fx-line);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(12, 22, 38, .16); padding: 6px; display: flex; flex-direction: column; }
.fx-menu[hidden] { display: none; }
.fx-menu button, .fx-menu a { text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 10px 12px; font-size: 15px; color: var(--fx-ink); cursor: pointer; min-height: 44px; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.fx-menu button:hover, .fx-menu a:hover, .fx-menu button:focus-visible, .fx-menu a:focus-visible { background: var(--fx-sel); }
.fx-menu .lock { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--fx-muted); }
.fx-menu hr { border: 0; border-top: 1px solid var(--fx-line); margin: 4px 0; }

/* ---------- list + panel ---------- */
.fx-split { display: grid; grid-template-columns: minmax(320px, 500px) minmax(0, 1fr); gap: 18px; align-items: start; }
.fx-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fx-cap { font-size: 14px; color: var(--fx-muted); padding: 0 4px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fx-card { position: relative; background: #fff; border: 2px solid var(--fx-line); border-radius: 12px; }
.fx-card:hover { border-color: #b8c4d4; }
.fx-card.sel { border-color: var(--fx-navy); background: var(--fx-sel); }
.fx-card-main { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 14px 56px 14px 16px; cursor: pointer; border-radius: 10px; }
.fx-card-main:focus-visible { outline: 3px solid var(--fx-focus); outline-offset: 2px; }
.fx-card-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fx-card-title { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--fx-ink); }
.fx-card-org { font-size: 14px; color: var(--fx-muted); }
.fx-card-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 14px; color: var(--fx-ink2); }
.fx-matchpct { font-weight: 700; color: var(--fx-match); }
.fx-inline { display: inline-flex; align-items: center; gap: 6px; }
.fx-mine { font-weight: 700; color: var(--fx-green-fg); }
.fx-star { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #5b6676; }
.fx-star:hover { background: var(--fx-grey-bg); }
.fx-star[aria-pressed="true"] { color: #8a6d24; }
.fx-star[aria-pressed="true"] svg { fill: var(--fx-gold, #c4a35a); }
.fx-showmore { background: #fff; border: 1px solid var(--fx-line2); border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--fx-navy); min-height: 48px; cursor: pointer; }
.fx-empty { background: #fff; border: 1px dashed #b7c2d1; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.fx-empty .fx-chips a { text-decoration: none; }
.fx-loading { padding: 18px 4px; color: var(--fx-muted); font-size: 15px; }
.fx-banner { background: var(--fx-sel); border: 1px solid #c8d6ea; border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

.fx-panel { background: #fff; border: 1px solid var(--fx-line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; min-width: 0; }
.fx-panel-empty { color: var(--fx-muted); font-size: 15px; line-height: 1.55; }
.fx-p-top { display: flex; flex-direction: column; gap: 8px; }
.fx-p-title { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.fx-p-org { font-size: 15px; color: var(--fx-muted); }
.fx-close { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 22px; background: #f0f2f5; border: 0; cursor: pointer; display: none; align-items: center; justify-content: center; }
.fx-p-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.fx-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fx-acts .grow { flex-grow: 1; }
.fx-samlink { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; min-height: 44px; padding: 0 6px; }
.fx-dtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--fx-line); overflow-x: auto; }
.fx-dtab { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--fx-muted); font-size: 15px; font-weight: 600; padding: 10px 14px; min-height: 44px; cursor: pointer; white-space: nowrap; }
.fx-dtab[aria-selected="true"] { border-bottom-color: var(--fx-navy); color: var(--fx-navy); }
.fx-tabpanel { display: flex; flex-direction: column; gap: 18px; }
.fx-want p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; }
.fx-want small { display: block; margin-top: 6px; font-size: 13px; color: var(--fx-muted); }
.fx-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; background: #f7f8fa; border-radius: 10px; padding: 16px; }
.fx-facts dt { font-size: 13px; color: var(--fx-muted); }
.fx-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.fx-matchbox { border: 1px solid #c8d6ea; background: var(--fx-sel); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.fx-matchbox .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fx-matchbox .big { font-size: 16px; font-weight: 700; color: var(--fx-match); }
.fx-matchbox ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.6; }
.fx-inbtn { text-align: left; border: 1px solid var(--fx-line); background: #fff; border-radius: 10px; padding: 14px 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--fx-ink); min-height: 56px; width: 100%; }
.fx-inbtn .go { color: var(--fx-navy); font-weight: 600; white-space: nowrap; }
.fx-tool-out { border: 1px solid var(--fx-line); border-radius: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.55; }
.fx-tool-out h4 { margin: 0 0 6px; font-size: 15px; }
.fx-official { font-size: 13px; color: var(--fx-muted); line-height: 1.5; }

/* Who's in */
.fx-locked { border: 1px dashed #b7c2d1; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.fx-locked .t { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.fx-locked p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fx-ink2); }
.fx-whobar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.fx-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-fchip { border: 1px solid var(--fx-line2); background: #fff; color: var(--fx-ink); border-radius: 999px; font-size: 14px; font-weight: 600; padding: 7px 14px; min-height: 40px; cursor: pointer; }
.fx-fchip[aria-pressed="true"] { border-color: var(--fx-navy); background: var(--fx-navy); color: #fff; }
.fx-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-mem { border: 1px solid var(--fx-line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.fx-mem.me { border-color: #e6cf98; background: #fffdf7; }
.fx-mem-row { display: flex; gap: 14px; align-items: flex-start; }
.fx-av { flex: 0 0 44px; height: 44px; border-radius: 10px; background: var(--fx-pale); color: var(--fx-navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.fx-av.ind { background: #e3f2f3; color: #0f5960; }
.fx-av.sub { background: #eaf0f6; color: #2f4a6b; }
.fx-mem-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fx-mem-name { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fx-namebtn { all: unset; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--fx-ink); border-radius: 4px; }
.fx-namebtn:hover { text-decoration: underline; }
.fx-namebtn:focus-visible { outline: 3px solid var(--fx-focus); outline-offset: 2px; }
.fx-mem-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-mem-note { margin: 0; font-size: 15px; line-height: 1.45; color: #2a3443; overflow-wrap: anywhere; }
.fx-mem-foot { font-size: 13px; color: var(--fx-muted); }
.fx-mem-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fx-lockline { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fx-compose { background: #f7f8fa; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.fx-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--fx-ink2); }
.fx-check input { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; }
.fx-ok { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--fx-green-fg); background: var(--fx-green-bg); border-radius: 8px; padding: 10px 12px; }
.fx-err { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--fx-red-fg); background: var(--fx-red-bg); border-radius: 8px; padding: 10px 12px; }
.fx-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--fx-gold-fg); background: var(--fx-gold-bg); border-radius: 8px; padding: 10px 12px; line-height: 1.45; }
.fx-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-change { border: 1px solid var(--fx-line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.45; }
.fx-change .when { font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-change .sub { color: #2a3443; overflow-wrap: anywhere; }

/* Phone: the notice is a bottom sheet */
.fx-scrim { display: none; }
@media (max-width: 899px) {
  .fx-split { grid-template-columns: minmax(0, 1fr); }
  .fx-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 88vh; border-radius: 18px 18px 0 0; z-index: 1001;
    transform: translateY(105%); transition: transform .2s ease; padding: 14px 18px 22px; visibility: hidden; }
  .fx.sheet .fx-panel { transform: none; visibility: visible; }
  .fx.sheet .fx-scrim { display: block; position: fixed; inset: 0; background: rgba(12, 22, 38, .45); z-index: 1000; }
  .fx-close { display: inline-flex; }
  .fx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-h1 { font-size: 24px; }
  .fx-mem-row { flex-wrap: wrap; }
  .fx-mem-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .fx-panel { transition: none; } }

/* ---------- dialogs ---------- */
.fx-backdrop { position: fixed; inset: 0; background: rgba(12, 22, 38, .5); z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.fx-dialog { width: min(640px, 100%); max-height: 92vh; overflow: auto; background: #fff; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 24px 64px rgba(12, 22, 38, .3); }
.fx-dialog.wide { width: min(760px, 100%); }
.fx-dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fx-dhead .sub { font-size: 14px; color: var(--fx-muted); }
.fx-dhead h2 { margin: 4px 0 0; font-size: 24px; font-weight: 700; line-height: 1.2; }
.fx-x { flex: 0 0 44px; height: 44px; border-radius: 22px; background: #f0f2f5; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fx-dfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--fx-line); padding-top: 18px; flex-wrap: wrap; }
@media (max-width: 560px) { .fx-dialog { padding: 20px; } .fx-backdrop { align-items: flex-end; padding: 0; } .fx-dialog { border-radius: 16px 16px 0 0; max-height: 94vh; } }

/* Guided-flow look (DESIGN_DNA 2026-10-02): chevrons, tiles, green Continue, blue-outline Back */
.fx-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.fx-steps li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fx-ink2); background: var(--fx-pale);
  min-height: 38px; padding: 0 14px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); text-align: center; }
.fx-steps li.done { background: var(--fx-step-done); color: #fff; }
.fx-steps li.cur { background: var(--fx-step-cur); color: #fff; }
.fx-steps li button { all: unset; cursor: pointer; }
.fx-steps li button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.fx-tiles { display: flex; flex-direction: column; gap: 10px; }
.fx-tiles.row { flex-direction: row; flex-wrap: wrap; }
.fx-tile { text-align: left; border: 2px solid var(--fx-line); background: #fff; border-radius: 12px; padding: 16px 18px; display: flex; gap: 14px; align-items: center;
  cursor: pointer; color: var(--fx-ink); min-height: 72px; width: 100%; font-size: 15px; }
.fx-tiles.row .fx-tile { width: auto; flex: 1 1 160px; min-height: 56px; justify-content: center; font-weight: 600; font-size: 16px; }
.fx-tile[aria-checked="true"], .fx-tile[aria-pressed="true"] { border-color: var(--fx-step-done); background: #eef5fc; }
.fx-tile[disabled] { opacity: .55; cursor: not-allowed; }
.fx-dot { flex: 0 0 22px; height: 22px; border-radius: 11px; border: 2px solid #8a95a5; display: flex; align-items: center; justify-content: center; }
.fx-tile[aria-checked="true"] .fx-dot { border-color: var(--fx-step-done); }
.fx-tile[aria-checked="true"] .fx-dot::after { content: ""; width: 10px; height: 10px; border-radius: 5px; background: var(--fx-step-done); }
.fx-tile .t { display: block; font-size: 17px; font-weight: 700; }
.fx-tile .b { display: block; font-size: 15px; color: var(--fx-ink2); line-height: 1.4; margin-top: 3px; }
.fx-switchrow { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--fx-line); }
.fx-switchrow:first-child { border-top: 0; }
.fx-switchrow .l { display: flex; flex-direction: column; gap: 3px; font-size: 15px; font-weight: 600; }
.fx-switchrow .l small { font-size: 13px; font-weight: 400; color: var(--fx-muted); line-height: 1.4; }
.fx-switch { flex: 0 0 52px; height: 30px; border-radius: 15px; border: 0; background: #8a95a5; position: relative; cursor: pointer; }
.fx-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; transition: left .15s; }
.fx-switch[aria-checked="true"] { background: var(--fx-green); }
.fx-switch[aria-checked="true"]::after { left: 25px; }
.fx-switch[disabled] { opacity: .5; cursor: not-allowed; }
.fx-switch .fx-sr { position: absolute; }

/* ---------- Team Up pages ---------- */
.fx-page { max-width: 1216px; }
.fx-cols { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.fx-cols > .main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.fx-cols > .side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.fx-box { background: #fff; border: 1px solid var(--fx-line); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.fx-box-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.fx-pcard { background: #fff; border: 1px solid var(--fx-line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.fx-pcard.new { border-style: dashed; border-color: #b7c2d1; }
.fx-pcard-h { display: flex; gap: 12px; align-items: center; }
.fx-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fx-rows > li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #eef0f3; flex-wrap: wrap; }
.fx-rows > li:first-child { border-top: 0; }
.fx-rows .grow { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fx-rows .t { font-size: 16px; font-weight: 600; line-height: 1.3; }
.fx-rows .s { font-size: 14px; color: var(--fx-muted); }
.fx-msg { border: 1px solid var(--fx-line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; }
.fx-msg .h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--fx-muted); }
.fx-msg .h b { color: var(--fx-ink); font-size: 15px; }
.fx-msg .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.fx-msg .reply { border-left: 3px solid var(--fx-line2); padding-left: 10px; color: var(--fx-ink2); white-space: pre-wrap; overflow-wrap: anywhere; }
.fx-stage { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.fx-stage li { flex: 1 1 150px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fx-ink2);
  background: var(--fx-pale); min-height: 40px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.fx-stage li.done { background: var(--fx-step-done); color: #fff; }
.fx-stage li.cur { background: var(--fx-step-cur); color: #fff; }
.fx-bar { height: 12px; border-radius: 6px; background: #e3e7ee; display: flex; overflow: hidden; }
.fx-bar span { display: block; height: 100%; }
.fx-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--fx-ink2); }
.fx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.fx-share { width: 84px; font-size: 15px; border: 1px solid var(--fx-line2); border-radius: 8px; padding: 8px 10px; min-height: 40px; }
.fx-stars { display: flex; gap: 2px; }
.fx-stars button { width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; padding: 0; color: #8a6d24; }
.fx-stars button[aria-checked="true"] svg, .fx-stars button.on svg { fill: #c4a35a; }
.fx-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.fx-rv { border: 1px solid var(--fx-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.fx-cardview { display: flex; flex-direction: column; gap: 14px; }
.fx-cardview .row { display: flex; gap: 14px; align-items: center; }
.fx-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 15px; margin: 0; }
.fx-kv dt { color: var(--fx-muted); }
.fx-kv dd { margin: 0; overflow-wrap: anywhere; }
.fx-codes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-code { width: 100%; text-align: left; border: 1px solid var(--fx-line); background: #fff; border-radius: 10px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; cursor: pointer; color: var(--fx-ink); min-height: 56px; }
.fx-code[aria-checked="true"] { border-color: #c8d6ea; background: #f8fafd; }
.fx-box2 { flex: 0 0 22px; height: 22px; border-radius: 5px; border: 2px solid #8a95a5; background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; }
.fx-code[aria-checked="true"] .fx-box2 { border-color: var(--fx-navy); background: var(--fx-navy); }
.fx-code .c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fx-code .c b { font-size: 15px; }
.fx-code .c span { font-size: 13px; color: var(--fx-muted); }
.fx-drop { border: 2px dashed #b7c2d1; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; font-size: 15px; }
.fx-drop.over { border-color: var(--fx-step-done); background: #eef5fc; }
.fx-preview { background: #fff; border: 1px solid var(--fx-line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.fx-wizard { display: flex; flex-direction: column; gap: 22px; }
.fx-wizard h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; text-align: center; }
.fx-wizard .lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fx-ink2); text-align: center; }
.fx-wnav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fx-stepbody { display: flex; flex-direction: column; gap: 16px; max-width: 680px; width: 100%; margin: 0 auto; }

/* ---- Who's in v2 (owner, 2026-10-08): Confirmed or Auto, Jev match + how sure Jev is, partner stars. ----
   Contrast: chip text 7.6:1 and 7.2:1, Jev % #164e86 on white 8.6:1, star number #182231. Labels carry
   every state; the meter bars and the star glyph are decorative. */
.fx-who { display: flex; flex-direction: column; gap: 14px; }
.fx-mem-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fx-entry { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; line-height: 1.4; }
.fx-entry.conf { background: #e8eef5; color: var(--fx-navy); border: 1px solid #c9d6e6; }
.fx-entry.conf svg { width: 12px; height: 12px; }
.fx-entry.auto { background: #fff; color: var(--fx-muted); border: 1px dashed #8a94a6; }
/* Rating classes are fx-rating*, apart from fx-star (the Save button) and fx-stars (the review picker). */
.fx-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--fx-ink2); }
.fx-rating strong { color: var(--fx-ink); }
.fx-rating.none { color: var(--fx-muted); }
.fx-rating-star { color: #b7791f; font-size: 14px; line-height: 1; }
.fx-jev { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.fx-jev-pct { font-weight: 700; color: var(--fx-match); font-size: 15px; }
.fx-jev-conf { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fx-muted); }
.fx-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.fx-meter i { display: block; width: 4px; border-radius: 1px; background: var(--fx-match); }
.fx-meter i:nth-child(1) { height: 6px; } .fx-meter i:nth-child(2) { height: 9px; } .fx-meter i:nth-child(3) { height: 12px; }
.fx-meter.medium i:nth-child(3) { background: var(--fx-line); }
.fx-jev-check { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--fx-gold-bg); color: var(--fx-gold-fg); }
.fx-jev-wait { font-size: 12px; color: var(--fx-muted); }
.fx-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fx-ink2); align-self: flex-end; }
.fx-sort select { min-height: 40px; border: 1px solid var(--fx-line2); border-radius: 10px; padding: 0 10px; font: inherit; color: var(--fx-ink); background: #fff; }
.fx-mine { border: 1px solid #b9c7d8; background: #fff; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.fx-mine-top, .fx-mine-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fx-mine .fx-note { margin: 0; }
.fx-targets { border: 1px solid var(--fx-line); border-radius: 10px; padding: 10px 14px; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.fx-targets legend { font-size: 13px; font-weight: 700; color: var(--fx-ink); padding: 0 4px; }
.fx-chev { margin-bottom: 14px; }
.fx-who button:focus-visible, .fx-who select:focus-visible, .fx-targets input:focus-visible { outline: 3px solid var(--fx-focus); outline-offset: 2px; }
/* My lists: award and grant titles open their list in a dialog, so they are buttons that read as links. */
.fx-rows .fx-linkbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.3;
  color: var(--fx-navy); text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fx-rows .fx-linkbtn:hover { color: var(--fx-navy-d); }
.fx-rows .fx-mem-tags .fx-jev { flex-direction: row; align-items: center; gap: 8px; }
.fx-rows .fx-acts { display: flex; gap: 8px; align-items: center; }
.fx-rows button:focus-visible, .fx-rows a:focus-visible, .fx-box-h h2:focus-visible { outline: 3px solid var(--fx-focus); outline-offset: 2px; }
/* A note's "About:" line names an award or grant as a button that opens its list (no page of its own). */
.fx-msg .fx-linkbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; color: var(--fx-navy);
  text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fx-msg .fx-linkbtn:hover { color: var(--fx-navy-d); }

/* ---- Names | Talk (owner, 2026-10-09): member talk inside every Who's in list. ----
   The switch is two toggle buttons (aria-pressed). Posts are text only; a hidden post (shown to its author)
   has a dashed border and says why in words. Contrast: meta #3b4656 and muted #4a5568 on white. */
.fx-whoswitch { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border: 1px solid var(--fx-line2); border-radius: 999px; background: #fff; margin-bottom: 12px; }
.fx-whoswitch[hidden] { display: none; }
.fx-whoseg { border: 0; background: transparent; color: var(--fx-ink2); font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer; }
.fx-whoseg[aria-pressed="true"] { background: var(--fx-navy); color: #fff; }
.fx-whoseg .n { font-weight: 500; opacity: .9; }
.fx-whoseg:focus-visible { outline: 3px solid var(--fx-focus); outline-offset: 2px; }
.fx-talk { display: flex; flex-direction: column; gap: 14px; }
.fx-talk-banner { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fx-ink2); background: var(--fx-sel); border-left: 3px solid var(--fx-navy); border-radius: 0 8px 8px 0; padding: 8px 12px; }
.fx-talk-up { align-self: flex-start; min-height: 32px; }
.fx-talk-rules { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fx-ink2); }
.fx-talk-compose .fx-acts { align-items: center; }
.fx-talk-left { margin-left: auto; }
.fx-talk-why { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; border: 1px dashed #b7c2d1; border-radius: 12px; padding: 14px 16px; }
.fx-talk-locked { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--fx-ink2); background: var(--fx-grey-bg); border-radius: 10px; padding: 12px 14px; }
.fx-talk-status { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fx-muted); }
.fx-talk-status:empty { margin-top: -14px; }
.fx-talk-status.err { color: var(--fx-red-fg); }
.fx-talk-status.ok { color: var(--fx-green-fg); }
.fx-talk-status:focus { outline: none; }
.fx-talk-status:focus-visible { outline: 3px solid var(--fx-focus); outline-offset: 2px; }
.fx-talk-list, .fx-talk-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-talk-post { border: 1px solid var(--fx-line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-talk-post.me, .fx-talk-reply.me { background: #fffdf7; }
.fx-talk-post.me { border-color: #e6cf98; }
.fx-talk-post.held, .fx-talk-reply.held { border-style: dashed; }
.fx-talk-replies { margin-top: 4px; padding-left: 14px; border-left: 3px solid var(--fx-line); }
.fx-talk-reply { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; min-width: 0; }
.fx-talk-reply.held { border: 1px dashed #b7c2d1; }
.fx-talk-who { font-size: 14px; line-height: 1.6; min-width: 0; overflow-wrap: anywhere; }
.fx-talk-who .fx-namebtn { font-size: 15px; }
.fx-talk-who .fx-badge { margin-left: 6px; vertical-align: 1px; }
.fx-talk-meta { color: var(--fx-ink2); overflow-wrap: anywhere; }
.fx-talk-time { font-size: 13px; color: var(--fx-muted); }
.fx-talk-body { margin: 0; font-size: 15px; line-height: 1.5; color: #2a3443; white-space: pre-wrap; overflow-wrap: anywhere; }
.fx-talk-held { margin: 0; font-size: 13px; font-weight: 600; color: var(--fx-gold-fg); background: var(--fx-gold-bg); border-radius: 6px; padding: 4px 8px; align-self: flex-start; }
.fx-talk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -10px; }
.fx-talk-act { background: transparent; border: 0; color: var(--fx-navy); font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 10px; border-radius: 8px; cursor: pointer; }
.fx-talk-act:hover { background: var(--fx-sel); }
.fx-talk-act[aria-pressed="true"] { background: var(--fx-green-bg); color: var(--fx-green-fg); }
.fx-talk-act[disabled] { opacity: .55; cursor: wait; }
.fx-talk-act:focus-visible { outline: 3px solid var(--fx-focus); outline-offset: 2px; }
.fx-talk-count { font-size: 14px; color: var(--fx-muted); padding: 0 10px; }
.fx-talk-empty { border: 1px dashed #b7c2d1; border-radius: 12px; padding: 18px; font-size: 15px; line-height: 1.5; color: var(--fx-ink2); }
.fx-talk-reasons { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fx-talk-reasons legend { font-size: 15px; font-weight: 700; color: var(--fx-ink); padding: 0; margin-bottom: 4px; }
.fx-talk a:focus-visible, .fx-talk textarea:focus-visible, .fx-talk input:focus-visible, .fx-talk button:focus-visible { outline: 3px solid var(--fx-focus); outline-offset: 2px; }

/* ---------- Option 1, 9 Oct 2026 (owner pick). The chevron trail is the title. One tab row that never
   wraps, icons on every tab, chip and meta line so the words stay short, search with the icon inside,
   and filters in one sideways row on a phone so the first result shows on the first screen. ---------- */
.fx-head { align-items: center; }
.fx-head-l { gap: 0; width: 100%; }
.fx-tabs { flex-wrap: nowrap; gap: 2px; padding: 3px; background: var(--fx-pale); border-radius: 999px; width: 100%; max-width: 520px; }
.fx-tab { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: transparent; color: var(--fx-navy); padding: 0 8px; white-space: nowrap; font-size: 14px; min-height: 40px; }
.fx-tab svg { flex: 0 0 16px; }
.fx-tab .fx-tab-l { overflow: hidden; text-overflow: ellipsis; }
.fx-tab .n { font-size: 13px; font-weight: 500; opacity: .9; }
.fx-tab[aria-selected="true"] { background: var(--fx-navy); color: #fff; }
.fx-search { padding: 12px; gap: 10px; }
.fx-qrow { position: relative; }
.fx-q { flex: 1 1 260px; min-height: 46px; padding: 0 12px; }
.fx-q input { height: 44px; }
.fx-go { min-height: 46px; padding: 0 22px; }
.fx-fl-i { position: relative; gap: 0; }
.fx-fl-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--fx-navy); pointer-events: none; }
.fx-fl-i .fx-sel { padding-left: 34px; min-height: 40px; }
.fx-morebtn { padding: 8px 12px; min-width: 44px; justify-content: center; }
.fx-pill svg, .fx-card-org svg { flex: 0 0 auto; margin-right: 5px; }
.fx-card-org { display: inline-flex; align-items: center; }
@media (max-width: 899px) {
  .fx-go { position: absolute !important; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* position: relative keeps the screen-reader labels (.fx-sr) inside this scroller; without it
     they escaped to <body> and widened the page at 390px (2026-10-11). */
  .fx-frow { position: relative; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
  .fx-frow::-webkit-scrollbar { display: none; }
  .fx-frow-l, .fx-frow-r { flex-wrap: nowrap; }
  .fx-sel { max-width: none; }
  .fx { padding-bottom: 80px; }
}

/* ---------- Find work hub (owner pick, 9 Oct 2026): one question, four picture cards.
   strawberry.me's simplicity, FedM8 colors. White text on every card is 5.9:1 or better. ---------- */
.fh { display: flex; flex-direction: column; gap: 30px; max-width: 760px; padding-bottom: 96px; font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; }
.fh-q { margin: 6px 0 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: #172233; }
.fh-cards { display: flex; flex-direction: column; gap: 26px; }
.fh-card { position: relative; display: flex; align-items: center; gap: 10px; min-height: 104px; padding: 0 18px 0 132px; border-radius: 16px;
  color: #fff; text-decoration: none; box-shadow: 0 2px 6px rgba(16, 24, 40, .12); }
.fh-card:hover { color: #fff; text-decoration: none; filter: brightness(1.07); }
.fh-card:focus-visible { outline: 3px solid #2b6cb0; outline-offset: 3px; }
.fh-art { position: absolute; left: 14px; bottom: 0; width: 104px; height: 120px; display: flex; }
.fh-label { flex: 1 1 auto; font-size: 22px; line-height: 1.25; font-weight: 700; }
.fh-lock { font-size: 13px; font-weight: 700; background: #fff; color: #172233; border-radius: 999px; padding: 3px 10px; }
.fh-contracts { background: #1b3a5c; }
.fh-grants { background: #1f6a4f; }
.fh-coming { background: #8a5a12; }
.fh-forecasts { background: #2e5e73; }
@media (min-width: 900px) { .fh-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; } }