/* ============================================================
   MI PRE(D)UZIMAMO! — Decidim theme layer
   Host-applied Decidim 0.31 "redesign" theme layer. Brand colours
   come natively from organization.colors (--primary, etc.); this
   file adds typography, the paper canvas, rounded/pill shapes, and
   brand chrome.
   Loaded site-wide (public) via _head_extra.html.erb.
   ============================================================ */

:root {
  /* ---- Brand palette (mirror of the design-system tokens) ---- */
  --mi-navy-900:#02263a; --mi-navy-800:#033653; --mi-navy-700:#1c3d53;
  --mi-navy-600:#2f5570; --mi-navy-400:#566f83;
  --mi-sava-700:#357499; --mi-sava-600:#5b9bc4; --mi-sava-500:#7abdda;
  --mi-sava-300:#aed6e8; --mi-sava-100:#dcebf6; --mi-sava-50:#eef6fb;
  --mi-park-600:#9bbb5f; --mi-park-500:#b6cf7d; --mi-park-100:#e6efcf;
  --mi-sun-600:#f3cf5e;  --mi-sun-500:#fbe48f;  --mi-sun-100:#fdf6d6;
  --mi-coral-700:#b6502f; --mi-coral-600:#d86b4a; --mi-coral-100:#f7dccf;
  /* AA-contrast coral variants: --mi-coral-text for small coral text on
     white/cream (>=4.5:1); --mi-coral-btn for button/badge backgrounds that
     carry white text on light surfaces (white-on-btn >=4.5:1). The base
     --mi-coral-600 stays the lighter brand tone for use on the dark navy
     hero (large poster lettering), where it must read light. */
  --mi-coral-text:#b14d2d; --mi-coral-btn:#c25435;
  --mi-cream-100:#faf7ec; --mi-cream-200:#f3eeda;
  --mi-line:#e4e9ed; --mi-ink-grey:#51606b;
  --mi-slate-700:#2f5570;

  --mi-font-display:'Jost','Century Gothic','Futura',system-ui,sans-serif;
  --mi-font-body:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;

  --mi-radius-card:18px; --mi-radius-input:12px; --mi-radius-pill:999px;
  --mi-shadow-sm:0 2px 8px rgba(28,61,83,.08);
  --mi-shadow-md:0 8px 24px rgba(28,61,83,.10);
  --mi-ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   1. Typography — Mulish body, Jost display
   ============================================================ */
body,
.wrapper,
input, select, textarea, button {
  font-family: var(--mi-font-body);
}
body {
  color: var(--mi-navy-600);
  background-color: var(--mi-cream-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.heading1,.heading2,.heading3,.heading4,.heading5,.heading6,
.title-bar__title,
.hero__title,
.card__title, .card__list-title {
  font-family: var(--mi-font-display);
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--mi-navy-700);
}
h1,.h1,.heading1 { letter-spacing: .01em; line-height: 1.04; }

/* Eyebrow helper (small Jost caps, terracotta) reused by brand blocks */
.mi-eyebrow {
  font-family: var(--mi-font-display); font-weight: 600;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mi-coral-text); margin: 0 0 .5rem;
}

::selection { background: var(--mi-sun-500); color: var(--mi-navy-800); }

/* ============================================================
   2. Buttons — friendly pills, terracotta primary
   ============================================================ */
.button,
button.button,
a.button,
[type="submit"].button {
  font-family: var(--mi-font-display);
  font-weight: 600;
  border-radius: var(--mi-radius-pill);
  letter-spacing: .005em;
  transition: background-color var(--mi-dur,160ms) var(--mi-ease),
              transform 140ms var(--mi-ease);
}
.button:active { transform: scale(.97); }
/* Decidim primary buttons already use --primary (terracotta). Keep hollow
   buttons on-brand: navy outline that fills on hover. */
.button.hollow {
  border-radius: var(--mi-radius-pill);
}

/* ============================================================
   3. Cards & surfaces — rounded, soft cool shadow
   ============================================================ */
.card,
.card__highlight,
[class*="card--"],
.card__content,
.filters,
.flash {
  border-radius: var(--mi-radius-card);
}
.card,
.card__highlight {
  border: 1.5px solid var(--mi-line);
  box-shadow: var(--mi-shadow-sm);
}

/* Inputs */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
input[type="url"], textarea, select, .input-group-field {
  border-radius: var(--mi-radius-input);
  border: 1.5px solid var(--mi-line);
  font-family: var(--mi-font-body);
}

/* ============================================================
   4. Links
   ============================================================ */
a { color: var(--mi-sava-700); }
a:hover { color: var(--mi-coral-text); }

/* ============================================================
   5. Header / main navigation — clean cream bar, navy ink
   ============================================================ */
.main-bar,
#main-bar,
.navbar,
header .main-bar {
  background: #fff;
  border-bottom: 1.5px solid var(--mi-line);
}
.main-bar a,
.main-nav__link {
  font-family: var(--mi-font-display);
  font-weight: 600;
}

.mi-main-menu-mobile-trigger {
  gap: .35rem;
  min-height: 2.65rem;
  padding: 0 .68rem !important;
}

.mi-main-menu-mobile-trigger__label {
  color: var(--mi-navy-800);
  font-family: var(--mi-font-display);
  font-size: .82rem;
  font-weight: 850;
  line-height: 1;
}

#menu-bar .mi-menu-breadcrumb-trigger {
  width: auto !important;
  min-width: 0;
  gap: .25rem;
  padding: .25rem .5rem !important;
  color: inherit !important;
}

#menu-bar .mi-menu-breadcrumb-trigger__label {
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
  color: inherit !important;
}

#menu-bar .mi-menu-breadcrumb-trigger svg {
  color: inherit !important;
  fill: currentColor !important;
}

.mi-mobile-header-utility {
  display: none;
}

.mi-main-bar-account {
  gap: .55rem;
  max-width: min(24rem, 32vw);
}

.mi-main-bar-account__name {
  max-width: 15rem;
  overflow: hidden;
  color: var(--mi-navy-800);
  font-family: var(--mi-font-display);
  font-size: .92rem;
  font-weight: 750;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hide the global meetings shortcut until there are launched meetings. */
.main-bar__links-desktop__item-wrapper:has(a[href*="/meetings"]) {
  display: none;
}
.main-bar__links-desktop a[href*="/meetings"] { display: none; }

/* Class-scoped (not #id) so a deduplicated 2nd menu instance keeps the band. */
.home__menu {
  display: block;
  background: var(--mi-coral-btn);
  padding: 0;
}

.home__menu__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .55rem;
  box-sizing: border-box;
  max-width: 88rem;
  margin: 0 auto;
  padding: .65rem 1rem;
}

.home__menu-element {
  min-width: 0;
}

.home__menu-element--link.button.button__text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: .42rem .8rem;
  border-radius: var(--mi-radius-pill);
  color: #fff;
  line-height: 1.15;
  white-space: nowrap;
}

.home__menu-element--link.button.button__text:hover,
.home__menu-element--link.button.button__text:focus-visible {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.home__menu-icon {
  display: none;
}

@media (max-width: 760px) {
  .home__menu__container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex-wrap: initial;
    justify-content: initial;
    gap: .38rem;
    max-width: 100vw;
    overflow: visible;
    padding: .55rem .65rem;
  }

  .home__menu-element {
    min-width: 0;
  }

  .home__menu-element--link.button.button__text {
    width: 100%;
    min-height: 3.2rem;
    padding: .28rem .18rem;
    flex-direction: column;
    gap: .18rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
  }

  .home__menu-icon {
    display: block;
    width: 1.08rem;
    height: 1.08rem;
    flex: 0 0 auto;
  }
}

#how_to_participate .home__section-participate-grid__block:first-child {
  display: none;
}

.main-footer li:has(> a[href*="/meetings"]),
.footer li:has(> a[href*="/meetings"]) {
  display: none;
}

/* MI public action launcher: broad capability scan on desktop, inline on mobile. */
.mi-action-launcher {
  background: #fff;
  border-bottom: 1px solid var(--mi-line);
}

.mi-action-launcher__inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: .58rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .45rem;
}

.mi-action-launcher__item,
.mi-action-launcher__mobile-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: 0;
  min-height: 2.45rem;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-pill);
  background: var(--mi-cream-100);
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-weight: 750;
  text-decoration: none;
  line-height: 1.1;
}

.mi-action-launcher__item svg,
.mi-action-launcher__mobile-item svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  color: var(--mi-coral-text);
}

.mi-action-launcher__item span,
.mi-action-launcher__mobile-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-action-launcher__item:hover,
.mi-action-launcher__item:focus-visible,
.mi-action-launcher__mobile-item:hover,
.mi-action-launcher__mobile-item:focus-visible {
  background: var(--mi-sun-100);
  color: var(--mi-navy-800);
  border-color: var(--mi-sun-600);
}

.mi-action-launcher--mobile {
  display: none;
}

@media (max-width: 760px) {
  .mi-action-launcher--desktop {
    display: none;
  }

  .mi-action-launcher--mobile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--mi-line);
    background: #fff;
  }

  .mi-action-launcher__mobile-item {
    min-height: 2.85rem;
    flex-direction: column;
    gap: .22rem;
    border-radius: 10px;
    font-size: .72rem;
    padding: .28rem .2rem;
  }

  .mi-action-launcher__mobile-item svg {
    width: 1.15rem;
    height: 1.15rem;
  }
}

.mi-mobile-bottom-nav,
.mi-mobile-more-sheet {
  display: none;
}

