/* Review notes for Christy (v7 prototypes). Copied from prototypes/toolkit/assets/toolkit.css: red dotted
   .flag outlines carry a number; .review-notes / .review-note boxes repeat it with the question; a fixed
   toggle (added by review-notes.js) hides every flag and note together. Self-contained tokens, so it works
   on the Webflow-snapshot RFP pages and the brand.css pages alike. Delete this file, review-notes.js and
   every .review-notes / .flag to remove the system. */

:root { --rn-clay: #db2b45; --rn-ink: #272a2a; --rn-white: #ffffff; --rn-surface: #efece4; }

.review-notes { display: grid; gap: 0.6rem; margin-top: 1rem; font-family: Geist, ui-sans-serif, system-ui, sans-serif; text-align: left; }
.review-notes .review-note {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: baseline;
  max-width: 46rem; margin: 0; padding: 0.55rem 0.9rem;
  border: 2px dotted var(--rn-clay); border-radius: 0.75rem; background: var(--rn-white);
  color: var(--rn-ink); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.45; text-transform: none; text-wrap: pretty;
}
.review-note__tag { display: inline-flex; gap: 0.5rem; align-items: center; color: var(--rn-clay); font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.review-note__num, .flag::after {
  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 0.35em; border-radius: 999px;
  background: var(--rn-clay); color: var(--rn-white); font-family: Geist, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem; font-style: normal; font-weight: 600; letter-spacing: 0; line-height: 1; text-transform: none;
}
.flag { outline: 2px dotted var(--rn-clay); outline-offset: 4px; border-radius: 0.2rem; }
.flag::after { content: attr(data-flag); margin-left: 0.35em; vertical-align: 0.45em; }
.flag--block { position: relative; outline-offset: 5px; border-radius: 0; }
.flag--block::after { position: absolute; z-index: 2; top: -0.85rem; right: -0.6rem; margin: 0; vertical-align: baseline; }

.hide-notes .review-notes { display: none !important; }
.hide-notes .flag { outline: 0; }
.hide-notes .flag::after { display: none; }

.review-toggle {
  position: fixed; z-index: 1000; left: 1rem; bottom: 1rem; min-height: 2.75rem; margin: 0; padding: 0.6rem 1rem;
  border: 1.5px dashed var(--rn-clay); border-radius: 999px; background: var(--rn-white); color: var(--rn-ink);
  font: 600 0.875rem/1.2 Geist, ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 16px 45px rgb(13 24 41 / 10%); cursor: pointer;
  transition: background-color 150ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.review-toggle:hover { background: var(--rn-surface); transform: translateY(-2px); }
.review-toggle:focus-visible { outline: 3px solid var(--rn-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .review-toggle { transition: none; } .review-toggle:hover { transform: none; } }

/* Placement helpers for the RFP pages (Webflow snapshot): align with the 48rem document measure, and show
   the side-nav note in the rail on desktop and under the mobile "On this page" menu below 64rem. */
.nn-rfp-section > .review-notes { max-width: 48rem; margin: 1.5rem auto 0; }
.nn-rfp-rail .review-notes { margin-top: 1.25rem; }
.nn-rfp-rail .review-notes .review-note { padding: 0.55rem 0.75rem; }
.rn-navflag { display: grid; gap: 0.2rem; }
.rn-mobile-only { display: none; }
@media (max-width: 63.999rem) { .rn-mobile-only { display: grid; margin-top: 0; } }

/* Funded-proposal pages: the photo note sits under the photo; the round note sits inside the Sage strip. */
.fp-hero__notes { margin-top: -1rem; }
@media (min-width: 64rem) {
  .fp-hero__grid:has(.fp-hero__notes) { row-gap: 1.5rem; }
  .fp-hero__notes { grid-column: 2; margin-top: 0; }
}
.fp-strip__notes { padding-bottom: 0.875rem; }
.fp-strip__notes .review-notes { margin-top: 0; }

/* Homepage map sample. */
.hm-map + .review-notes, .hm-notes { margin-top: 1.25rem; }