@import url("design-refinement.css?v=20260904-1");

:root {
  --mapfix-paper: #f1eadf;
  --mapfix-surface: #fbfaf5;
  --mapfix-surface-sage: #dfe4d8;
  --mapfix-ink: #253b36;
  --mapfix-ink-soft: #5e6e65;
  --mapfix-primary: #36584f;
  --mapfix-primary-text: #46675c;
  --mapfix-terracotta: #b96f47;
  --mapfix-terracotta-text: #8b4d38;
  --mapfix-border: rgba(37, 59, 54, .2);
  --mapfix-shadow: 5px 6px 0 rgba(53, 70, 55, .09);
  --mapfix-radius-card: 5px;
  --mapfix-radius-control: 3px;
  --mapfix-focus: #46675c;
  --mapfix-font-display: "Funnel Display", sans-serif;
  --mapfix-font-body: "DM Sans", sans-serif;
  --mapfix-font-meta: "IBM Plex Mono", monospace;
}

html { scroll-behavior: smooth; }
body { color: var(--mapfix-ink); background: var(--mapfix-paper); font-family: var(--mapfix-font-body); }
body.menu-open { overflow: hidden; }
main:focus { outline: none; }

/* Clip horizontal overflow without creating a scroll container around the sticky header. */
html,
html body,
html body .site-shell {
  overflow-x: clip !important;
  overflow-y: visible;
}
html body.menu-open { overflow: hidden !important; }

/* Adapted from 21st.dev's View Transition and Transition Panel motion patterns. */
@view-transition { navigation: auto; }
.site-header {
  position: sticky !important;
  z-index: 40 !important;
  top: 0 !important;
  view-transition-name: mapfix-header;
}

html body.home-video-page .site-shell .site-header {
  position: fixed !important;
}
main { view-transition-name: mapfix-page; }

::view-transition-group(mapfix-header) {
  z-index: 100;
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(mapfix-header),
::view-transition-new(mapfix-header) { animation: none; }
::view-transition-group(mapfix-page) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(mapfix-page) { animation: mapfix-page-out 180ms ease both; }
::view-transition-new(mapfix-page) { animation: mapfix-page-in 360ms cubic-bezier(.22, 1, .36, 1) both; }

@keyframes mapfix-page-out {
  to { opacity: 0; transform: translateY(-8px) scale(.995); }
}
@keyframes mapfix-page-in {
  from { opacity: 0; transform: translateY(12px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@supports not (view-transition-name: mapfix-page) {
  body { animation: mapfix-page-in 360ms cubic-bezier(.22, 1, .36, 1) both; }
  html.is-page-leaving body { animation: mapfix-page-out 150ms ease both; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 1ms !important; }
  body, html.is-page-leaving body { animation: none !important; }
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  border-radius: var(--mapfix-radius-control);
  color: var(--mapfix-surface);
  background: var(--mapfix-ink);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--mapfix-focus) !important;
  outline-offset: 3px !important;
}
:where(a, button, [role="button"]) { touch-action: manipulation; }

.main-nav a[aria-current="page"]:not(.nav-account) {
  color: var(--mapfix-ink);
  box-shadow: inset 0 -2px 0 var(--mapfix-primary);
}
.nav-account[aria-current="page"] { box-shadow: 0 0 0 3px rgba(70, 103, 92, .28); }
.main-nav .nav-account {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 6px 14px 6px 6px;
  border: 1px solid rgba(37, 59, 54, .2);
  border-radius: 13px;
  color: var(--mapfix-ink) !important;
  background: rgba(223, 228, 216, .76) !important;
  box-shadow: 0 5px 0 rgba(37, 59, 54, .08);
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  visibility: hidden;
}
.main-nav .nav-account.nav-account--ready { visibility: visible; }
.main-nav .nav-account:hover {
  border-color: rgba(37, 59, 54, .34);
  background: var(--mapfix-surface) !important;
  box-shadow: 0 7px 0 rgba(37, 59, 54, .1);
  transform: translateY(-2px);
}
.nav-account-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  color: var(--mapfix-surface);
  background: var(--mapfix-primary);
}
.nav-account-avatar svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav-account-copy { min-width: 70px; display: grid; gap: 4px; line-height: 1; }
.nav-account-copy small { color: var(--mapfix-ink-soft); font: 600 9px/1 var(--mapfix-font-meta); letter-spacing: .16em; }
.nav-account-copy strong { max-width: 120px; overflow: hidden; color: var(--mapfix-ink); font: 700 14px/1 var(--mapfix-font-body); text-overflow: ellipsis; white-space: nowrap; }
.nav-account--signed-in .nav-account-avatar { background: var(--mapfix-terracotta); }
.nav-account-menu-wrap { position: relative; flex: 0 0 auto; }
.nav-account-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 10px);
  right: 0;
  width: 210px;
  padding: 7px;
  border: 1px solid var(--mapfix-border);
  border-radius: 11px;
  background: var(--mapfix-surface);
  box-shadow: 0 14px 34px rgba(37, 59, 54, .18);
}
.nav-account-menu[hidden] { display: none; }
.nav-account-menu a,
.nav-account-menu button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  color: var(--mapfix-ink);
  background: transparent;
  font: 700 14px/1 var(--mapfix-font-body);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