@media (max-width: 760px) {
  body:has(.mi-mobile-bottom-nav) {
    padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  }

  body:has(.mi-mobile-bottom-nav) .main-bar {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    min-height: auto;
    padding: .55rem .75rem;
  }

  body:has(.mi-mobile-bottom-nav) .main-bar__logo,
  body:has(.mi-mobile-bottom-nav) .main-bar__search,
  body:has(.mi-mobile-bottom-nav) .main-bar__links-desktop {
    display: none !important;
  }

  body:has(.mi-mobile-bottom-nav) .main-bar__menu-mobile {
    display: none !important;
  }

  body:has(.mi-mobile-bottom-nav) .mi-chat-loader__bubble {
    display: none !important;
  }

  body:has(.mi-mobile-bottom-nav) .mi-chat:not(.is-open) .mi-chat__bubble {
    display: none !important;
  }

  body:has(.mi-mobile-bottom-nav) .mi-mobile-header-utility {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(5.8rem, auto);
    gap: .45rem;
    width: 100%;
    align-items: center;
  }

  .mi-mobile-header-utility__search {
    min-width: 0;
    min-height: 2.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.65rem;
    align-items: stretch;
    border: 1px solid rgba(14, 59, 84, .14);
    border-radius: 14px;
    background: var(--mi-cream-100);
    overflow: hidden;
  }

  .mi-mobile-header-utility__search input {
    min-width: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 .72rem;
    color: var(--mi-navy-800);
    font-size: .86rem;
  }

  .mi-mobile-header-utility__search button {
    border: 0;
    background: var(--mi-navy-700);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mi-mobile-header-utility__search button svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .mi-mobile-header-utility__account {
    min-width: 0;
    min-height: 2.75rem;
    max-width: 9.8rem;
    padding: .25rem .48rem;
    border: 1px solid rgba(14, 59, 84, .14);
    border-radius: 14px;
    background: #fff;
    color: var(--mi-navy-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    box-shadow: 0 8px 18px rgba(14, 59, 84, .08);
    text-decoration: none;
  }

  .mi-mobile-header-utility__account > span:last-child {
    min-width: 0;
    overflow: hidden;
    font-family: var(--mi-font-display);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mi-mobile-header-utility__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--mi-sun-300);
    color: var(--mi-navy-800);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--mi-font-display);
    font-size: .74rem;
    font-weight: 900;
  }

  .mi-mobile-header-utility__avatar img,
  .mi-mobile-header-utility__avatar svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mi-mobile-header-utility__avatar--icon svg {
    width: 1rem;
    height: 1rem;
  }

  .mi-mobile-bottom-nav {
    position: fixed;
    z-index: 840;
    left: .55rem;
    right: .55rem;
    bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .18rem;
    padding: .35rem;
    border: 1px solid rgba(14, 59, 84, .16);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 38px rgba(14, 59, 84, .22);
    backdrop-filter: blur(14px);
  }

  body:has(#dc-dialog-wrapper.cookies__container:not([hidden])) .mi-mobile-bottom-nav {
    bottom: calc(9.8rem + env(safe-area-inset-bottom, 0px));
  }

  body.mi-mobile-nav-open #dc-dialog-wrapper.cookies__container {
    display: none !important;
  }

  .mi-mobile-bottom-nav__item {
    min-width: 0;
    min-height: 3.2rem;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--mi-navy-700);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .16rem;
    font-family: var(--mi-font-display);
    font-size: .67rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
  }

  .mi-mobile-bottom-nav__item--bot {
    background: var(--mi-coral-btn);
    color: #fff;
    box-shadow: 0 8px 18px rgba(194, 84, 53, .32);
  }

  .mi-mobile-bottom-nav__item svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--mi-coral-text);
  }

  .mi-mobile-bottom-nav__item--bot svg {
    color: #fff;
  }

  .mi-mobile-bottom-nav__item span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mi-mobile-bottom-nav__item.is-active,
  .mi-mobile-bottom-nav__item[aria-current="page"],
  .mi-mobile-bottom-nav__item[aria-expanded="true"] {
    background: var(--mi-navy-700);
    color: #fff;
  }

  .mi-mobile-bottom-nav__item--bot.is-active,
  .mi-mobile-bottom-nav__item--bot[aria-current="page"] {
    background: var(--mi-coral-btn);
    color: #fff;
  }

  .mi-mobile-bottom-nav__item.is-active svg,
  .mi-mobile-bottom-nav__item[aria-current="page"] svg,
  .mi-mobile-bottom-nav__item[aria-expanded="true"] svg {
    color: var(--mi-sun-300);
  }

  .mi-mobile-bottom-nav__item--bot.is-active svg,
  .mi-mobile-bottom-nav__item--bot[aria-current="page"] svg {
    color: #fff;
  }

  .mi-mobile-more-sheet {
    position: fixed;
    z-index: 10020;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(4, 24, 37, .46);
  }

  .mi-mobile-more-sheet[hidden] {
    display: none;
  }

  .mi-mobile-more-sheet__panel {
    width: 100%;
    max-height: min(82vh, 43rem);
    overflow-y: auto;
    padding: 1rem 1rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: 0 -18px 44px rgba(4, 24, 37, .2);
  }

  .mi-mobile-more-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
  }

  .mi-mobile-more-sheet__head h2 {
    margin: 0;
    color: var(--mi-navy-800);
    font-family: var(--mi-font-display);
    font-size: 1.2rem;
    line-height: 1.05;
  }

  .mi-mobile-more-sheet__close {
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid var(--mi-line);
    border-radius: 999px;
    background: var(--mi-cream-100);
    color: var(--mi-navy-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mi-mobile-more-sheet__search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.9rem;
    gap: .35rem;
    margin-bottom: .9rem;
  }

  .mi-mobile-more-sheet__search input {
    min-width: 0;
    min-height: 2.85rem;
    border: 1px solid var(--mi-line);
    border-radius: 12px;
    padding: 0 .85rem;
    color: var(--mi-navy-800);
    background: var(--mi-cream-100);
  }

  .mi-mobile-more-sheet__search button {
    min-height: 2.85rem;
    border: 0;
    border-radius: 12px;
    background: var(--mi-navy-700);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mi-mobile-more-sheet__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
  }

  .mi-mobile-more-sheet__link {
    min-height: 3.35rem;
    padding: .55rem;
    border: 1px solid var(--mi-line);
    border-radius: 12px;
    background: var(--mi-cream-100);
    color: var(--mi-navy-800);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--mi-font-display);
    font-size: .83rem;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
  }

  .mi-mobile-more-sheet__link svg {
    width: 1.18rem;
    height: 1.18rem;
    flex: 0 0 auto;
    color: var(--mi-coral-text);
  }

  .mi-mobile-more-sheet__language {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--mi-line);
    color: var(--mi-slate-700);
    display: grid;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 750;
  }

  .mi-mobile-more-sheet__language div {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }

  .mi-mobile-more-sheet__language a {
    min-height: 2rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: var(--mi-cream-100);
    color: var(--mi-navy-700);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  html.mi-mobile-nav-open,
  body.mi-mobile-nav-open {
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  body:has(#dc-dialog-wrapper.cookies__container:not([hidden])) .mi-chat-loader__bubble {
    bottom: calc(9.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   6. Footer — deep navy, brand sign-off
   ============================================================ */
.main-footer,
.footer {
  background: var(--mi-navy-800);
  color: #fff;
}
.main-footer a,
.footer a { color: #e8f1f6; }
.main-footer a:hover,
.footer a:hover { color: var(--mi-sun-500); }

/* ============================================================
   6.5 Data consent — compact mobile sheet
   ============================================================ */
@media (max-width: 640px) {
  #dc-dialog-wrapper.cookies__container {
    left: .75rem;
    right: .75rem;
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: min(18dvh, 9rem);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 -8px 24px rgba(28, 61, 83, .18);
  }

  #dc-dialog-wrapper .cookies {
    width: auto;
    max-width: none;
    max-height: inherit;
    overflow-y: auto;
    gap: .55rem;
    padding: .7rem;
  }

  #dc-dialog-wrapper .cookies__left {
    gap: .35rem;
  }

  #dc-dialog-wrapper .cookies .h5 {
    font-size: .92rem;
    line-height: 1.2;
  }

  #dc-dialog-wrapper .cookies__left p {
    display: -webkit-box;
    margin-top: .1rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: .78rem;
    line-height: 1.28;
  }

  #dc-dialog-wrapper .cookies__right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem;
  }

  #dc-dialog-wrapper .cookies__right .button {
    min-height: 32px;
    padding: .38rem .55rem;
    font-size: .8rem;
    white-space: normal;
    line-height: 1.15;
  }

  #dc-dialog-settings {
    grid-column: 1 / -1;
  }
}

@media (max-width: 380px) {
  #dc-dialog-wrapper .cookies__right {
    grid-template-columns: 1fr;
  }
}

#dc-modal.hidden,
#dc-dialog-wrapper[hidden] {
  display: none !important;
}

/* ============================================================
   7. Home hero — deep navy poster block, light type
   (Only the home .hero gets a forced navy bg; participatory-space
   headers manage their own cover image, so we don't touch them.)
   ============================================================ */
