/* RFP funded outcomes (v7 prototype): two sections inside the RFP document's content column, plus the
   numbers-belt outcome row. Rules are scoped under .nn-ro (the outcome sections), the belt, or a
   state the shared template cannot express yet (hero without the Application card), so the shared
   Webflow CSS keeps working untouched. Adapted from v6/assets/rfp-outcomes.css; the map now follows the
   v7 round page (static tints + dots, no tooltips, no community list). */

.nn-ro {
  --ro-paper: var(--color--paper, #fcfbf6);
  --ro-ink: var(--color--ink, #272a2a);
  --ro-moss: var(--color--moss, #54585a);
  --ro-line: var(--color--line, #e4e0d5);
  --ro-rule: #d6d1c4;
  --ro-link: var(--color--link-cyan, #047481);
  --ro-clay: var(--color--clay, #db2b45);
  font-family: var(--font--primary, Geist, ui-sans-serif, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.5;
}
.nn-ro *, .nn-ro *::before, .nn-ro *::after { box-sizing: border-box; }
.nn-ro :where(p, ul, ol, figure) { margin: 0; }
.nn-ro :where(ul, ol) { padding: 0; list-style: none; }
.nn-ro [hidden] { display: none !important; }
.nn-ro :focus-visible { outline: 3px solid var(--ro-ink); outline-offset: 3px; }
.nn-ro .nn-ro-body { min-width: 0; max-width: 48rem; margin: 2rem auto 0; }  /* same measure as .nn-rfp-rich */

/* Body links inside RFP rich text use Link Cyan (BRAND.md). The staging embed still sets #00717D; in
   Webflow this belongs on the shared nn-content-rich-text class, not on this page. */
.nn-rfp-page .nn-rfp-rich a { color: var(--color--link-cyan, #047481); }
.nn-rfp-page .nn-rfp-rich a:hover { color: var(--color--link-cyan, #047481); }

/* Hero without an Application Information card (campaign items): one column instead of an empty 24rem track. */
.nn-rfp-page .nn-rfp-hero-grid:not(:has(.nn-rfp-aside)) { grid-template-columns: minmax(0, 1fr); }

/* Numbers belt: an open RFP keeps its opportunity facts and adds the outcomes as a second row, with the
   same cells and a hairline between rows. */
.nn-rfp-page .nn-rfp-numbers-grid + .nn-rfp-numbers-grid { border-top: 1px solid #e4e0d5; }
/* The shared belt draws each cell's left border only, so the rightmost cell had no closing edge. Close it at
   tablet/desktop (Webflow's mobile belt uses 1px grid gaps and has no outer side borders). At tablet the
   grid is two columns, so the right-column cells close it too. Applies to both rows of the RFP 140 belt. */
@media (min-width: 768px) {
  .nn-rfp-page .nn-rfp-numbers-item:last-child { border-right: 1px solid #e4e0d5; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .nn-rfp-page .nn-rfp-numbers-item:nth-child(2n) { border-right: 1px solid #e4e0d5; }
}

/* ---------- Where the funding went: the round-page map ---------- */
/* The document column is already Surface, so it plays the round page's Surface panel; Paper land,
   funded states tinted light Cyan, one identical Clay dot per award. Static: no tooltips or labels. */
.nn-ro .nn-ro-map__canvas { position: relative; }
.nn-ro .nn-ro-map__canvas img { display: block; width: 100%; height: auto; }
.nn-ro .nn-ro-map__tint { position: absolute; inset: 0; width: 100%; height: 100%; fill: #b2e3e5; stroke: #7cc6cf; stroke-width: 0.9; stroke-linejoin: round; }
.nn-ro .nn-ro-map__dot { position: absolute; width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem; border: 2px solid var(--ro-paper); border-radius: 50%; background: var(--ro-clay); opacity: 0.9; }
.nn-ro .nn-ro-caption { margin-top: 1rem; color: var(--ro-moss); font-size: 1rem; line-height: 1.5; text-align: left; }
@media (max-width: 479px) {
  .nn-ro .nn-ro-map__dot { width: 0.625rem; height: 0.625rem; margin: -0.3125rem 0 0 -0.3125rem; border-width: 1.5px; }
}

/* ---------- Funded proposals: privacy line, one quiet search, flat list ---------- */
.nn-ro .nn-ro-note { max-width: 44rem; margin-bottom: 1.5rem; color: var(--ro-moss); font-size: 1.125rem; line-height: 1.6; }
.nn-ro .nn-ro-notes { margin: -0.5rem 0 1.5rem; }

/* One search field, no panel: a hairline underline (#8a857a is 3.1:1 on Surface, so the field stays
   identifiable), a small Moss search icon, and a Moss placeholder that is also the accessible name.
   Focus thickens the underline to 2px Ink and darkens the icon. */
.nn-ro .nn-ro-tools { display: grid; gap: 0.375rem; margin-bottom: 0.5rem; }
.nn-ro .nn-ro-search { position: relative; max-width: 26rem; }
.nn-ro .nn-ro-search__icon { position: absolute; top: 50%; left: 0; width: 1.125rem; height: 1.125rem; transform: translateY(-50%); fill: none; stroke: var(--ro-moss); stroke-width: 1.75; stroke-linecap: round; pointer-events: none; transition: stroke 150ms ease; }
.nn-ro .nn-ro-search__input {
  display: block; width: 100%; min-height: 2.75rem; margin: 0; border: 0; border-bottom: 1px solid #8a857a; border-radius: 0;
  background: transparent; padding: 0.5rem 0.25rem 0.5rem 1.875rem; color: var(--ro-ink);
  font: inherit; font-size: 1rem; line-height: 1.5; -webkit-appearance: none; appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.nn-ro .nn-ro-search__input::placeholder { color: var(--ro-moss); opacity: 1; }
.nn-ro .nn-ro-search__input::-webkit-search-decoration { -webkit-appearance: none; }
.nn-ro .nn-ro-search__input:focus, .nn-ro .nn-ro-search__input:focus-visible { outline: none; border-bottom-color: var(--ro-ink); box-shadow: 0 1px 0 0 var(--ro-ink); }
.nn-ro .nn-ro-search:focus-within .nn-ro-search__icon { stroke: var(--ro-ink); }
.nn-ro .nn-ro-count { color: var(--ro-moss); font-size: 1rem; line-height: 1.4; }

/* Rows: hairline dividers in Line only, no heavy top rule; name (Link Cyan, underlined), City, ST in
   Moss, amount right-aligned in Ink. */
.nn-ro .nn-ro-list { border-top: 0; }
.nn-ro .nn-ro-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amount" "city amount"; gap: 0.125rem 1rem; border-bottom: 1px solid var(--ro-line); padding-block: 0.8125rem; }
.nn-ro .nn-ro-row__name { grid-area: name; justify-self: start; color: var(--ro-link); font-weight: 500; line-height: 1.4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; overflow-wrap: anywhere; }
.nn-ro .nn-ro-row__name:hover { color: var(--ro-link); text-decoration-thickness: 2px; }
.nn-ro .nn-ro-row__city { grid-area: city; color: var(--ro-moss); line-height: 1.4; }
.nn-ro .nn-ro-row__amount { grid-area: amount; color: var(--ro-ink); font-weight: 500; line-height: 1.4; text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) {
  .nn-ro .nn-ro-row { grid-template-columns: minmax(0, 1fr) minmax(7rem, 10.5rem) 5.75rem; grid-template-areas: "name city amount"; align-items: baseline; gap: 1rem; }
}
.nn-ro .nn-ro-empty { border-bottom: 1px solid var(--ro-line); padding-block: 1rem; color: var(--ro-moss); }

/* "Show more" (added by rfp-outcomes.js): a quiet text button with a chevron, no border or fill.
   14px uppercase button label (BRAND.md); 2.75rem tall for the target size. */
.nn-ro .nn-ro-more {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-top: 0.5rem;
  border: 0; background: transparent; padding: 0.5rem 0;
  color: var(--ro-ink); font: 600 0.875rem/1.2 var(--font--primary, Geist, ui-sans-serif, system-ui, sans-serif);
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  text-decoration: underline transparent; text-decoration-thickness: 1px; text-underline-offset: 0.35em;
  transition: text-decoration-color 150ms ease;
}
.nn-ro .nn-ro-more svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms ease; }
.nn-ro .nn-ro-more:hover { text-decoration-color: currentColor; }
.nn-ro .nn-ro-more:hover svg { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) {
  .nn-ro .nn-ro-search__input, .nn-ro .nn-ro-search__icon, .nn-ro .nn-ro-more, .nn-ro .nn-ro-more svg { transition: none; }
}

/* "See all funded proposals →": an ordinary Link Cyan body link. */
.nn-ro .nn-ro-all { margin-top: 1.5rem; }
.nn-ro .nn-ro-link { color: var(--ro-link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.nn-ro .nn-ro-link:hover { color: var(--ro-link); text-decoration-thickness: 2px; }