.nav-account-menu a:hover,
.nav-account-menu button:hover { background: var(--mapfix-surface-sage); }
.main-nav .nav-account-menu a[aria-current="page"] { box-shadow: none; }
.nav-account-menu svg { width: 19px; height: 19px; fill: none; stroke: var(--mapfix-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-account-menu .nav-notification-badge {
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--mapfix-surface);
  background: var(--mapfix-terracotta);
  font: 800 11px/1 var(--mapfix-font-body);
  font-variant-numeric: tabular-nums;
}
.nav-account-menu .nav-notification-badge[hidden] { display: none; }
.nav-account-menu .nav-account-signout {
  margin-top: 6px;
  border-top: 1px solid var(--mapfix-border);
  border-radius: 0 0 7px 7px;
  color: var(--mapfix-terracotta-text);
}
.nav-account-menu .nav-account-signout svg { stroke: currentColor; }
.nav-account-menu .nav-account-signout:hover { background: rgba(185, 111, 71, .1); }
.nav-account-menu .nav-account-signout:disabled { cursor: wait; opacity: .6; }
.username-dialog {
  width: min(92vw, 470px);
  padding: 0;
  border: 1px solid var(--mapfix-border);
  border-radius: 16px;
  color: var(--mapfix-ink);
  background: var(--mapfix-surface);
  box-shadow: 0 28px 80px rgba(37, 59, 54, .28);
}
.username-dialog::backdrop { background: rgba(25, 38, 34, .48); backdrop-filter: blur(3px); }
.username-dialog-card { padding: 28px; }
.username-dialog header { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.username-dialog header span { color: var(--mapfix-terracotta-text); font: 600 10px/1 var(--mapfix-font-meta); letter-spacing: .14em; }
.username-dialog h2 { margin: 8px 0 0; font: 800 34px/.95 var(--mapfix-font-display); letter-spacing: -.045em; }
.username-dialog-close { width: 44px; height: 44px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid var(--mapfix-border); border-radius: 50%; color: var(--mapfix-ink); background: transparent; cursor: pointer; }
.username-dialog-close svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.username-dialog label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; }
.username-dialog input { width: 100%; min-height: 54px; padding: 0 14px; border: 1px solid var(--mapfix-border); border-radius: 7px; color: var(--mapfix-ink); background: #f7f3eb; font: 600 16px/1 var(--mapfix-font-body); }
.username-dialog-message { min-height: 20px; margin: 9px 0 13px; color: var(--mapfix-terracotta-text); font-size: 12px; }
.username-dialog footer { display: flex; justify-content: flex-end; gap: 9px; }
.username-dialog footer button { min-height: 46px; padding: 0 16px; border-radius: 7px; font-weight: 700; cursor: pointer; }
.username-dialog-cancel { border: 1px solid var(--mapfix-border); color: var(--mapfix-ink); background: transparent; }
.username-dialog-save { border: 1px solid var(--mapfix-primary); color: var(--mapfix-surface); background: var(--mapfix-primary); }
.username-dialog-save:disabled { opacity: .62; cursor: wait; }
.main-nav > .nav-dev {
  position: relative !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 6px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--mapfix-primary-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 700 10px/1 var(--mapfix-font-body) !important;
  letter-spacing: .105em !important;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease;
}
.nav-utility-divider {
  width: 1px;
  height: 30px;
  flex: 0 0 auto;
  margin-left: clamp(8px, 1.25vw, 20px);
  background: var(--mapfix-border);
}
.nav-utility-divider:has(+ .nav-dev[hidden]) { display: none; }
.main-nav > .nav-dev::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--mapfix-primary) !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}
.main-nav > .nav-dev:hover::after,
.main-nav > .nav-dev:focus-visible::after,
.main-nav > .nav-dev.nav-dev--active::after { transform: scaleX(1); }
.main-nav > .nav-dev.nav-dev--active {
  gap: 8px;
  padding: 0 12px !important;
  border: 1px solid rgba(139, 77, 56, .42) !important;
  border-radius: 999px !important;
  color: var(--mapfix-terracotta-text) !important;
  background: rgba(185, 111, 71, .12) !important;
  box-shadow: 0 3px 0 rgba(139, 77, 56, .1) !important;
}
.main-nav > .nav-dev.nav-dev--active::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--mapfix-terracotta);
  box-shadow: 0 0 0 3px rgba(185, 111, 71, .16);
}
.main-nav > .nav-dev.nav-dev--active::after { display: none; }
.main-nav > .nav-dev[hidden] { display: none !important; }
.main-nav > .nav-admin-review[hidden] { display: none !important; }
.assignments-original-hero h1 em { color: var(--mapfix-primary-text) !important; }
.impact-original-hero h1 em { color: #f2d5c3 !important; }
.page-page--about .page-hero-copy h1 em { color: var(--mapfix-terracotta-text) !important; }
.wordmark,
.main-nav > a,
.main-nav > button,
.text-link,
.all-missions-link,
.contact-email-link { min-height: 44px; display: inline-flex; align-items: center; }
.eyebrow { color: var(--mapfix-terracotta-text) !important; }

.menu-button {
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--mapfix-border);
  border-radius: var(--mapfix-radius-control);
  color: var(--mapfix-ink);
  background: transparent;
  cursor: pointer !important;
}
.menu-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@media (max-width: 760px) {
  .nav-utility-divider { display: none; }
  .nav-account-menu-wrap { width: fit-content; margin-top: 20px; }
  .nav-account { margin-top: 0 !important; }
  .nav-account-menu { top: calc(100% + 8px); right: auto; left: 0; }
  .main-nav > a.nav-dev,
  .main-nav > button.nav-dev {
    width: 100%;
    min-height: 52px;
    justify-content: flex-start;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--mapfix-border) !important;
    font-size: 14px !important;
  }
  .main-nav > .nav-dev.nav-dev--active {
    width: fit-content;
    min-height: 44px;
    margin: 8px 0;
    padding: 0 14px !important;
    border-bottom: 1px solid rgba(139, 77, 56, .42) !important;
  }
}