.hero {
  background-color: var(--mi-navy-800);
}
.hero,
.hero__container,
.hero .hero__title,
.hero h1, .hero h2, .hero h3,
.hero p, .hero li {
  color: #fff;
}
.hero .hero__title { letter-spacing: .02em; }
.hero a:not(.button) { color: var(--mi-sun-500); }
.hero a:not(.button):hover { color: #fff; }
/* The single hero CTA pops in terracotta regardless of Decidim's variant. */
.hero .button {
  background: var(--mi-coral-btn);
  border-color: var(--mi-coral-btn);
  color: #fff;
}
.hero .button:hover {
  background: var(--mi-coral-700);
  border-color: var(--mi-coral-700);
}

/* Participatory-space (process/assembly) hero — the dark band's title/subtitle
   must be light. Higher specificity than the global h1 colour, so no !important.
   Works whether the hero shows the default dark band or a cover image (Decidim
   scrims cover images, where white text is also correct). */
.participatory-space__hero,
.participatory-space__hero-text,
.participatory-space__hero-text h1,
.participatory-space__hero-text h2,
.participatory-space__hero-text h3,
.participatory-space__hero-text p {
  color: #fff;
}
.participatory-space__hero-text a:not(.button) { color: var(--mi-sun-500); }
.participatory-space__hero-text a:not(.button):hover { color: #fff; }

/* ============================================================
   8. Brand utility classes (used by engine custom pages + blocks)
   ============================================================ */
.mi-wordmark {
  font-family: var(--mi-font-display); font-weight: 800;
  letter-spacing: .005em; line-height: .92;
  display: inline-flex; align-items: baseline; gap: .12em; white-space: nowrap;
}
.mi-wordmark .wm-accent { color: var(--mi-coral-text); }
.mi-wordmark .wm-paren { opacity: .55; font-weight: 600; }

/* Engine custom forms (Biće riješeno! report intake) wrap each field in
   .mi-field with an explicit label (Decidim's auto-label suppressed), giving a
   deterministic label-then-input vertical layout. */
.mi-field { margin: 0 0 1.1rem; }
.mi-field > label {
  display: block;
  margin: 0 0 .35rem;
  font-family: var(--mi-font-display);
  font-weight: 600;
  color: var(--mi-navy-700);
}
.mi-field input:not([type="checkbox"]):not([type="radio"]),
.mi-field textarea,
.mi-field select {
  display: block;
  width: 100%;
  max-width: 100%;
}
.mi-field--check > label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}
.mi-field--check input { width: auto; flex: none; }
.mi-field .help-text { display: block; margin: .35rem 0 0; color: var(--mi-navy-400); font-size: .85rem; }
form fieldset legend { font-family: var(--mi-font-display); font-weight: 700; color: var(--mi-navy-700); margin-bottom: .6rem; }

.mi-card-strip { height: 5px; width: 100%; border-radius: 6px 6px 0 0; background: var(--mi-acc, var(--mi-coral-600)); }
.acc-sava{--mi-acc:var(--mi-sava-700);--mi-acc-soft:var(--mi-sava-100);}
.acc-park{--mi-acc:var(--mi-park-600);--mi-acc-soft:var(--mi-park-100);}
.acc-sun{--mi-acc:var(--mi-sun-600);--mi-acc-soft:var(--mi-sun-100);}
.acc-coral{--mi-acc:var(--mi-coral-text);--mi-acc-soft:var(--mi-coral-100);}

/* Shared MI citizen surfaces: compact account-style page building blocks. */
.mi-surface {
  width: min(72rem, 100%);
  max-width: 100%;
  margin: 0 auto;
  padding: 1.35rem 0 2.5rem;
  color: var(--mi-navy-700);
  box-sizing: border-box;
}
.mi-surface--wide {
  width: min(88rem, 100%);
}
.mi-surface-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  margin-bottom: 1rem;
}
.mi-surface *,
.mi-surface *::before,
.mi-surface *::after {
  box-sizing: border-box;
}
.mi-surface-header__mark {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--mi-shadow-sm);
}
.mi-surface-header__mark img {
  width: 1.75rem;
  height: auto;
}
.mi-surface-header h1,
.mi-surface-header p {
  margin: 0;
}
.mi-surface-header h1 {
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  line-height: 1;
}
.mi-surface-header__intro {
  max-width: 48rem;
  margin-top: .35rem;
  color: var(--mi-navy-600);
  line-height: 1.45;
}
.mi-surface-header__action {
  justify-self: end;
}
.mi-action-row,
.mi-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}
.mi-action-bar {
  margin: 1rem 0;
}
.mi-tabs,
.mi-surface-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
  padding: .25rem;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
}
.mi-tab,
.mi-surface-tab {
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .45rem .75rem;
  border-radius: 7px;
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
}
.mi-tab:hover,
.mi-tab:focus-visible,
.mi-surface-tab:hover,
.mi-surface-tab:focus-visible {
  background: var(--mi-sun-100);
  color: var(--mi-navy-800);
}
.mi-tab.is-active,
.mi-surface-tab.is-active,
.mi-tab[aria-current="page"],
.mi-surface-tab[aria-current="page"] {
  background: var(--mi-navy-700);
  color: #fff;
}
.mi-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .75rem;
  margin: 0 0 1rem;
}
.mi-metric-card {
  min-width: 0;
  display: grid;
  gap: .2rem;
  padding: .85rem;
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
}
.mi-metric-card strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-size: 1.55rem;
  line-height: 1.05;
}
.mi-metric-card span {
  display: block;
  color: var(--mi-navy-400);
  font-size: .86rem;
  line-height: 1.3;
}
.mi-surface-card,
.mi-filter-panel,
.mi-map-frame,
.mi-form-section,
.mi-empty-state,
.mi-notice {
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--mi-shadow-sm);
}
.mi-surface-card,
.mi-filter-panel,
.mi-form-section,
.mi-empty-state,
.mi-notice {
  padding: 1rem;
}
.mi-surface-card--strip {
  padding: 0;
  overflow: hidden;
}
.mi-surface-card__body {
  min-width: 0;
  padding: 1rem;
}
.mi-metric-card--level {
  border-color: rgba(199, 54, 42, .3);
  background: linear-gradient(180deg, #fff, var(--mi-sun-100));
}
.mi-community-summary {
  margin-bottom: 1rem;
}
.mi-community-summary .mi-metric-grid {
  margin-bottom: .85rem;
}
.mi-community-summary .mi-action-row {
  margin: 0;
}
.mi-community-panel {
  margin-bottom: 1.1rem;
}
.mi-community-panel--narrow {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.mi-community-panel__body {
  padding: 1.6rem 1.5rem 2rem;
  background: #fff;
}
.mi-section-stack {
  margin-top: 1.35rem;
}
.mi-section-heading {
  max-width: 44rem;
  margin-bottom: 1rem;
}
.mi-section-heading h2,
.mi-donation-hero h2,
.mi-project-card h3,
.mi-donation-notes h3 {
  margin: 0;
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-weight: 850;
  line-height: 1.12;
}
.mi-section-heading p {
  margin: .35rem 0 0;
  color: var(--mi-navy-400);
}
.mi-donation-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(18rem, .8fr);
  gap: 1rem;
  align-items: start;
  padding: 1.1rem;
}
.mi-donation-hero__mark {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
}
.mi-donation-hero__mark img {
  width: 2.35rem;
  height: auto;
}
.mi-donation-total {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  align-items: baseline;
  margin: .45rem 0 .15rem;
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  line-height: 1;
}
.mi-donation-total strong {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 900;
}
.mi-donation-total span {
  color: var(--mi-coral-text);
  font-size: 1.45rem;
  font-weight: 850;
}
.mi-donation-count {
  margin: 0 0 1rem;
  color: var(--mi-navy-400);
}
.mi-donation-notes {
  display: grid;
  gap: .85rem;
  padding: .95rem;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
}
.mi-donation-notes p {
  margin: .45rem 0 0;
  color: var(--mi-navy-500);
  font-size: .9rem;
  line-height: 1.4;
}
.mi-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .55rem;
}
.mi-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: .35rem .65rem;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-pill);
  background: #fff;
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-weight: 850;
}
.mi-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .85rem;
}
.mi-project-card {
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.mi-project-card p {
  margin: .45rem 0 0;
  color: var(--mi-navy-400);
  font-size: .92rem;
  line-height: 1.4;
}
.mi-project-card--muted {
  background: var(--mi-cream-100);
}
.mi-filter-panel {
  display: grid;
  gap: .85rem;
  margin-bottom: 1rem;
}
.mi-filter-panel__search {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.mi-filter-panel__search input {
  flex: 1 1 14rem;
}
.mi-filter-group strong {
  display: block;
  margin-bottom: .45rem;
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-weight: 800;
}
.mi-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.mi-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  padding: .32rem .75rem;
  border: 1.5px solid var(--mi-line);
  border-radius: var(--mi-radius-pill);
  background: var(--mi-cream-100);
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-size: .83rem;
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none;
}
.mi-filter-pill:hover,
.mi-filter-pill:focus-visible {
  border-color: var(--mi-sun-600);
  background: var(--mi-sun-100);
  color: var(--mi-navy-800);
}
.mi-filter-pill.is-active,
.mi-filter-pill[aria-current="true"],
.mi-filter-pill[aria-current="page"] {
  background: var(--mi-navy-700);
  color: #fff;
}
.mi-filter-pill--coral.is-active,
.mi-filter-pill--coral[aria-current="true"] {
  background: var(--mi-coral-btn);
}
.mi-dot {
  width: .65rem;
  height: .65rem;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(28,61,83,.12);
}
.mi-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .85rem;
}
.mi-report-card {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.mi-report-card__body {
  display: grid;
  align-content: start;
  gap: .65rem;
  padding: 1rem;
}
.mi-report-card__reference {
  margin: 0;
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-weight: 800;
}
.mi-report-card__reference span {
  display: block;
  color: var(--mi-navy-400);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mi-report-card__meta {
  margin: 0;
  color: var(--mi-navy-600);
  font-size: .88rem;
  line-height: 1.35;
}
.mi-report-card__date {
  margin-top: auto;
  color: var(--mi-navy-400);
  font-family: var(--mi-font-display);
  font-size: .8rem;
}
.mi-status-pill--inline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
}
.mi-map-frame {
  padding: .7rem;
  margin: 1rem 0;
  overflow: hidden;
}
.mi-map-frame__canvas {
  min-height: 20rem;
  border-radius: 8px;
  overflow: hidden;
}
.mi-map-legend {
  padding: .8rem .25rem .25rem;
}
.mi-map-legend strong {
  display: block;
  margin-bottom: .5rem;
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-weight: 800;
}
.mi-map-legend ul,
.mi-data-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mi-map-legend ul {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.mi-empty-state {
  text-align: center;
  padding: 2rem 1rem;
}
.mi-empty-state img {
  height: 3.25rem;
  width: auto;
  margin-bottom: .65rem;
}
.mi-empty-state h2,
.mi-empty-state p {
  margin: 0;
}
.mi-empty-state p {
  margin-top: .35rem;
  color: var(--mi-navy-600);
}
.mi-table-frame {
  max-width: 100%;
  overflow-x: auto;
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--mi-shadow-sm);
}
.mi-progress-line {
  display: inline-block;
  min-width: 5rem;
  height: .55rem;
  overflow: hidden;
  border-radius: var(--mi-radius-pill);
  background: var(--mi-cream-100);
}
.mi-progress-line span {
  display: block;
  height: 100%;
  background: var(--mi-navy-700);
}
.mi-form-section {
  margin-bottom: 1rem;
  min-width: 0;
}
.mi-form-section legend,
.mi-form-section h2 {
  margin: 0 0 .75rem;
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-size: 1.15rem;
  font-weight: 800;
}
.mi-privacy-notice,
.mi-notice {
  background: var(--mi-sava-50);
}
.mi-notice p {
  margin: 0;
}

/* Public Decidim profile, rebuilt in the MI account design language. */
.mi-public-profile {
  width: min(88rem, 100%);
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
  color: var(--mi-navy-700);
}
.mi-public-profile *,
.mi-public-profile *::before,
.mi-public-profile *::after {
  box-sizing: border-box;
}
.mi-public-profile-hero,
.mi-public-profile-summary,
.mi-public-profile-tabs,
.mi-public-profile-content,
.mi-public-profile-panel,
.mi-public-profile-notice,
.mi-public-profile-empty {
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--mi-shadow-sm);
}
.mi-public-profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(11rem, auto);
  gap: 1rem;
  align-items: start;
  padding: 1rem;
}
.mi-public-profile-hero__avatar .profile__avatar {
  width: 6.5rem;
  height: 6.5rem;
}
.mi-public-profile-hero__actions {
  display: flex;
  justify-content: flex-end;
}
.mi-public-profile-hero__actions .profile__actions-main,
.mi-public-profile-hero__actions .profile__actions-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
}
.mi-public-profile-details h1,
.mi-public-profile-details p,
.mi-public-profile-section-head h2,
.mi-public-profile-section-head p,
.mi-public-profile-empty h2,
.mi-public-profile-empty p {
  margin: 0;
}
.mi-public-profile-details h1 {
  color: var(--mi-navy-800);
  font-family: var(--mi-font-display);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 900;
  line-height: 1.05;
}
.mi-public-profile-details__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .75rem;
}
.mi-public-profile-pill {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-pill);
  background: var(--mi-cream-100);
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.1;
}
.mi-public-profile-pill svg {
  width: .95rem;
  height: .95rem;
  color: var(--mi-coral-text);
}
.mi-public-profile-pill a {
  color: inherit;
  text-decoration: none;
}
.mi-public-profile-pill a:hover,
.mi-public-profile-pill a:focus-visible {
  color: var(--mi-coral-text);
  text-decoration: underline;
}
.mi-public-profile-details__about {
  max-width: 44rem;
  margin-top: .75rem !important;
  color: var(--mi-navy-500);
  line-height: 1.45;
}
.mi-public-profile-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .85rem;
  padding: .75rem;
  background: var(--mi-cream-100);
}
.mi-public-profile-summary__item,
.mi-public-profile-summary-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .1rem .55rem;
  align-items: center;
  padding: .75rem;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  color: var(--mi-navy-700);
  text-decoration: none;
}
.mi-public-profile-summary__item svg,
.mi-public-profile-summary-card svg {
  grid-row: span 2;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--mi-coral-text);
}
.mi-public-profile-summary__item span,
.mi-public-profile-summary-card span {
  color: var(--mi-navy-400);
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.2;
}
.mi-public-profile-summary__item strong,
.mi-public-profile-summary-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--mi-navy-800);
  font-family: var(--mi-font-display);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.12;
}
.mi-public-profile-summary__item:hover,
.mi-public-profile-summary__item:focus-visible,
.mi-public-profile-summary-card:hover,
.mi-public-profile-summary-card:focus-visible {
  border-color: var(--mi-sun-600);
  box-shadow: 0 8px 22px rgba(28, 61, 83, .08);
}
.mi-public-profile-tabs {
  margin-top: .85rem;
  padding: .25rem;
}
.mi-public-profile-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mi-public-profile-tab {
  min-height: 2.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .5rem .85rem;
  border-radius: 7px;
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-size: .9rem;
  font-weight: 850;
  text-decoration: none;
}
.mi-public-profile-tab:hover,
.mi-public-profile-tab:focus-visible {
  background: var(--mi-sun-100);
  color: var(--mi-navy-800);
}
.mi-public-profile-tab.is-active,
.mi-public-profile-tab[aria-current="page"] {
  background: var(--mi-navy-700);
  color: #fff;
}
.mi-public-profile-content {
  margin-top: .85rem;
  padding: 1rem;
}
.mi-public-profile-content .profile__activity {
  display: grid;
  grid-template-columns: minmax(12rem, .32fr) minmax(0, 1fr);
  gap: 1rem;
}
.mi-public-profile-content .profile__activity__container {
  min-width: 0;
}
.mi-public-profile-content .resource-types-filters {
  margin: 0;
}
.mi-public-profile-panel {
  padding: 1rem;
}
.mi-public-profile-section-head {
  margin-bottom: .85rem;
}
.mi-public-profile-section-head h2,
.mi-public-profile-empty h2 {
  color: var(--mi-navy-800);
  font-family: var(--mi-font-display);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.12;
}
.mi-public-profile-summary-grid,
.mi-public-profile-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem;
}
.mi-public-profile-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
  margin-bottom: 1rem;
  padding: .8rem;
  background: var(--mi-sava-50);
}
.mi-public-profile-notice p {
  margin: 0;
  color: var(--mi-navy-600);
  line-height: 1.4;
}
.mi-public-profile-notice a {
  color: var(--mi-coral-text);
  font-weight: 850;
}
.mi-public-profile-badge {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  padding: .85rem;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  color: var(--mi-navy-700);
  text-decoration: none;
}
.mi-public-profile-badge__icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--mi-sun-100);
  color: var(--mi-coral-text);
}
.mi-public-profile-badge strong,
.mi-public-profile-badge small {
  display: block;
  min-width: 0;
}
.mi-public-profile-badge strong {
  color: var(--mi-navy-800);
  font-family: var(--mi-font-display);
  font-weight: 900;
  line-height: 1.15;
}
.mi-public-profile-badge small {
  margin-top: .25rem;
  color: var(--mi-navy-500);
  font-size: .86rem;
  line-height: 1.35;
}
.mi-public-profile-badge:hover,
.mi-public-profile-badge:focus-visible {
  border-color: var(--mi-sun-600);
  box-shadow: 0 8px 22px rgba(28, 61, 83, .08);
}
.mi-public-profile-empty {
  display: grid;
  justify-items: center;
  gap: .45rem;
  padding: 2rem 1rem;
  text-align: center;
  background: var(--mi-cream-100);
}
.mi-public-profile-empty svg {
  width: 2rem;
  height: 2rem;
  color: var(--mi-coral-text);
}
.mi-public-profile-empty p {
  max-width: 36rem;
  color: var(--mi-navy-500);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .mi-surface {
    width: 100%;
    padding-top: .9rem;
  }

  .mi-surface-header {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .mi-surface-header__action {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .mi-surface-header__action .mi-btn,
  .mi-surface-header__action .button {
    width: 100%;
    justify-content: center;
  }

  .mi-surface-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mi-surface-tab {
    min-width: 0;
    padding-inline: .4rem;
    text-align: center;
  }

  .mi-metric-grid,
  .mi-report-grid,
  .mi-account-grid {
    grid-template-columns: 1fr;
  }

  .mi-btn,
  .mi-action-row .button,
  .mi-action-row .mi-btn {
    white-space: normal;
    text-align: center;
  }

  .mi-map-frame__canvas {
    width: 100%;
  }

  .mi-public-profile {
    padding-inline: .75rem;
  }

  .mi-public-profile-hero {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .mi-public-profile-hero__actions,
  .mi-public-profile-hero__actions .profile__actions-main,
  .mi-public-profile-hero__actions .profile__actions-secondary {
    width: 100%;
    justify-content: flex-start;
  }

  .mi-public-profile-summary,
  .mi-public-profile-content .profile__activity {
    grid-template-columns: 1fr;
  }

  .mi-public-profile-tabs ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mi-public-profile-tab {
    min-width: 0;
    padding-inline: .35rem;
    text-align: center;
  }
}

/* ============================================================
   9. Homepage HUB content block (decidim-bih :mi_hub)
   The "MI <verb>" module tiles + the omnichannel chatbot band.
   Markup lives in the engine cell; copy in i18n; look lives here.
   ============================================================ */
.mi-hub { max-width: none; }

/* ---- Eyebrow variant (sun, used on the navy band) ---- */
.mi-eyebrow--sun { color: var(--mi-sun-600); }

/* ---- "MI <verb>" module tiles ---- */
.mi-modules { margin: 0 0 3rem; }
.mi-modules__head { max-width: 46rem; margin: 0 0 2.25rem; }
.mi-modules__title {
  font-family: var(--mi-font-display); font-weight: 700;
  color: var(--mi-navy-700); line-height: 1.08;
  font-size: clamp(1.7rem, 4.2vw, 2.9rem); margin: .35rem 0 0;
}
.mi-modules__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
}
.mi-module-tile {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1.5px solid var(--mi-line);
  border-radius: var(--mi-radius-card); box-shadow: var(--mi-shadow-sm);
  transition: transform 160ms var(--mi-ease), box-shadow 160ms var(--mi-ease);
}
.mi-module-tile:hover { transform: translateY(-4px); box-shadow: var(--mi-shadow-md); }
.mi-module-tile .mi-card-strip { background: var(--mi-acc); border-radius: 0; flex: none; }
.mi-module-tile__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.6rem 1.5rem 1.5rem;
}
.mi-module-tile__icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--mi-acc-soft); color: var(--mi-acc);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.mi-module-tile__icon svg { width: 26px; height: 26px; }
.mi-module-tile__heading { margin-top: 1.1rem; }
.mi-module-tile__mi {
  font-family: var(--mi-font-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mi-navy-400);
}
.mi-module-tile__verb {
  font-family: var(--mi-font-display); font-weight: 700;
  font-size: 1.65rem; line-height: 1.05; color: var(--mi-navy-700); margin: .1rem 0 0;
}
.mi-module-tile__kicker {
  font-family: var(--mi-font-display); font-weight: 500; font-size: .9rem;
  color: var(--mi-acc); margin: .25rem 0 0; letter-spacing: .02em;
}
.mi-module-tile__blurb {
  font-size: .92rem; line-height: 1.55; color: var(--mi-ink-grey);
  margin: .9rem 0 1.2rem; flex: 1;
}
.mi-module-tile__links { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.mi-module-tile__secondary {
  font-family: var(--mi-font-display); font-weight: 600; font-size: .85rem;
  color: var(--mi-navy-600);
}
.mi-module-tile__secondary:hover { color: var(--mi-coral-text); }

/* ---- Pill link (accent-tinted) ---- */
.mi-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mi-font-display); font-weight: 700; font-size: .92rem;
  padding: .55rem 1.15rem; border-radius: var(--mi-radius-pill);
  background: var(--mi-acc-soft); color: var(--mi-navy-700);
  transition: background-color 160ms var(--mi-ease), transform 140ms var(--mi-ease);
}
.mi-pill:hover { color: var(--mi-navy-800); background: var(--mi-acc); transform: translateY(-1px); }
.mi-pill svg { width: 18px; height: 18px; }

/* ---- Omnichannel chatbot band (navy) ---- */
.mi-omni-band {
  background: var(--mi-navy-800); color: #fff;
  border-radius: var(--mi-radius-card); overflow: hidden;
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  padding: clamp(2rem, 4vw, 3.25rem);
}
.mi-omni-band__title {
  font-family: var(--mi-font-display); font-weight: 700; color: #fff;
  font-size: clamp(1.55rem, 3.8vw, 2.7rem); line-height: 1.1; margin: .6rem 0 0;
}
.mi-omni-band__lead {
  color: #cfe0ea; font-size: 1.02rem; line-height: 1.6;
  margin: 1rem 0 1.4rem; max-width: 34rem;
}
.mi-omni-band__channels { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.3rem; }
.mi-channel {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18);
  padding: .55rem 1rem; border-radius: var(--mi-radius-pill);
  font-family: var(--mi-font-display); font-weight: 600; font-size: .9rem; color: #fff;
}
.mi-channel svg { width: 16px; height: 16px; }
.mi-channel--viber { border-color: rgba(115,96,242,.5); }
.mi-channel--whatsapp { border-color: rgba(37,211,102,.5); }
.mi-channel--messenger { border-color: rgba(0,132,255,.5); }
.mi-omni-band__sms { color: #cfe0ea; font-size: .9rem; line-height: 1.6; margin: 0; }
.mi-omni-band__sms b { color: #fff; }
.mi-omni-band__emblem { display: flex; justify-content: center; }
.mi-omni-band__emblem img { width: clamp(8rem, 14vw, 12rem); height: auto; }

/* ---- Responsive: stack the omnichannel band on mobile ---- */
@media (max-width: 720px) {
  .mi-omni-band { grid-template-columns: 1fr; text-align: left; }
  .mi-omni-band__emblem { justify-content: flex-start; order: -1; }
  .mi-omni-band__emblem img { width: 5.5rem; }
}

/* ============================================================
   10. Lazy MI chat launcher
   The full chat panel CSS/JS loads only after this lightweight button is used.
   ============================================================ */
.mi-chat-loader__bubble {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 9999;
  min-width: 58px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 0;
  border-radius: 999px;
  padding: .7rem .95rem .7rem .75rem;
  background: var(--mi-coral-btn);
  color: #fff;
  box-shadow: 0 16px 36px rgba(32, 34, 38, .24);
  cursor: pointer;
  font-family: var(--mi-font-display);
  font-weight: 700;
  line-height: 1;
  transition: transform 160ms var(--mi-ease), background-color 160ms var(--mi-ease), box-shadow 160ms var(--mi-ease);
}
.mi-chat-loader__bubble:hover {
  background: var(--mi-coral-700);
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(32, 34, 38, .28);
}
.mi-chat-loader__bubble:focus-visible {
  outline: 3px solid var(--mi-sun-500);
  outline-offset: 3px;
}
.mi-chat-loader__bubble.is-loading { cursor: progress; opacity: .82; }
.mi-chat-loader__bubble:disabled { pointer-events: none; }
.mi-chat-loader__icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mi-chat-loader__icon svg { width: 30px; height: 30px; }
.mi-chat-loader__label { white-space: nowrap; font-size: .92rem; }

@media (max-width: 560px) {
  .mi-chat-loader__bubble {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
    padding: 0;
  }
  .mi-chat-loader__label { display: none; }
}

/* ============================================================
   11. Homepage poster HERO content block (decidim-bih :mi_hero)
   The activist poster stack + live ticker card + org stats strip.
   Markup lives in the engine cell; copy in i18n; look lives here.
   NEW tokens only — additive :root block, nothing above changes.
   ============================================================ */
:root {
  --mi-hero-ink:#ffffff;
  --mi-hero-sub:#aac6d6;
  --mi-hero-divider:rgba(255,255,255,.14);
  --mi-ticker-bg:rgba(255,255,255,.07);
  --mi-ticker-border:rgba(255,255,255,.18);
  --mi-ticker-divider:rgba(255,255,255,.12);
  --mi-ticker-icon-bg:rgba(255,255,255,.12);
}

.mi-hero {
  position: relative;
  overflow: hidden;
  background: var(--mi-navy-800);
  color: var(--mi-hero-ink);
}
.mi-hero__watermark {
  position: absolute;
  right: clamp(-80px, -4vw, -40px);
  top: 50%;
  transform: translateY(-50%);
  height: min(86%, 560px);
  width: auto;
  opacity: .13;
  pointer-events: none;
}
.mi-hero__wrap {
  position: relative;
  box-sizing: border-box;
  max-width: 88rem;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
  gap: 40px;
  align-items: center;
}
.mi-hero__side {
  display: grid;
  gap: 18px;
  align-items: start;
}
.mi-hero__eyebrow { color: var(--mi-sun-500); }

/* ---- Poster lettering (brand signature) ---- */
.mi-hero__poster { margin: 18px 0 0; }
.mi-poster-word {
  font-family: var(--mi-font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: .95;
  display: block;
  font-size: clamp(30px, 6.2vw, 70px);
  color: var(--mi-hero-ink);
}
.mi-poster-word--mi {
  color: var(--mi-coral-600);
  font-weight: 800;
  font-size: clamp(40px, 9vw, 104px);
}
.mi-poster-word--w3 { color: var(--mi-sava-300); }
.mi-poster-word--w4 { color: var(--mi-sun-500); }

.mi-hero__sub {
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.55;
  color: var(--mi-hero-sub);
  max-width: 560px;
  margin: 26px 0 0;
}
.mi-hero__sub b { color: var(--mi-hero-ink); }
.mi-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.mi-hero__trust {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--mi-hero-sub);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mi-hero__trust svg { width: 17px; height: 17px; flex: none; fill: currentColor; }

.mi-hero-register {
  box-sizing: border-box;
  width: min(100%, 610px);
  margin-top: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(3px);
}
.mi-hero-register__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.mi-hero-register__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.mi-hero-register__copy strong {
  font-family: var(--mi-font-display);
  font-size: 18px;
  line-height: 1.2;
  color: var(--mi-hero-ink);
}
.mi-hero-register__copy span {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--mi-hero-sub);
}
.mi-hero-register__benefits {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
}
.mi-hero-register__benefits li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--mi-hero-ink);
}
.mi-hero-register__benefits svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
  color: var(--mi-sun-500);
}
.mi-hero-register .mi-btn {
  justify-content: center;
  text-align: center;
  white-space: normal;
}