.button,
.contact-submit,
.impact-map-link,
.start-button,
.claimed-status-button,
.assignment-filter,
.create-official-assignment {
  min-height: 48px;
  border-radius: var(--mapfix-radius-control) !important;
  font-family: var(--mapfix-font-body) !important;
  font-weight: 700;
}
.button--signal,
.button--ink,
.contact-submit {
  color: var(--mapfix-surface) !important;
  background: var(--mapfix-primary) !important;
}
.button:hover,
.contact-submit:hover {
  color: var(--mapfix-surface) !important;
  background: var(--mapfix-ink) !important;
  transform: translateY(-2px);
}
.text-link { color: var(--mapfix-primary-text); }

.site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-home-link { justify-self: end; }

.page-detail-card,
.completed-project-card,
.assignment-card,
.prompt-step,
.mission-detail,
.contact-connect-shell {
  border-radius: var(--mapfix-radius-card) !important;
}
.assignment-card,
.completed-project-card { box-shadow: var(--mapfix-shadow) !important; }
.project-actions span { cursor: default; }

.assignment-info-button,
.edit-assignment-button,
.assignment-info-dialog header button,
.workflow-close { min-width: 44px !important; width: 44px !important; min-height: 44px !important; height: 44px !important; }
.assignment-info-button { right: 30px !important; }
.edit-assignment-button { right: 82px !important; }