/* ---- Brand pill buttons (design-kit .mi-btn, reused by hero + CTA) ---- */
.mi-btn {
  font-family: var(--mi-font-display);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--mi-radius-pill);
  border: 1.5px solid transparent;
  padding: 12px 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background-color 160ms var(--mi-ease), color 160ms var(--mi-ease),
              border-color 160ms var(--mi-ease), transform 140ms var(--mi-ease);
}
.mi-btn:active { transform: scale(.97); }
.mi-btn svg { width: 19px; height: 19px; flex: none; fill: currentColor; }
.mi-btn--lg { font-size: 16px; padding: 15px 28px; }
.mi-btn--primary { background: var(--mi-coral-btn); color: #fff; }
.mi-btn--primary:hover,
.mi-btn--primary:focus-visible { background: var(--mi-coral-700); color: #fff; }
.mi-btn--sun { background: var(--mi-sun-500); color: var(--mi-navy-800); border-color: var(--mi-sun-500); }
.mi-btn--sun:hover,
.mi-btn--sun:focus-visible { background: #fff; color: var(--mi-navy-800); border-color: #fff; }
.mi-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.mi-btn--ghost-light:hover,
.mi-btn--ghost-light:focus-visible { background: #fff; color: var(--mi-navy-800); }
.mi-btn--ghost { background: transparent; color: var(--mi-navy-700); border-color: var(--mi-navy-700); }
.mi-btn--ghost:hover,
.mi-btn--ghost:focus-visible { background: var(--mi-navy-700); color: #fff; }
.mi-btn--sm { font-size: 14px; padding: 10px 16px; }

/* ---- Live ticker card (right hero column) ---- */
.mi-ticker {
  background: var(--mi-ticker-bg);
  border: 1.5px solid var(--mi-ticker-border);
  border-radius: 22px;
  padding: 22px;
  backdrop-filter: blur(4px);
}
.mi-ticker__head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.mi-ticker__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--mi-park-500);
  box-shadow: 0 0 0 4px rgba(182, 207, 125, .25);
}
@media (prefers-reduced-motion: no-preference) {
  .mi-ticker__dot { animation: miTickerPulse 2s var(--mi-ease) infinite; }
  @keyframes miTickerPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(182, 207, 125, .25); }
    50% { box-shadow: 0 0 0 7px rgba(182, 207, 125, .12); }
  }
}
.mi-ticker__label {
  font-family: var(--mi-font-display);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--mi-hero-ink);
}
.mi-ticker__items { display: flex; flex-direction: column; }
.mi-ticker__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid var(--mi-ticker-divider);
}
.mi-ticker__item:first-child { border-top: none; padding-top: 0; }
.mi-ticker__icon {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--mi-ticker-icon-bg);
  color: var(--mi-hero-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.mi-ticker__icon svg { width: 17px; height: 17px; fill: currentColor; }
.mi-ticker__body { font-size: 14.5px; line-height: 1.4; color: var(--mi-hero-ink); }
.mi-ticker__body b { color: var(--mi-hero-ink); }
a.mi-ticker__target, .mi-ticker__target { color: var(--mi-sun-500); }
a.mi-ticker__target:hover { color: #fff; }
.mi-ticker__when { display: block; font-size: 12.5px; color: var(--mi-hero-sub); margin-top: 2px; }

/* ---- Org stats strip under the hero divider ---- */
.mi-hero-stats__divider { border-top: 1px solid var(--mi-hero-divider); }
.mi-hero-stats {
  box-sizing: border-box;
  max-width: 88rem;
  margin: 0 auto;
  padding: 26px 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 16px;
}
.mi-hero-stats__item { text-align: center; }
.mi-hero-stats__item:first-child { text-align: left; }
.mi-hero-stats__value {
  font-family: var(--mi-font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1;
  color: var(--mi-hero-ink);
}
.mi-hero-stats__item--hi .mi-hero-stats__value { color: var(--mi-sun-500); }
.mi-hero-stats__label { font-size: 13.5px; color: var(--mi-hero-sub); margin-top: 6px; }

/* ---- Responsive: collapse the split, then the strip; hide ticker ---- */
@media (max-width: 880px) {
  .mi-hero__wrap { grid-template-columns: 1fr; gap: 24px; }
  .mi-hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
}
@media (max-width: 860px) {
  .mi-hide-sm { display: none !important; }
}
@media (max-width: 540px) {
  .mi-hero-stats { grid-template-columns: 1fr; }
  .mi-hero-stats__item { text-align: left; }
  .mi-hero-register__header { grid-template-columns: 1fr; }
  .mi-hero-register__benefits { grid-template-columns: 1fr; }
}

/* ============================================================
   11b. Public capability guide
   ============================================================ */
.mi-guide {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.4rem 0 2.6rem;
  color: var(--mi-navy-700);
}
.mi-guide-hero {
  max-width: 48rem;
  margin: 0 auto 1.1rem;
  text-align: center;
}
.mi-guide-hero h1 {
  margin: 0 0 .45rem;
  color: var(--mi-navy-700);
}
.mi-guide-hero p {
  margin: 0;
  color: var(--mi-navy-400);
}
.mi-guide-account {
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  padding: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.mi-guide-account h2 {
  margin: 0 0 .3rem;
  color: var(--mi-navy-700);
}
.mi-guide-account p {
  margin: 0;
  color: var(--mi-navy-400);
}
.mi-guide-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.mi-guide-group {
  min-width: 0;
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  padding: 1rem;
  display: grid;
  gap: .85rem;
  align-content: start;
}
.mi-guide-group:last-child {
  grid-column: 1 / -1;
}
.mi-guide-group__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}
.mi-guide-group__icon,
.mi-guide-action__icon {
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mi-cream-100);
  color: var(--mi-coral-600);
}
.mi-guide-group__icon {
  width: 2.25rem;
  height: 2.25rem;
}
.mi-guide-action__icon {
  width: 2rem;
  height: 2rem;
  flex: none;
  background: #fff;
}
.mi-guide-group__icon svg,
.mi-guide-action__icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.mi-guide-group h2 {
  margin: 0 0 .25rem;
  color: var(--mi-navy-700);
}
.mi-guide-group p {
  margin: 0;
  color: var(--mi-navy-400);
  line-height: 1.4;
}
.mi-guide-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.mi-guide-action {
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
  padding: .72rem;
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  color: var(--mi-navy-700);
  text-decoration: none;
}
.mi-guide-action:hover,
.mi-guide-action:focus-visible {
  border-color: var(--mi-coral-600);
}
.mi-guide-action strong,
.mi-guide-action em {
  display: block;
  min-width: 0;
  font-style: normal;
}
.mi-guide-action strong {
  font-weight: 800;
  line-height: 1.2;
}
.mi-guide-action em {
  margin-top: .18rem;
  color: var(--mi-navy-400);
  font-size: .86rem;
  line-height: 1.35;
}
.mi-guide-group__cta {
  justify-self: start;
  color: var(--mi-coral-600);
  font-weight: 800;
  text-decoration: underline;
}
@media (max-width: 880px) {
  .mi-guide-groups {
    grid-template-columns: 1fr;
  }
  .mi-guide-group:last-child {
    grid-column: auto;
  }
}
@media (max-width: 620px) {
  .mi-guide-account {
    grid-template-columns: 1fr;
  }
  .mi-guide-account .mi-btn {
    justify-self: start;
  }
  .mi-guide-actions {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   11c. Private citizen account overview
   ============================================================ */
.mi-account-page {
  max-width: 72rem;
  width: min(72rem, calc(100vw - 2rem));
  margin: 0 auto;
}
.mi-account-overview {
  max-width: 100%;
  margin: 0 auto;
  padding: 1.4rem 0 2.4rem;
  color: var(--mi-navy-700);
  overflow-x: clip;
}
.mi-account-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
  align-items: end;
  margin-bottom: 1.15rem;
}
.mi-account-hero h1 {
  margin: 0 0 .45rem;
  color: var(--mi-navy-700);
  font-size: clamp(2.45rem, 5vw, 4.4rem);
  line-height: .95;
}
.mi-account-hero p {
  margin: 0;
  max-width: 50rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--mi-navy-500, var(--mi-navy-400));
}
.mi-account-progress {
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  padding: .85rem;
  display: grid;
  gap: .45rem;
}
.mi-account-progress span,
.mi-account-stat span,
.mi-account-card span,
.mi-setup-step__text,
.mi-account-panel p,
.mi-account-links span,
.mi-verification-options span {
  color: var(--mi-navy-400);
}
.mi-account-progress strong {
  font-family: var(--mi-font-display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--mi-coral-600);
}
.mi-account-progress__bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--mi-cream-100);
}
.mi-account-progress__bar span {
  display: block;
  height: 100%;
  background: var(--mi-coral-600);
}
.mi-account-dashboard {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.mi-account-card {
  min-width: 0;
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  padding: .85rem;
  color: var(--mi-navy-700);
  text-decoration: none;
  display: grid;
  align-content: start;
  gap: .25rem;
}
.mi-account-card:hover,
.mi-account-card:focus-visible {
  border-color: var(--mi-coral-600);
  box-shadow: 0 0 0 2px rgba(222, 91, 70, .14);
}
.mi-account-card strong,
.mi-account-card span,
.mi-account-card small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mi-account-card strong {
  font-family: var(--mi-font-display);
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--mi-navy-700);
}
.mi-account-card span {
  font-size: .84rem;
  line-height: 1.32;
}
.mi-account-card small {
  color: var(--mi-navy-400);
  font-size: .78rem;
  line-height: 1.3;
}
.mi-account-card--progress {
  grid-column: span 2;
  background: var(--mi-cream-100);
}
.mi-account-card--progress strong {
  color: var(--mi-coral-600);
  font-size: 1.7rem;
}
.mi-account-card--combined {
  grid-column: span 2;
  background: #f8fbf0;
}
.mi-account-card__level {
  margin-top: .35rem;
  border: 1px solid rgba(122, 154, 63, .35);
  border-radius: 8px;
  background: #fff;
  padding: .48rem .55rem;
}
.mi-account-card__level span {
  color: var(--mi-navy-400);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
}
.mi-account-card__level strong {
  margin-top: .12rem;
  color: var(--mi-park-700, #5f7f2f);
  font-size: 1.1rem;
}
.mi-account-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.mi-account-stat {
  min-width: 0;
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  padding: .85rem;
}
.mi-account-stat strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--mi-font-display);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--mi-navy-700);
}
.mi-account-stat span {
  display: block;
  margin-top: .25rem;
  font-size: .86rem;
}
.mi-account-rhythm {
  margin-bottom: 1rem;
  padding: .95rem 0 1.05rem;
  border-top: 1.5px solid var(--mi-line);
  border-bottom: 1.5px solid var(--mi-line);
}
.mi-account-rhythm__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: .75rem;
}
.mi-account-rhythm__head h2 {
  margin: 0;
  color: var(--mi-navy-700);
}
.mi-account-rhythm__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}
.mi-account-rhythm__item {
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  padding: .75rem;
}
.mi-account-rhythm__item strong,
.mi-account-rhythm__item span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mi-account-rhythm__item strong {
  font-family: var(--mi-font-display);
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--mi-navy-700);
}
.mi-account-rhythm__item span {
  margin-top: .25rem;
  color: var(--mi-navy-400);
  font-size: .84rem;
  line-height: 1.3;
}
.mi-account-rhythm__bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  margin-top: .55rem;
  background: var(--mi-cream-100);
}
.mi-account-rhythm__bar span {
  display: block;
  height: 100%;
  background: var(--mi-coral-600);
}
.mi-account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, .9fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.mi-account-panel {
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  padding: 1rem;
}
.mi-account-panel--wide {
  min-width: 0;
}
.mi-account-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: .85rem;
}
.mi-account-panel__head h2,
.mi-account-panel h2 {
  margin: 0;
  color: var(--mi-navy-700);
}
.mi-account-activity {
  margin-bottom: 1rem;
}
.mi-account-activity__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: .75rem;
}
.mi-account-activity__section {
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  padding: .75rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: .55rem;
}
.mi-account-activity__section h3 {
  margin: 0;
  font-family: var(--mi-font-display);
  font-size: 1rem;
  color: var(--mi-navy-700);
}
.mi-account-activity__title-link {
  color: inherit;
  text-decoration: none;
}
.mi-account-activity__title-link:hover,
.mi-account-activity__title-link:focus-visible {
  color: var(--mi-coral-600);
  text-decoration: underline;
}
.mi-account-activity__section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.mi-account-activity__section li > a,
.mi-account-activity__empty,
.mi-account-activity__summary {
  min-width: 0;
  min-height: 4.65rem;
  border: 0;
  border-radius: 8px;
  background: var(--mi-cream-100);
  padding: .7rem;
  display: block;
  color: var(--mi-navy-700);
  text-decoration: none;
}
.mi-account-activity__section li > a:hover,
.mi-account-activity__section li > a:focus-visible,
.mi-account-activity__empty:hover,
.mi-account-activity__empty:focus-visible,
.mi-account-activity__summary:hover,
.mi-account-activity__summary:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--mi-coral-600);
}
.mi-account-activity__section strong,
.mi-account-activity__section span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mi-account-activity__section strong {
  font-weight: 800;
}
.mi-account-activity__section span,
.mi-account-activity__empty {
  color: var(--mi-navy-400);
  font-size: .86rem;
  line-height: 1.35;
}
.mi-account-activity__count {
  font-family: var(--mi-font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--mi-navy-700);
}
.mi-setup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.mi-setup-step {
  position: relative;
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
  padding: .75rem .8rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
}
.mi-setup-step--done {
  background: #f4f8e7;
}
.mi-setup-step--pending {
  background: #fdf6d6;
}
.mi-setup-step__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--mi-coral-600);
}
.mi-setup-step__icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.mi-setup-step__body {
  min-width: 0;
}
.mi-setup-step__title {
  display: block;
  font-weight: 800;
  color: var(--mi-navy-700);
}
.mi-setup-step__text {
  display: block;
  font-size: .88rem;
  line-height: 1.35;
}
.mi-status-pill {
  border-radius: 999px;
  padding: .25rem .55rem;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  background: #fff;
  color: var(--mi-navy-600);
}
.mi-status-pill--done {
  background: var(--mi-park-600, #7a9a3f);
  color: #fff;
}
.mi-status-pill--pending {
  background: var(--mi-sun-500);
  color: var(--mi-navy-800);
}
.mi-status-pill--todo,
.mi-status-pill--optional {
  border: 1px solid var(--mi-line);
}
.mi-setup-step__link {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  text-indent: -9999px;
  overflow: hidden;
}
.mi-setup-step:focus-within {
  outline: 2px solid var(--mi-coral-600);
  outline-offset: 2px;
}
.mi-verification-options {
  display: grid;
  gap: .65rem;
}
.mi-verification-options div {
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
  padding: .7rem .75rem;
}
.mi-verification-options strong,
.mi-verification-options span {
  display: block;
}
.mi-verification-options strong {
  color: var(--mi-navy-700);
}
.mi-verification-options + .mi-btn {
  margin-top: .9rem;
}
.mi-verification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .95rem;
}
.mi-verification-privacy {
  margin: .85rem 0 0;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--mi-navy-400);
}
.mi-account-recognition {
  margin-bottom: 1rem;
}
.mi-account-recognition__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}
.mi-account-recognition__body p {
  margin: 0;
}
.mi-account-recognition__list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}
.mi-account-recognition__list li {
  border: 1px solid var(--mi-line);
  border-radius: 999px;
  background: var(--mi-cream-100);
  padding: .35rem .6rem;
  font-size: .84rem;
  font-weight: 800;
  color: var(--mi-navy-700);
}
.mi-account-recognition__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}
.mi-account-recognition__actions form {
  margin: 0;
}
.mi-account-recognition__privacy {
  margin: .85rem 0 0;
  font-size: .88rem;
  line-height: 1.4;
}
.mi-account-settings {
  margin-bottom: 1rem;
  scroll-margin-top: 5rem;
}
.mi-account-settings--featured {
  box-shadow: 0 10px 28px rgba(42, 59, 82, .08);
}
.mi-account-settings,
.mi-account-settings * {
  box-sizing: border-box;
}
.mi-account-settings .form-defaults,
.mi-account-settings .upload-modal,
.mi-account-settings .upload-modal__dropzone,
.mi-account-settings .upload-modal__dropzone-placeholder {
  max-width: 100%;
  min-width: 0;
}
.mi-account-settings input,
.mi-account-settings select,
.mi-account-settings textarea {
  width: 100%;
  max-width: 100%;
}
.mi-account-notice {
  border: 1px solid var(--mi-sun-500);
  border-radius: 8px;
  background: #fff8d8;
  padding: .85rem;
  margin-bottom: 1rem;
}
.mi-account-notice p {
  margin: .35rem 0 0;
}
.mi-account-settings__grid {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  gap: 1.15rem;
  align-items: start;
}
.mi-account-settings__avatar {
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
  padding: .75rem;
}
.mi-account-settings__avatar label {
  display: grid;
  gap: .5rem;
  margin: 0;
}
.mi-account-settings__avatar .button {
  min-width: 0;
  width: 100%;
  white-space: normal;
}
.mi-account-settings__fields {
  min-width: 0;
}
.mi-account-settings__required .help-text {
  display: block;
  margin: 0 0 .75rem;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
  padding: .55rem .65rem;
  color: var(--mi-navy-400);
  font-size: .84rem;
  line-height: 1.35;
}
.mi-account-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1rem;
}
.mi-account-form-grid > *,
.mi-account-settings__fields > * {
  min-width: 0;
}
.mi-account-settings-form label {
  display: grid;
  gap: .38rem;
  margin: 0;
  color: var(--mi-navy-700);
  font-weight: 800;
  line-height: 1.25;
}
.mi-account-settings-form label input,
.mi-account-settings-form label select,
.mi-account-settings-form label textarea {
  margin: 0;
  min-height: 2.8rem;
  border-radius: 8px;
}
.mi-account-settings-form label textarea {
  min-height: 7.5rem;
}
.mi-account-settings-form label .help-text,
.mi-account-settings-form .help-text {
  color: var(--mi-navy-400);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.35;
}
.mi-account-settings-form .label-required {
  color: var(--mi-coral-600);
}
/* ---- Volunteering ------------------------------------------------------ */
.mi-volunteer-tabs,
.mi-volunteer-section,
.mi-volunteer-form,
.mi-volunteer-dashboard {
  margin-bottom: 1rem;
}
.mi-volunteer-tabs .mi-surface-tab {
  flex: 1 1 10.5rem;
  text-align: center;
}
.mi-volunteer-opportunities {
  align-items: start;
}
.mi-volunteer-card .heading5 {
  margin: 0 0 .35rem;
  color: var(--mi-navy-700);
  font-size: 1.03rem;
  line-height: 1.2;
}
.mi-volunteer-card__badges {
  gap: .35rem;
  margin: -.1rem 0 .55rem;
}
.mi-volunteer-card__meta {
  margin-bottom: .4rem;
}
.mi-volunteer-card__actions {
  margin-top: .65rem;
}
.mi-volunteer-details {
  margin: .35rem 0 0;
  padding-top: .4rem;
  border-top: 1px solid var(--mi-line);
}
.mi-volunteer-details summary {
  color: var(--mi-coral-600);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 850;
}
.mi-volunteer-hours-form {
  align-items: center;
  margin-top: .45rem;
}
.mi-volunteer-hours-form label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  color: var(--mi-navy-700);
  font-weight: 800;
}
.mi-volunteer-hours-form input {
  width: 4.5rem;
  min-height: 2rem;
  padding: .25rem .45rem;
}
.mi-volunteer-list-row {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  min-height: auto;
}
.mi-volunteer-form {
  display: grid;
  gap: .85rem;
}
.mi-volunteer-form .mi-account-settings-form {
  display: grid;
  gap: .75rem;
}
.mi-volunteer-form__intro {
  max-width: 48rem;
  margin: -.25rem 0 .1rem;
  color: var(--mi-navy-400);
  line-height: 1.45;
}
.mi-volunteer-form__grid {
  align-items: start;
}
.mi-volunteer-form__schedule,
.mi-volunteer-form__split {
  display: grid;
  gap: .6rem;
  align-items: start;
}
.mi-volunteer-form__schedule {
  grid-template-columns: 1.15fr 1.35fr .7fr;
}
.mi-volunteer-form__split {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mi-volunteer-form__group {
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
  padding: .55rem;
  margin: 0;
}
.mi-volunteer-form__group legend {
  padding: 0 .2rem;
  color: var(--mi-navy-700);
  font-family: var(--mi-font-display);
  font-size: .86rem;
  font-weight: 850;
}
.mi-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.7rem, 1fr));
  gap: .28rem;
  margin-top: .4rem;
}
.mi-choice-grid--days,
.mi-choice-grid--months {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mi-choice-grid--time {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mi-choice-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr));
}
.mi-account-settings-form .mi-choice-pill {
  position: relative;
  display: block;
  margin: 0;
  min-width: 0;
  cursor: pointer;
}
.mi-choice-pill input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  min-height: 0;
  opacity: 0;
}
.mi-choice-pill span {
  position: relative;
  min-height: 1.75rem;
  border: 1px solid rgba(14, 59, 84, .16);
  border-radius: 7px;
  background: #fff;
  color: var(--mi-navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  padding: .24rem .38rem;
  font-size: .74rem;
  font-weight: 780;
  line-height: 1.12;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background-color 140ms var(--mi-ease),
              border-color 140ms var(--mi-ease),
              color 140ms var(--mi-ease);
}
.mi-choice-pill span::before {
  content: "";
  width: .86rem;
  height: .86rem;
  border: 1.5px solid rgba(14, 59, 84, .32);
  border-radius: 4px;
  background: #fff;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
}
.mi-choice-pill input:checked + span {
  border-color: var(--mi-coral-600);
  background: var(--mi-navy-800);
  color: #fff;
  font-weight: 850;
  box-shadow: 0 0 0 2px rgba(224, 82, 65, .28), inset 0 -2px 0 rgba(255, 255, 255, .16);
}
.mi-choice-pill input:checked + span::before {
  content: "✓";
  border-color: #fff;
  background: var(--mi-coral-600);
  color: #fff;
}
.mi-choice-pill input:focus-visible + span {
  outline: 2px solid var(--mi-sun-600);
  outline-offset: 2px;
}
.mi-choice-pill:hover span {
  border-color: var(--mi-coral-600);
}
.mi-volunteer-form__actions {
  display: flex;
  justify-content: flex-start;
}
.mi-volunteer-form textarea {
  min-height: 4.5rem;
}
@media (max-width: 980px) {
  .mi-volunteer-form__schedule,
  .mi-volunteer-form__split {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .mi-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mi-choice-grid--days,
  .mi-choice-grid--months {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mi-choice-grid--time,
  .mi-choice-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.mi-account-password {
  margin-top: .9rem;
}
.mi-inline-link {
  border: 0;
  background: transparent;
  color: var(--mi-coral-600);
  text-decoration: underline;
  font-weight: 800;
  padding: 0;
  cursor: pointer;
}
.mi-account-settings__actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-start;
}
.mi-organization-section {
  margin-bottom: 1rem;
  scroll-margin-top: 5rem;
}
.mi-organization-workflow {
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
  padding: .85rem;
  margin-top: .9rem;
}
.mi-organization-workflow h3,
.mi-organization-request-list h3 {
  margin: 0 0 .55rem;
  color: var(--mi-navy-700);
}
.mi-organization-workflow p {
  margin: 0 0 .75rem;
}
.mi-organization-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  align-items: start;
  margin-top: .9rem;
}
.mi-organization-request-list {
  margin-top: 1rem;
}
.mi-organization-list-row {
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
  padding: .75rem;
  display: flex;
  justify-content: space-between;
  gap: .85rem;
  align-items: center;
  margin-bottom: .55rem;
}
.mi-organization-list-row > span,
.mi-organization-list-row strong,
.mi-organization-list-row small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mi-organization-list-row small {
  color: var(--mi-navy-400);
}
.mi-organization-list-row--stacked {
  align-items: stretch;
  display: grid;
}
.mi-organization-list-row--stacked p {
  margin: 0;
}
.mi-organization-inline-form {
  display: flex;
  flex: 0 1 32rem;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
  align-items: flex-end;
  margin: 0;
}
.mi-organization-inline-form label {
  flex: 1 1 9rem;
}
.mi-organization-inline-form input[type="number"] {
  max-width: 6rem;
}
.mi-admin-quicknav__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}
.mi-admin-quicknav__group {
  min-width: 0;
}
.mi-admin-quicknav__group h3 {
  margin: 0 0 .45rem;
  font-size: 1rem;
}
.mi-admin-quicknav__links {
  display: grid;
  gap: .45rem;
}
.mi-admin-quicknav__link {
  min-height: 3.6rem;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  padding: .65rem .7rem;
  color: var(--mi-navy-700);
  display: block;
  text-decoration: none;
}
.mi-admin-quicknav__link:hover,
.mi-admin-quicknav__link:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--mi-coral-600);
  color: var(--mi-navy-800);
}
.mi-admin-quicknav__link strong,
.mi-admin-quicknav__link span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mi-admin-quicknav__link span {
  margin-top: .15rem;
  color: var(--mi-navy-400);
  font-size: .84rem;
  line-height: 1.35;
}
@media (max-width: 760px) {
  .mi-organization-workflow-grid,
  .mi-admin-quicknav__groups {
    grid-template-columns: 1fr;
  }
  .mi-organization-list-row {
    align-items: stretch;
    display: grid;
  }
  .mi-organization-inline-form {
    justify-content: stretch;
  }
  .mi-organization-inline-form input[type="number"] {
    max-width: 100%;
  }
  .mi-organization-inline-form .mi-btn {
    width: 100%;
    justify-content: center;
  }
}
.mi-account-profile-privacy {
  border-top: 1.5px solid var(--mi-line);
  margin-top: 1rem;
  padding-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}
.mi-account-profile-privacy strong,
.mi-account-profile-privacy span,
.mi-account-profile-privacy em {
  display: block;
  min-width: 0;
}
.mi-account-profile-privacy strong {
  color: var(--mi-navy-700);
  font-weight: 800;
}
.mi-account-profile-privacy span,
.mi-account-profile-privacy em {
  color: var(--mi-navy-400);
  font-size: .88rem;
  line-height: 1.4;
}
.mi-account-profile-privacy em {
  font-style: normal;
  margin-top: .3rem;
}
.mi-account-profile-privacy__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}
.mi-account-profile-privacy__actions form {
  margin: 0;
}
.mi-account-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.mi-account-links a {
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
  padding: .85rem;
  color: var(--mi-navy-700);
  text-decoration: none;
}
.mi-account-links a:hover,
.mi-account-links a:focus-visible {
  border-color: var(--mi-coral-600);
}
.mi-account-links strong,
.mi-account-links span {
  display: block;
}
.mi-account-links strong {
  margin-bottom: .22rem;
  font-family: var(--mi-font-display);
  font-size: 1rem;
}
.mi-account-links span {
  font-size: .88rem;
  line-height: 1.35;
}
@media (max-width: 880px) {
  .mi-account-hero,
  .mi-account-settings__grid,
  .mi-account-grid {
    grid-template-columns: 1fr;
  }
  .mi-account-activity__grid,
  .mi-account-stats,
  .mi-account-links,
  .mi-account-dashboard,
  .mi-account-rhythm__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mi-account-card--progress,
  .mi-account-card--combined {
    grid-column: span 2;
  }
}
@media (max-width: 560px) {
  .mi-account-activity__grid,
  .mi-account-stats,
  .mi-account-links,
  .mi-account-dashboard,
  .mi-account-form-grid,
  .mi-account-rhythm__grid {
    grid-template-columns: 1fr;
  }
  .mi-account-card--progress,
  .mi-account-card--combined {
    grid-column: auto;
  }
  .mi-account-panel__head,
  .mi-donation-hero,
  .mi-setup-step {
    grid-template-columns: 1fr;
  }
  .mi-account-panel__head {
    display: grid;
  }
  .mi-account-rhythm__head {
    display: grid;
  }
  .mi-account-recognition__body {
    grid-template-columns: 1fr;
  }
  .mi-account-recognition__actions {
    justify-content: flex-start;
  }
  .mi-account-profile-privacy {
    grid-template-columns: 1fr;
  }
  .mi-account-profile-privacy__actions {
    justify-content: flex-start;
  }
  .mi-status-pill {
    justify-self: start;
  }
}