.assignment-info-dialog,
.assignment-workflow-dialog,
.official-assignment-dialog {
  border: 1px solid var(--mapfix-border) !important;
  border-radius: 16px !important;
  color: var(--mapfix-ink) !important;
  background: var(--mapfix-surface) !important;
  box-shadow: 0 28px 80px rgba(37, 59, 54, .25) !important;
}
.workflow-dialog-header,
.official-dialog-header,
.assignment-info-dialog header { background: var(--mapfix-surface-sage) !important; }
.workflow-step-panel,
.official-dialog-body,
.assignment-info-body,
.official-dialog-footer { background: var(--mapfix-surface) !important; }
.workflow-section-label,
.official-field > span:first-child,
.assignment-info-body section > span {
  color: var(--mapfix-terracotta-text) !important;
  font-family: var(--mapfix-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}
.workflow-coordinate-row input,
.official-field input,
.official-field select,
.official-field textarea,
.assignment-filter-panel input,
.assignment-filter-panel select {
  min-height: 52px;
  border-radius: var(--mapfix-radius-control) !important;
  color: var(--mapfix-ink) !important;
  background: #f7f3eb !important;
  font-family: var(--mapfix-font-body) !important;
}
.workflow-next-button,
.official-dialog-footer button[type="submit"] { color: var(--mapfix-surface) !important; background: var(--mapfix-primary) !important; border-color: var(--mapfix-primary) !important; }
.workflow-secondary-button,
.official-dialog-footer button[type="button"] { color: var(--mapfix-ink) !important; background: transparent !important; border-color: var(--mapfix-border) !important; }
.workflow-upload-button { border-radius: var(--mapfix-radius-control) !important; color: var(--mapfix-surface) !important; background: var(--mapfix-primary) !important; }
.workflow-dropzone { border-color: rgba(70, 103, 92, .38) !important; background: #f7f3eb !important; }

.contact-field { display: grid; gap: 8px; min-width: 0; }
.contact-field--wide { grid-column: 1 / -1; }
.contact-field-label { color: var(--mapfix-ink); font-size: 13px; font-weight: 700; }
.contact-field input,
.contact-field textarea { width: 100%; }
.contact-form-note { grid-column: 1 / -1; margin: 0; color: var(--mapfix-ink-soft); font-size: 13px; line-height: 1.5; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { opacity: .65; }
.account-auth-status { color: var(--mapfix-ink-soft); font-weight: 600; text-decoration: none; border: 0; }
.account-secondary-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--mapfix-primary-text); font-weight: 700; }

.assignment-empty-state {
  padding: 30px;
  border: 1px dashed var(--mapfix-border);
  border-radius: var(--mapfix-radius-card);
  color: var(--mapfix-ink-soft);
  background: rgba(251, 250, 245, .58);
  text-align: center;
}

.assignment-card .start-button {
  position: relative;
  width: 100%;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 64px 0 22px;
  overflow: hidden;
  border: 1px solid #29483f !important;
  border-radius: 8px !important;
  color: var(--mapfix-surface) !important;
  background: var(--mapfix-primary) !important;
  box-shadow: 0 4px 0 rgba(37, 59, 54, .24), 0 12px 24px rgba(37, 59, 54, .13);
  font-family: var(--mapfix-font-body) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.start-button-label { position: relative; z-index: 1; }
.start-button-icon {
  position: absolute;
  right: 11px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(251, 250, 245, .3);
  border-radius: 6px;
  background: rgba(251, 250, 245, .1);
  transition: transform 180ms ease, background-color 180ms ease;
}
.start-button-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.assignment-card .start-button:hover:not(:disabled) {
  background: #2f5047 !important;
  box-shadow: 0 6px 0 rgba(37, 59, 54, .23), 0 18px 30px rgba(37, 59, 54, .17);
  transform: translateY(-2px);
}
.assignment-card .start-button:hover:not(:disabled) .start-button-icon { background: rgba(251, 250, 245, .16); transform: translateX(2px); }
.assignment-card .start-button:active:not(:disabled) { box-shadow: 0 2px 0 rgba(37, 59, 54, .23); transform: translateY(2px); }
.assignment-card .start-button:disabled { box-shadow: none; cursor: not-allowed; opacity: .48; }

.not-found-section { min-height: 70vh; display: grid; place-items: center; }
.not-found-content { display: grid; justify-items: center; gap: 30px; text-align: center; }
.not-found-content .eyebrow { margin: 0; }
.not-found-content h1 { margin: 14px 0 0; }
.not-found-content > p:not(.eyebrow) { max-width: 640px; margin: 0; color: var(--mapfix-ink-soft); font-size: 18px; line-height: 1.6; }
.not-found-actions { display: flex; align-items: center; justify-content: center; margin-top: 12px; }

@media (max-width: 760px) {
  .header-inner { position: relative; }
  .main-nav {
    position: fixed !important;
    z-index: 39;
    inset: 69px 0 auto !important;
    display: flex !important;
    max-height: calc(100vh - 69px);
    flex-direction: column;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 16px 20px 24px !important;
    overflow-y: auto;
    border-bottom: 1px solid var(--mapfix-border);
    background: var(--mapfix-paper) !important;
    box-shadow: 0 18px 36px rgba(37, 59, 54, .14);
    transform: translateY(-125%);
    visibility: hidden;
    transition: transform 200ms ease, visibility 200ms;
  }
  .main-nav.main-nav--open { transform: translateY(0); visibility: visible; }
  .main-nav > a:not(.nav-account),
  .main-nav > button { min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--mapfix-border); font-family: var(--mapfix-font-body) !important; font-size: 14px !important; text-align: left; }
  .main-nav .nav-account { min-height: 52px; align-self: stretch; justify-content: flex-start; margin-top: 16px; }
  .assignment-tabs { width: 100% !important; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; }
  .assignment-tabs::-webkit-scrollbar { display: none; }
  .assignment-tabs button { min-height: 48px !important; flex: 0 0 auto; }
  .assignments-main-head { align-items: stretch !important; }
  .assignment-card { min-height: 0 !important; }
  .page-hero-copy h1,
  .assignments-original-hero h1,
  .impact-original-hero h1,
  .how-original-hero h1 { font-size: clamp(48px, 14vw, 62px) !important; }
  h2 { text-wrap: balance; }
  .contact-form { grid-template-columns: 1fr !important; }
  .contact-field--wide { grid-column: auto; }
  .contact-connect-copy h2 { font-size: clamp(48px, 15vw, 62px) !important; }
  .not-found-actions { flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Editorial finish: preserve the field-journal character and remove generic SaaS polish. */
.nav-account,
.button,
.assignment-filter,
.propose-assignment,
.account-action,
.notifications-header-actions button,
.notifications-filters button,
.notification-action,
.notification-unread-toggle,
.admin-review-status button,
.admin-review-form-actions button,
.assignment-detail-actions button,
.assignment-detail-actions a,
.assignment-detail-resources a,
.assignment-owner-dialog-actions button,
.proposal-dialog-footer button {
  border-radius: var(--mapfix-radius-control) !important;
}

.page-detail-card,
.assignment-card,
.completed-project-card,
.mission-detail,
.contact-connect-shell,
.account-metric-grid,
.account-insight-card,
.notification-card,
.admin-review-card,
.assignment-detail-status,
.assignment-detail-copy,
.assignment-detail-image,
.assignment-discussion,
.assignment-reply,
.assignment-reply-form,
.assignment-owner-dialog,
.proposal-dialog,
.workflow-section-card,
.workflow-upload-section,
.workflow-file-summary,
.workflow-review-card,
.workflow-dropzone {
  border-radius: var(--mapfix-radius-card) !important;
}

.assignment-card,
.completed-project-card,
.notification-card,
.admin-review-card,
.account-metric-grid {
  box-shadow: none !important;
}

.mission-detail,
.contact-connect-shell,
.account-insight-card {
  box-shadow: var(--mapfix-shadow) !important;
}

.notification-card:hover,
.admin-review-card:has(.admin-review-card-toggle:hover),
.admin-review-card:has(.admin-review-card-toggle[aria-expanded="true"]) {
  border-color: rgba(37, 59, 54, .48) !important;
  box-shadow: inset 4px 0 0 var(--mapfix-primary) !important;
}

.assignment-info-dialog,
.assignment-workflow-dialog,
.official-assignment-dialog,
.assignment-owner-dialog,
.proposal-dialog {
  border-radius: 6px !important;
  box-shadow: 9px 11px 0 rgba(37, 59, 54, .18) !important;
}

.workflow-steps button,
.workflow-coordinate-row input,
.workflow-coordinate-row a,
.workflow-next-button,
.workflow-secondary-button,
.workflow-upload-button,
.official-field input,
.official-field select,
.official-field textarea,
.proposal-field input,
.proposal-field select,
.proposal-field textarea {
  border-radius: var(--mapfix-radius-control) !important;
}

.assignment-card .start-button {
  border-radius: var(--mapfix-radius-control) !important;
  box-shadow: 0 3px 0 rgba(37, 59, 54, .24) !important;
  transition: background-color 160ms ease, border-color 160ms ease !important;
}
.assignment-card .start-button:hover:not(:disabled),
.assignment-card .start-button:active:not(:disabled) {
  box-shadow: 0 3px 0 rgba(37, 59, 54, .24) !important;
  transform: none !important;
}
.assignment-card .start-button:hover:not(:disabled) .start-button-icon {
  transform: none !important;
}

.assignment-card,
.completed-project-card,
.notification-card,
.admin-review-card,
.account-insight-card {
  transition: border-color 160ms ease, background-color 160ms ease !important;
}

.assignment-detail-hero { border-radius: 5px 5px 0 0 !important; }
.assignment-detail-grid { border-radius: 0 0 5px 5px !important; }

.admin-review-card-details dl > div,
.admin-review-evidence figure,
.admin-review-form,
.notification-icon,
.assignment-reply-avatar,
.assignment-reply-form textarea {
  border-radius: var(--mapfix-radius-control) !important;
}

@media (max-width: 760px) {
  .main-nav { box-shadow: 0 5px 0 rgba(37, 59, 54, .1) !important; }
  .assignment-workflow-dialog,
  .assignment-info-dialog,
  .submission-viewer-dialog,
  .proposal-dialog { border-radius: 5px !important; }
}

/* Keep the homepage accessibility corrections last in the cascade. */
:root {
  --mapfix-paper: #f3f5f1;
  --mapfix-surface: #ffffff;
  --mapfix-surface-sage: #dce4dd;
  --mapfix-ink-soft: #485b53;
  --mapfix-primary-text: #36584f;
}
html body { background: #f3f5f1 !important; }
html body .site-shell,
html body .educators-section { overflow: visible !important; }
html body .site-header { background: rgba(245, 241, 233, .96) !important; }
html body .main-nav > a:not(.nav-account),
html body .nav-dev,
html body .section-marker,
html body .eyebrow,
html body .photo-caption,
html body .impact-stat span,
html body .mission-location small,
html body .project-card-top,
html body .project-country,
html body .footer-bottom,
html body .nav-account-copy small {
  font-size: 12px !important;
  letter-spacing: .045em !important;
  line-height: 1.35 !important;
}
html body .main-nav > a:not(.nav-account),
html body .nav-dev { padding-block: 8px !important; }
html body .nav-account-copy small,
html body .impact-stat span,
html body .impact-stat p,
html body .impact-foot,
html body .mission-location small,
html body .section-marker,
html body .section-marker b { color: #253b36 !important; }
html body .photo-caption { padding: 6px 0 6px 14px; background: rgba(37,59,54,.9); }
html body .impact-section,
html body .completed-projects-section { background: #dce4dd !important; }
html body .story-location { order: -1; margin: 0 0 18px; }
html body .site-footer,
html body .site-footer .footer-bottom,
html body .site-footer .footer-bottom a,
html body .site-footer .wordmark-label em { color: #fff !important; }
html body .site-footer .wordmark-label b,
html body .site-footer a { color: #e5eee9 !important; }
html body .site-footer .footer-bottom > span {
  font-family: var(--mapfix-font-body) !important;
  font-weight: 500;
}
@media (max-width: 760px) {
  html body .site-shell { overflow-x: clip !important; }
  html body .main-nav > a:not(.nav-account),
  html body .nav-dev { font-size: 14px !important; }
}

html body {
  --signal: #36584f;
  --ink-soft: #485b53;
}
html body .site-header {
  background: rgba(245, 241, 233, .96) !important;
  backdrop-filter: none !important;
}
html body .wordmark-label b,
html body .wordmark-label em,
html body .nav-account-copy small,
html body .nav-account-copy strong { color: #253b36 !important; opacity: 1 !important; }
html body .main-nav .nav-account { background: #dce4dd !important; }
html body .mission-detail dt,
html body .nav-account-menu a,
html body .nav-account-menu button {
  min-height: 44px;
  padding-block: 8px !important;
  color: #253b36 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  letter-spacing: .035em !important;
}
html body .username-dialog header span {
  font-size: 12px !important;
  line-height: 1.35 !important;
  letter-spacing: .045em !important;
}
html body .process-guide {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
html body .text-link {
  padding-top: 5px;
}
html body .impact-head > p {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
html body .button {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
html body .community-cta {
  min-height: 56px;
  padding-inline: 22px !important;
  border: 1px solid #253b36 !important;
  box-shadow: 0 4px 0 rgba(37, 59, 54, .22) !important;
  cursor: pointer;
}
html body .community-cta:hover {
  border-color: #8b4d38 !important;
  background: #8b4d38 !important;
  box-shadow: 0 4px 0 rgba(37, 59, 54, .22) !important;
}
html body .community-cta span {
  margin-left: auto;
  font-size: 18px;
  transition: transform 180ms ease;
}
html body .community-cta:hover span { transform: translateX(3px); }
html body .educators-map-lines,
html body .educators-map-lines::before,
html body .educators-map-lines::after {
  pointer-events: none;
}

/* Assignments audit remediation — scoped to the rendered assignments workspace. */
.assignments-original-page .assignment-tabs button,
.assignments-original-page .assignment-filter,
.assignments-original-page .assignment-filter-panel label,
.assignments-original-page .official-field > span:first-child,
.assignments-original-page .proposal-field > span:first-child,
.assignments-original-page .proposal-dialog-kicker,
.assignments-original-page .assignment-owner-dialog-kicker,
.assignments-original-page .workflow-dropzone small,
.assignments-original-page .assignment-card-top,
.assignments-original-page .assignment-card-post-meta,
.assignments-original-page .assignment-country {
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: .04em !important;
}
.assignments-original-page .assignment-tabs button,
.assignments-original-page .assignment-filter {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.assignments-original-page .proposal-dialog-kicker,
.assignments-original-page .assignment-owner-dialog-kicker,
.assignments-original-page .official-field > span:first-child,
.assignments-original-page .proposal-field > span:first-child {
  letter-spacing: .05em !important;
}
.assignments-original-page .assignments-original-hero-inner > div:last-child {
  background: #f3f5f1 !important;
  backdrop-filter: none !important;
}
.assignments-original-page .assignments-original-hero h1,
.assignments-original-page .assignments-original-hero h1 em,
.assignments-original-page .assignments-original-hero-inner > div:last-child > p {
  color: #253b36 !important;
}
.assignments-page .proposal-dialog-header p,
.assignments-page .proposal-image-dropzone small,
.assignments-page .assignment-owner-dialog-kicker {
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: .04em !important;
}
.assignments-page dialog :is(p, span, small, label) {
  letter-spacing: .04em !important;
}
.assignments-page #developer-mode-toggle,
.assignments-page #create-official-assignment,
.assignments-page .propose-assignment,
.assignments-page .propose-assignment-button {
  letter-spacing: .04em !important;
}

/* How-to audit remediation — readable metadata and restrained editorial measure. */
.how-to-edit-page .page-detail-card > span,
.how-to-edit-page .prompt-step-header span,
.how-to-edit-page .error-step-header span,
.how-to-edit-page .participate-list article > span,
.how-to-edit-page .how-image-button span {
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: .035em !important;
}
.how-to-edit-page p {
  max-width: 44ch !important;
}
.how-to-edit-page .how-image-button {
  overflow: visible !important;
}
.how-to-edit-page .how-image-button img {
  border-radius: inherit;
  clip-path: inset(0 round 8px);
}
.how-to-edit-page .image-lightbox {
  box-shadow: 0 20px 32px rgba(15, 32, 28, .38) !important;
}
.how-to-page .username-dialog,
.how-to-page .image-lightbox {
  box-shadow: 0 8px 8px rgba(15, 32, 28, .28) !important;
}

/* MapFix product-system contract: 8px rhythm, calm motion, one component language. */
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --shadow-card: 0 8px 24px rgba(37, 59, 54, .08);
  --shadow-dialog: 0 24px 64px rgba(37, 59, 54, .22);
  --mapfix-radius-card: var(--radius-sm);
  --mapfix-radius-control: var(--radius-sm);
  --mapfix-shadow: var(--shadow-card);
}

html body {
  font-family: var(--mapfix-font-body);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
html body :is(h1, h2, h3) {
  margin-block-start: 0;
  color: var(--mapfix-ink);
  font-family: var(--mapfix-font-display);
}
html body p { text-wrap: pretty; }
html body :is(.content-grid, .header-inner) { max-width: 1360px; }

html body :is(
  .button,
  button,
  input,
  select,
  textarea,
  .nav-account,
  .nav-account-avatar,
  .nav-account-menu,
  .nav-account-menu a,
  .mission-detail,
  .assignment-card,
  .completed-project-card,
  .page-detail-card,
  .assignment-detail-hero,
  .assignment-detail-grid,
  .account-metric,
  .account-insight-card,
  .notification-card,
  .admin-review-card
) { border-radius: var(--radius-sm) !important; }

html body :is(input, select, textarea) {
  padding: var(--space-2) !important;
  border-color: var(--mapfix-border) !important;
  color: var(--mapfix-ink);
  background: var(--mapfix-surface);
  font: 500 16px/1.5 var(--mapfix-font-body) !important;
}
html body :is(input, select) { min-height: 48px; }
html body textarea { min-height: 120px; resize: vertical; }
html body :is(input, select, textarea)::placeholder { color: var(--mapfix-ink-soft); opacity: .72; }

html body :is(
  .assignment-card,
  .completed-project-card,
  .page-detail-card,
  .account-metric,
  .account-insight-card,
  .notification-card,
  .admin-review-card
) {
  border-color: var(--mapfix-border) !important;
  box-shadow: var(--shadow-card) !important;
}

html body :is(dialog, .username-dialog, .image-lightbox) {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dialog) !important;
}

html body :is(.button, button, [role="button"]) {
  transition-duration: 160ms !important;
  transition-property: color, background-color, border-color, box-shadow, opacity !important;
  transition-timing-function: ease !important;
}
html body :is(.button, button, [role="button"]):hover { transform: none !important; }
html body :is(button, .button)[aria-busy="true"] { cursor: progress !important; }
html body :is(button, .button)[aria-busy="true"]::after {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 auto;
  margin-left: var(--space-1);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: mapfix-spin 720ms linear infinite;
}
@keyframes mapfix-spin { to { transform: rotate(1turn); } }

html body :is(button, .button):disabled,
html body :is(button, .button)[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .56;
}

@media (max-width: 760px) {
  html body :is(.content-grid, .header-inner) { width: calc(100% - 32px); }
  html body :is(dialog, .username-dialog, .image-lightbox) { border-radius: var(--radius-sm) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.button, button, [role="button"]) { transition: none !important; }
  html body :is(button, .button)[aria-busy="true"]::after { animation-duration: 1.4s; }
}

/* Legacy page bundles duplicated this decorative label. Keep it disabled globally. */
html body .mission-detail::after {
  display: none !important;
  content: none !important;
}

.site-footer .footer-legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-left: auto;
  color: rgba(255,255,255,.8);
  font: 600 12px/1.4 var(--mapfix-font-body);
  letter-spacing: normal;
  text-transform: none;
}
.site-footer .footer-legal-links a { color: inherit !important; cursor: pointer !important; }
.site-footer .footer-legal-links a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .footer-legal-links span { color: rgba(255,255,255,.55); }
@media (max-width: 760px) {
  .site-footer .footer-legal-links { width: 100%; justify-content: flex-start; margin: var(--space-2) 0 0; }
}

/* Shared forest-green accents: carry the brand color through every route without changing page copy or layout. */
html body .main-nav > a[aria-current="page"]:not(.nav-account) {
  color: #36584f !important;
  box-shadow: inset 0 -3px 0 #36584f !important;
}
html body :is(.section-marker, .section-marker b, .eyebrow) { color: #36584f !important; }
html body :is(.text-link, .all-missions-link, .contact-email-link) { color: #36584f !important; }
html body :is(.text-link, .all-missions-link, .contact-email-link):hover { color: #253b36 !important; }
html body .impact-map-link,
html body .assignments-original-page .assignment-tabs button.active.official {
  color: #fff !important;
  background: #36584f !important;
  border-color: #36584f !important;
}
html body .assignments-original-page .assignment-filter {
  color: #36584f !important;
  border-color: #36584f !important;
  background: transparent !important;
}
/* Keep the footer email visibly actionable on every page. */
html body .site-footer a[href^="mailto:"] {
  cursor: pointer !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(229, 238, 233, .7);
  transition: color 180ms ease, border-color 180ms ease;
}
html body .site-footer a[href^="mailto:"]:hover,
html body .site-footer a[href^="mailto:"]:focus-visible {
  color: #fff !important;
  border-bottom-color: currentColor;
}
html body .site-footer a[href^="mailto:"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
  html body .site-footer a[href^="mailto:"] { transition: none; }
}

html body .assignments-original-page .assignment-filter:hover,
html body .assignments-original-page .assignment-filter[aria-expanded="true"] {
  color: #fff !important;
  background: #36584f !important;
}

/* Keep the account trigger, dropdown, and rows square in every interaction state. */
html body .main-nav .nav-account,
html body .main-nav .nav-account .nav-account-avatar {
  border-radius: 0 !important;
}

html body .main-nav .nav-account,
html body .main-nav .nav-account:hover,
html body .main-nav .nav-account[aria-current="page"] {
  box-shadow: 0 3px 0 rgba(37, 59, 54, .18) !important;
}

html body .nav-account-menu-wrap,
html body div#nav-account-menu.nav-account-menu,
html body div#nav-account-menu.nav-account-menu :is(a, button) {
  border-radius: 0 !important;
}

html body div#nav-account-menu.nav-account-menu .nav-notification-badge {
  border-radius: 50% !important;
}

/* One consistent close control across every site dialog and lightbox. */
html body button[aria-label^="Close"] {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 48px !important;
  width: 48px !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 1px solid var(--mapfix-border) !important;
  border-radius: 0 !important;
  color: var(--mapfix-ink) !important;
  background: var(--mapfix-surface) !important;
  box-shadow: none !important;
  font-family: var(--mapfix-font-body) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
  transform: none !important;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease !important;
}
html body button[aria-label^="Close"] svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: square !important;
}
html body button[aria-label^="Close"]:hover {
  border-color: #9baaa3 !important;
  color: var(--mapfix-terracotta-text) !important;
  background: var(--mapfix-surface) !important;
  transform: none !important;
}
html body button[aria-label^="Close"]:focus-visible {
  outline: 3px solid var(--mapfix-terracotta) !important;
  outline-offset: 3px !important;
}

/* Keep every surface and state in the username workflow strictly square. */
html body .username-dialog,
html body .username-dialog *,
html body .username-dialog *::before,
html body .username-dialog *::after {
  border-radius: 0 !important;
}

html body dialog.username-dialog form.username-dialog-card input#username-input,
html body dialog.username-dialog form.username-dialog-card input#username-input:hover,
html body dialog.username-dialog form.username-dialog-card input#username-input:focus,
html body dialog.username-dialog form.username-dialog-card input#username-input:focus-visible,
html body dialog.username-dialog form.username-dialog-card input#username-input:-webkit-autofill,
html body dialog.username-dialog form.username-dialog-card button.username-dialog-cancel,
html body dialog.username-dialog form.username-dialog-card button.username-dialog-cancel:hover,
html body dialog.username-dialog form.username-dialog-card button.username-dialog-cancel:focus-visible,
html body dialog.username-dialog form.username-dialog-card button.username-dialog-cancel:active,
html body dialog.username-dialog form.username-dialog-card button.username-dialog-save,
html body dialog.username-dialog form.username-dialog-card button.username-dialog-save:hover,
html body dialog.username-dialog form.username-dialog-card button.username-dialog-save:focus-visible,
html body dialog.username-dialog form.username-dialog-card button.username-dialog-save:active,
html body dialog.username-dialog form.username-dialog-card button.username-dialog-save:disabled {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

/* Individual translate preserves existing component transforms and hover effects. */
@media (prefers-reduced-motion: no-preference) {
  .site-shell .page-reveal-pending { opacity: 0; translate: 0 24px; }
  .site-shell .page-reveal-visible { animation: page-component-enter 800ms cubic-bezier(.22, 1, .36, 1) both; }
  .site-shell .page-reveal-pending:focus-within { opacity: 1; translate: none; }
  .site-shell .page-reveal-visible:focus-within { animation: none; }
  @keyframes page-component-enter {
    from { opacity: 0; translate: 0 24px; }
    to { opacity: 1; translate: 0 0; }
  }
}
@media print {
  .site-shell .page-reveal-pending { opacity: 1 !important; translate: none !important; }
}

/* Keep the account summary strip and every metric tile strictly square. */
html body .page-page--account .account-metric-grid,
html body .page-page--account .account-metric-grid::before,
html body .page-page--account .account-metric-grid::after,
html body .page-page--account .account-metric,
html body .page-page--account .account-metric::before,
html body .page-page--account .account-metric::after {
  border-radius: 0 !important;
}