/* ---- Postal verification public flow ---------------------------------- */
.mi-postal-page {
  max-width: 72rem;
  margin: 1.5rem auto 3rem;
}
.mi-postal-page__intro {
  max-width: 48rem;
  margin-bottom: 1.1rem;
}
.mi-postal-page__intro h1 {
  margin: 0 0 .55rem;
}
.mi-postal-page__intro p {
  margin: 0;
  color: var(--mi-navy-600);
}
.mi-postal-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  gap: 1rem;
  align-items: start;
}
.mi-postal-form,
.mi-postal-note {
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--mi-shadow-sm);
  padding: 1rem;
}
.mi-postal-note {
  background: var(--mi-cream-100);
}
.mi-postal-note h2,
.mi-postal-note h3,
.mi-postal-form h2 {
  margin-top: 0;
}
.mi-postal-note ul {
  margin: .75rem 0;
  padding-left: 1.2rem;
}
.mi-postal-note li + li {
  margin-top: .45rem;
}
.mi-postal-form--waiting p {
  color: var(--mi-navy-600);
}
@media (max-width: 880px) {
  .mi-postal-page__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Registration benefits panel -------------------------------------- */
.mi-registration-benefits {
  margin: 0 0 1.25rem;
  border: 1.5px solid var(--mi-line);
  border-radius: 8px;
  background: #fff;
  padding: 1rem;
  color: var(--mi-navy-700);
}
.mi-registration-benefits__head h2 {
  margin: 0 0 .35rem;
  font-family: var(--mi-font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--mi-navy-700);
}
.mi-registration-benefits__head p {
  margin: 0;
  color: var(--mi-navy-400);
}
.mi-registration-benefits ul {
  list-style: none;
  margin: .9rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.mi-registration-benefits li {
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  background: var(--mi-cream-100);
  padding: .75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .45rem .6rem;
  align-items: start;
}
.mi-registration-benefits li > span {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--mi-coral-600);
  grid-row: span 2;
}
.mi-registration-benefits svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.mi-registration-benefits strong,
.mi-registration-benefits em {
  display: block;
  min-width: 0;
  font-style: normal;
}
.mi-registration-benefits strong {
  font-weight: 800;
  line-height: 1.2;
}
.mi-registration-benefits em {
  color: var(--mi-navy-400);
  font-size: .86rem;
  line-height: 1.35;
}
.mi-registration-benefits__link {
  display: inline-flex;
  color: var(--mi-coral-600);
  font-weight: 800;
  text-decoration: underline;
}
@media (max-width: 560px) {
  .mi-registration-benefits ul {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   12. Homepage closing CTA content block (decidim-bih :mi_cta)
   ============================================================ */
.mi-cta { text-align: center; }
.mi-cta__mark { height: 64px; width: auto; margin: 0 auto 22px; display: block; }
.mi-cta__title {
  font-family: var(--mi-font-display);
  font-weight: 800;
  font-size: clamp(30px, 5.5vw, 64px);
  line-height: .96;
  letter-spacing: .01em;
  color: var(--mi-navy-700);
  margin: 0;
  text-wrap: balance;
}
.mi-cta__title-accent { color: var(--mi-coral-text); }
.mi-cta__sub {
  font-size: 18px;
  color: var(--mi-navy-600);
  max-width: 540px;
  margin: 18px auto 30px;
}
.mi-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mi-cta__hashtag {
  margin: 18px 0 0;
  font-family: var(--mi-font-display);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--mi-coral-text);
}

/* ============================================================
   13. Accessibility — data-consent button contrast (WCAG 1.4.3)
   The core consent dialog buttons render in the brand secondary
   (sava blue), which fails 4.5:1 on white. Force AA-safe blues:
   solid accept gets white text on darker blue (5.11:1); the
   transparent reject/settings buttons get darker blue text on
   white (5.11:1). Scoped to the consent dialog only.
   ============================================================ */
#dc-dialog-wrapper #dc-dialog-accept.button {
  background: var(--mi-sava-700);
  border-color: var(--mi-sava-700);
  color: #fff;
}
#dc-dialog-wrapper #dc-dialog-reject.button,
#dc-dialog-wrapper #dc-dialog-settings.button {
  color: var(--mi-sava-700);
}

/* ============================================================
   14. Accessibility — minimum 44px tap targets (WCAG 2.5.5/2.5.8)
   Comfortable touch sizing for the key interactive controls.
   Uses min-height + flex centring so desktop layout is unaffected.
   ============================================================ */
/* Mobile menu trigger (hamburger) + mobile account dropdown trigger */
#main-dropdown-summary-mobile.main-bar__links-mobile__trigger,
#dropdown-trigger-links-mobile.main-bar__links-mobile__item {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Header actions: Help ("Pomoć") + login ("Prijava") and siblings */
.main-bar__links-desktop__item {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* The clickable LINKS in the header bar: enforce the 44px tap target on the
   anchor itself (not just the wrapper) and force AA-contrast nav blue — Decidim
   core colours these at the lighter --mi-sava-600 (#5b9bc4 = 3.03:1, fails AA). */
.main-bar__links-desktop a,
.main-bar__links-mobile a,
.main-bar__links-mobile__login {
  color: var(--mi-sava-700) !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Data-consent dialog buttons (accept / reject / settings) */
#dc-dialog-wrapper .cookies__right .button {
  min-height: 44px;
}

/* Report intake "Moja lokacija" geolocate button */
#bih-report-geolocate.button {
  min-height: 44px;
}

/* Report tracker action links + empty-state CTA. These render as Decidim
   box buttons (.button / .button.hollow) with no dedicated class hook, so
   we lift every solid/hollow box button to a 44px target while explicitly
   excluding the link-style .button__text variant (p-0/border-0, inline)
   so inline text actions keep their layout. Box buttons already sit near
   this height, so the floor only grows them slightly. */
.button:not([class*="button__text"]) {
  min-height: 44px;
}

@media (max-width: 640px) {
  /* Override the compact 32px cookie buttons to keep a 44px target */
  #dc-dialog-wrapper .cookies__right .button {
    min-height: 44px;
  }
}