/* City website and MyGenTri PWA: compact public information layouts.
   Load after the shared presentation contracts. Organization tokens own color;
   factual publication text, dates, contacts, and service actions remain visible. */
@media screen {
  html:root[data-city-government] {
    min-width: 0;
  }

  html:root body.city-government {
    min-width: 0;
    --city-radius-sm: .625rem;
    --city-radius-md: .875rem;
    --city-radius-lg: 1rem;
    --city-radius-xl: 1.25rem;
  }

  /* Public information reads at normal weight; headings mark the hierarchy. */
  html:root body.city-government :is(h1, h2) {
    font-weight: 600;
  }

  html:root body.city-government :is(h3, h4) {
    font-weight: 500;
  }

  html:root body.city-government :is(p, time, dd) {
    font-weight: 400;
  }

  html:root body.city-government .city-header .city-brand__copy strong {
    font-weight: 700;
  }

  html:root body.city-government .city-header .city-brand__copy :is(small, em) {
    font-weight: 500;
  }

  html:root body.city-government :is(.city-primary-nav a, .city-primary-nav__label, .city-header__forms, .city-menu-button, .city-breadcrumbs a, .city-module-tabs a, .city-home-search > div > button, .city-pagination a, .city-source-note > a, .city-feature-card a) {
    font-weight: 500;
  }

  html:root body.city-government :is(.city-govbar p, .city-record-card__topline time, .city-record-card__meta, .city-pagination > span) {
    font-weight: 400;
  }

  html:root body.city-government :is(.city-eyebrow, .city-home-search > label, .city-data-table th, .city-directory-table th, .city-stat span, .city-stat-strip > * > span) {
    font-weight: 500;
  }

  html:root body.city-government :is(.city-stat strong, .city-stat-strip > * > strong, .city-store-badge__title) {
    font-weight: 600;
  }

  html:root body.city-government .city-header__primary {
    min-height: 5rem;
    gap: 1rem;
  }

  html:root body.city-government .city-header .city-brand__mark {
    width: 3.5rem;
    height: 3.5rem;
    box-shadow: 0 0 0 3px var(--city-brand-soft);
  }

  html:root body.city-government .city-header .city-brand__copy strong {
    font-size: clamp(1.45rem, 2.3vw, 1.85rem);
    line-height: 1.05;
  }

  html:root body.city-government .city-breadcrumbs {
    padding-block: .625rem;
  }

  html:root body.city-government .city-breadcrumbs ol {
    font-size: .8125rem;
  }

  html:root body.city-government .city-page-hero__inner {
    align-items: center;
    gap: 1.25rem;
    padding-block: clamp(1.5rem, 2.8vw, 2.25rem);
  }

  html:root body.city-government .city-page-hero h1 {
    max-width: 28ch;
    margin: 0;
    font-size: clamp(2rem, 3.3vw, 2.75rem);
    letter-spacing: -.035em;
    line-height: 1.12;
  }

  html:root body.city-government .city-page-hero .city-eyebrow {
    margin-bottom: .5rem;
    color: var(--city-brand-strong);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .075em;
  }

  html:root body.city-government .city-page-hero__copy {
    max-width: 64ch;
    margin-top: .75rem;
    font-size: 1rem;
    line-height: 1.55;
  }

  html:root body.city-government .city-page-hero::after {
    right: -5rem;
    bottom: -9rem;
    width: 21rem;
    height: 21rem;
    border-width: 3rem;
    opacity: .6;
  }

  html:root body.city-government .city-page-hero__pattern {
    opacity: .15;
  }

  html:root body.city-government .city-module {
    padding-block: 1.25rem 2.5rem;
  }

  html:root body.city-government .city-module-search {
    max-width: none;
    gap: .5rem;
    margin-bottom: 1.125rem;
    padding: .875rem 1rem;
    border-radius: .875rem;
    box-shadow: none;
  }

  html:root body.city-government .city-module-search > label {
    font-size: .875rem;
    font-weight: 500;
  }

  html:root body.city-government .city-module-search input {
    min-height: 2.75rem;
    font-size: 1rem;
    line-height: 1.4;
  }

  html:root body.city-government :is(.city-button, .city-record-card__action, .city-record-card__details-toggle) {
    min-height: 2.75rem;
    border-radius: .625rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
  }

  html:root body.city-government .city-record-card {
    border-radius: 1rem !important;
    box-shadow: 0 2px 8px rgb(6 39 31 / 4%);
  }

  html:root body.city-government .city-record-card:hover {
    transform: none;
    box-shadow: 0 5px 15px rgb(6 39 31 / 7%);
  }

  html:root body.city-government .city-record-card__body {
    padding: 1rem;
  }

  html:root body.city-government .city-record-card h3 {
    margin-bottom: .5rem;
    font-size: 1.125rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  html:root body.city-government .city-record-card__topline {
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: .5rem;
  }

  html:root body.city-government .city-label {
    padding: .125rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .035em;
  }

  html:root body.city-government .city-record-card__topline time,
  html:root body.city-government .city-record-card__meta {
    font-size: .8125rem;
    line-height: 1.45;
  }

  html:root body.city-government .city-record-card__summary {
    margin-bottom: .875rem;
    font-size: .9375rem;
    line-height: 1.55;
  }

  html:root body.city-government .city-record-list {
    gap: .75rem;
  }

  html:root body.city-government .city-record-list > .city-record-card,
  html:root body.city-government .city-record-list > .city-record-card:not(.city-record-card--image) {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    padding: 1rem;
  }

  html:root body.city-government .city-record-list > .city-record-card--image {
    grid-template-columns: 5rem minmax(0, 1fr);
  }

  html:root body.city-government .city-record-list .city-record-card__symbol {
    width: 3rem;
    height: 3rem;
    margin: 0;
    border-radius: .75rem;
  }

  html:root body.city-government .city-record-list .city-record-card__image {
    height: 5rem;
    aspect-ratio: 1;
    border-radius: .625rem;
  }

  html:root body.city-government .city-record-list .city-record-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 1.5rem;
    padding: 0;
  }

  html:root body.city-government .city-record-list .city-record-card__body > :is(.city-record-card__topline, h3, .city-record-card__meta, .city-record-card__facts, .city-record-card__summary) {
    grid-column: 1;
  }

  html:root body.city-government .city-record-card__facts {
    display: grid;
    gap: .375rem;
    margin: 0 0 .5rem;
    color: var(--city-text);
    font-size: .875rem;
    line-height: 1.45;
  }

  html:root body.city-government .city-record-card__facts > div {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: .75rem;
  }

  html:root body.city-government .city-record-card__facts dt {
    color: var(--city-muted);
    font-weight: 500;
  }

  html:root body.city-government .city-record-card__facts dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  html:root body.city-government .city-record-card__facts a {
    color: var(--city-brand-strong);
    text-underline-offset: .15em;
  }

  html:root body.city-government .city-record-card__date-label {
    font-weight: 400;
  }

  html:root body.city-government .city-record-list .city-record-card__body > .city-record-card__action {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    margin-top: 0;
    white-space: nowrap;
  }

  html:root body.city-government .city-record-list .city-record-card__body > .city-record-card__actions {
    grid-column: 1 / -1;
    margin-top: .5rem;
  }

  html:root body.city-government .city-record-list .city-record-card__summary {
    margin-bottom: 0;
  }

  html:root body.city-government :is(.city-module--news, .city-module--events) .city-record-grid {
    align-items: start;
    gap: 1.125rem;
  }

  html:root body.city-government .city-module--news .city-record-card__image {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  html:root body.city-government .city-module--events .city-record-card {
    border-top: 3px solid var(--city-brand);
  }

  html:root body.city-government .city-record-card--urgent {
    border-inline-start: 3px solid var(--bims-danger, #b42318);
  }

  html:root body.city-government .city-label--urgent {
    color: var(--bims-danger, #b42318);
    font-weight: 600;
  }

  html:root body.city-government .city-record-card__event-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    margin: 0 0 .75rem;
    padding: .375rem .625rem;
    border-radius: .5rem;
    background: var(--city-brand-soft);
    color: var(--city-brand-strong);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4;
  }

  html:root body.city-government .city-empty-state {
    padding: 1.75rem 1rem;
    border-radius: 1rem;
    background: var(--city-surface);
  }

  html:root body.city-government .city-empty-state > .bpw-icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: .5rem;
  }

  html:root body.city-government .city-empty-state h2 {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  html:root body.city-government .city-source-note {
    margin-top: 1.25rem;
    padding: .75rem 1rem;
    border-radius: .75rem;
  }

  html:root body.city-government .city-home-primary-actions {
    margin: 1.125rem 0;
    border: 0;
    background: transparent;
  }

  html:root body.city-government .city-home-primary-actions .city-quick-nav__grid {
    width: 100% !important;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0 !important;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html:root body.city-government .city-home-primary-actions .city-quick-nav__grid > a {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    grid-column: auto;
    align-items: center;
    align-content: center;
    gap: .75rem;
    min-height: 4.5rem;
    padding: .875rem;
    border: 1px solid var(--city-border-strong);
    border-radius: .875rem;
    background: var(--city-surface);
    color: var(--city-text-strong);
    text-align: left;
    text-decoration: none;
  }

  html:root body.city-government .city-home-primary-actions .city-quick-nav__grid > a > span {
    grid-row: auto;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    border-radius: .625rem;
    background: var(--city-brand-soft);
    color: var(--city-brand-strong);
  }

  html:root body.city-government .city-home-primary-actions .city-quick-nav__grid strong {
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
  }

  html:root body.city-government .city-home-primary-actions .city-quick-nav__grid > a:hover {
    border-color: var(--city-brand);
    background: var(--city-surface-soft);
    box-shadow: 0 3px 10px rgb(6 39 31 / 6%);
  }

  /* The citizen PWA keeps ordinary copy light and uses weight for hierarchy. */
  html:root body.public-service-body.citizen-service-unified-page :is(h1, h2) {
    font-weight: 600;
  }

  html:root body.public-service-body.citizen-service-unified-page :is(h3, h4) {
    font-weight: 500;
  }

  html:root body.public-service-body.citizen-service-unified-page :is(p, time, dd, .citizen-portal-mobile-update-list em, .citizen-portal-mobile-empty, .citizen-mobile-primary-module-copy small, .citizen-portal-service-desk-actions small) {
    font-weight: 400;
  }

  html:root body.public-service-body.citizen-service-unified-page :is(.eyebrow, .citizen-portal-mobile-kicker, .citizen-portal-mobile-section-heading > span, .citizen-portal-mobile-card-heading > div > span, .citizen-portal-mobile-update-list small, .field-title, .citizen-request-filters label, .citizen-request-filters input, .citizen-request-filters select) {
    font-weight: 500;
  }

  html:root body.public-service-body.citizen-service-unified-page :is(.citizen-mobile-header-notifications, .citizen-notification-toggle, .citizen-mobile-more > summary, .citizen-mobile-more-panel a, .citizen-desktop-nav a, .citizen-desktop-nav button, .citizen-portal-service-desk-actions a, .citizen-portal-service-desk-actions b, .citizen-portal-assurance-list span, .citizen-portal-mobile-card-heading > a, .citizen-portal-mobile-update-links a, .citizen-portal-mobile-empty > a, .citizen-website-mobile-tabs > a, .citizen-portal-mobile-update-list b) {
    font-weight: 500;
  }

  html:root body.public-service-body.citizen-service-unified-page :is(.btn, button, label, summary) {
    font-weight: 500;
  }

  /* The shared action contract marks .btn as 750!important. */
  html:root body.bims-pro-shell.public-service-body.citizen-service-unified-page .btn {
    font-weight: 500 !important;
  }

  html:root[data-bims-theme][data-citizen-theme] body.public-service-body.citizen-service-unified-page:not(.mydasma-body):not(.citizen-portal-home-page) :is(.public-hero-panel, .citizen-access-hero, .citizen-ask-intro) :is(h1, h2) {
    font-weight: 600;
  }

  html:root[data-bims-theme][data-citizen-theme] body.public-service-body.citizen-service-unified-page:not(.mydasma-body):not(.citizen-portal-home-page) :is(.field-title, .citizen-request-filters label) {
    font-weight: 500;
  }

  html:root[data-bims-theme][data-citizen-theme] body.public-service-body.citizen-service-unified-page:not(.mydasma-body):not(.citizen-portal-home-page) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .citizen-request-filter-count) {
    font-weight: 400;
  }

  html:root[data-bims-theme][data-citizen-theme] body.public-service-body.citizen-service-unified-page:not(.mydasma-body):not(.citizen-portal-home-page) .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav :is(a, button) {
    font-weight: 500;
  }

  /* Legacy MyGenTri pages share the same readable title and control weights. */
  html:root body.mydasma-body {
    --md-green: var(--bims-primary, #087a5b);
    --md-green-dark: var(--bims-primary-strong, #056146);
    --md-line: var(--bims-border, #d7e4dc);
    --md-card: var(--bims-surface, #ffffff);
    --md-ink: var(--bims-text-strong, #09251c);
    --md-muted: var(--bims-muted, #5c7068);
  }

  html:root body.mydasma-body :is(h1, h2) {
    font-weight: 600;
  }

  html:root body.mydasma-body :is(h3, h4, .mydasma-news-link b, .mydasma-history b, .mydasma-news-link small, .mydasma-reset-settings, .mydasma-choice-grid button b) {
    font-weight: 500;
  }

  html:root body.mydasma-body :is(.mydasma-section, .mydasma-auth-card, .mydasma-news-card, .mydasma-settings-group) {
    border-radius: 1rem !important;
    box-shadow: 0 2px 8px rgb(6 39 31 / 4%);
  }

  html:root body.mydasma-body :is(.mydasma-quick a, .mydasma-guest-options a, .mydasma-history a) {
    border-radius: .875rem !important;
    box-shadow: none;
  }

  html:root body.mydasma-body .mydasma-quick a {
    min-height: 5rem;
    padding: .75rem .375rem;
    font-size: .8125rem;
  }

  html:root body.mydasma-body :is(.mydasma-action-link, .mydasma-form button, .mydasma-guest-actions a, .mydasma-install) {
    min-height: 2.75rem;
    border-radius: .625rem !important;
    font-size: .875rem;
    font-weight: 500;
  }

  html:root body.mydasma-body .mydasma-action-link {
    background: var(--bims-primary-soft, #dff5e9);
    color: var(--bims-primary-strong, #056146);
  }

  html:root body.mydasma-body .mydasma-action-link.is-emergency {
    background: var(--bims-danger-soft, #fff0eb);
    color: var(--bims-danger, #b42318);
  }

  html:root body.mydasma-body .mydasma-section-head p,
  html:root body.mydasma-body .mydasma-guest > p,
  html:root body.mydasma-body .mydasma-welcome > p {
    display: none;
  }

  html:root body.mydasma-body .mydasma-news-link b,
  html:root body.mydasma-body .mydasma-history b {
    font-size: .9375rem;
    line-height: 1.45;
  }

  html:root body.mydasma-body .mydasma-news-link em {
    font-size: .8125rem;
    line-height: 1.45;
  }
}

@media screen and (min-width: 768px) {
  html:root body.city-government .city-module-tabs {
    gap: 1.25rem !important;
    padding-block: .5rem 0;
    border-bottom: 1px solid var(--city-border);
  }

  html:root body.city-government .city-module-tabs > a {
    flex: 0 0 auto !important;
    min-height: 2.75rem !important;
    padding: .75rem .125rem !important;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    font-size: .9375rem !important;
    font-weight: 500;
    line-height: 1.35 !important;
  }

  html:root body.city-government .city-module-tabs > a:hover {
    color: var(--city-brand-strong);
    border-bottom-color: var(--city-border-strong);
  }

  html:root body.city-government .city-module-tabs > a[aria-current="page"] {
    border-bottom-color: var(--city-brand);
    background: transparent;
    color: var(--city-brand-strong);
    font-weight: 500;
  }
}

@media screen and (max-width: 767px) {
  html:root body.city-government .city-header__primary {
    min-height: 4.5rem;
    padding-block: .5rem;
    gap: .75rem;
  }

  html:root body.city-government .city-header .city-brand__mark {
    width: 2.75rem;
    height: 2.75rem;
  }

  html:root body.city-government .city-header .city-brand__copy strong {
    font-size: 1.3rem;
  }

  html:root body.city-government .city-header .city-brand__copy :is(small, em) {
    font-size: .625rem;
    letter-spacing: .035em;
  }

  html:root body.city-government .city-page-hero__inner {
    padding-block: 1.25rem;
    gap: .875rem;
  }

  html:root body.city-government .city-page-hero h1 {
    font-size: clamp(1.625rem, 6.7vw, 2rem);
    line-height: 1.2;
  }

  html:root body.city-government .city-page-hero__copy,
  html:root body.city-government .city-page-hero .city-eyebrow {
    display: none;
  }

  html:root body.city-government .city-module {
    padding-block: 1rem 1.75rem;
  }

  html:root body.city-government .bims-responsive-tab-picker {
    padding-block: .875rem .25rem;
  }

  html:root body.city-government .bims-responsive-tab-picker__label {
    margin-bottom: .375rem;
    font-size: .8125rem;
  }

  html:root body.city-government .bims-responsive-tab-picker__select {
    min-height: 2.875rem !important;
    font-size: .9375rem !important;
  }

  html:root body.city-government .city-module-search {
    padding: .75rem;
  }

  html:root body.city-government .city-module-search > div {
    display: flex;
    gap: .5rem;
  }

  html:root body.city-government .city-module-search .city-button {
    width: auto;
    flex: 0 0 auto;
    padding-inline: .75rem;
  }

  html:root body.city-government .city-record-list > .city-record-card,
  html:root body.city-government .city-record-list > .city-record-card:not(.city-record-card--image) {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .75rem;
    padding: .875rem;
  }

  html:root body.city-government .city-record-list .city-record-card__symbol {
    width: 2.5rem;
    height: 2.5rem;
  }

  html:root body.city-government .city-record-list .city-record-card__image {
    height: 2.5rem;
  }

  html:root body.city-government .city-record-list .city-record-card__body {
    display: block;
  }

  html:root body.city-government .city-record-list .city-record-card__body > .city-record-card__action {
    margin-top: .625rem;
    min-height: 2.75rem;
  }

  html:root body.city-government .city-record-card__topline {
    flex-wrap: wrap;
  }

  html:root body.city-government .city-record-card__topline time {
    text-align: left;
  }

  html:root body.city-government .city-home-service-hub .city-home-hero__grid {
    gap: 1.25rem;
    padding-block: 1.5rem;
  }

  html:root body.city-government .city-home-service-hub .city-home-hero__content > h1 {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
    line-height: 1.18;
  }

  html:root body.city-government .city-home-service-hub .city-home-hero__content > :is(.city-eyebrow, .city-home-hero__lead, .city-home-hero__note) {
    display: none;
  }

  html:root body.city-government .city-home-primary-actions .city-quick-nav__grid > a {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .5rem;
    min-height: 4.5rem;
    padding: .625rem;
  }

  html:root body.city-government .city-home-primary-actions .city-quick-nav__grid > a > span {
    width: 2rem;
    height: 2rem;
  }

  html:root body.city-government .city-home-primary-actions .city-quick-nav__grid strong {
    font-size: .875rem;
    overflow-wrap: normal;
  }

  html:root body.mydasma-body :is(.mydasma-guest, .mydasma-welcome) {
    padding: 1.125rem;
    border-radius: 1rem;
  }

  html:root body.mydasma-body :is(.mydasma-section, .mydasma-auth-card) {
    padding: 1rem;
  }

  html:root body.mydasma-body .mydasma-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  html:root body.mydasma-body .mydasma-quick a {
    min-width: 0;
    padding: .75rem;
    font-size: .875rem;
    line-height: 1.35;
  }
}

@media screen and (max-width: 359px) {
  html:root body.city-government .city-module-search > div {
    display: grid;
  }

  html:root body.city-government .city-module-search .city-button {
    width: 100%;
  }
}

/* The app chooser shares the city's visual identity without store artwork. */
@media screen {
  html:root body.city-government .city-home-hero__store-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: .25rem;
  }

  html:root body.city-government .city-home-hero__store-copy {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.75rem;
  }

  html:root body.city-government .city-home-hero__store-copy::before {
    content: "";
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--city-border);
    border-radius: .75rem;
    background: var(--city-surface) url("../images/mydasma-app-icon.png") center / cover no-repeat;
  }

  html:root body.city-government .city-home-hero__store-copy strong {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
  }

  html:root body.city-government .city-home-hero__store-card .city-store-badges--home {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: .75rem;
  }

  html:root body.city-government .city-store-badges--home .city-store-badge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1rem;
    grid-template-rows: 1.75rem auto;
    align-content: start;
    align-items: center;
    gap: .75rem .5rem;
    min-height: 6rem;
    padding: 1rem;
    border: 1px solid var(--city-border);
    border-radius: .875rem;
    box-shadow: none;
    filter: none;
    transform: none;
    text-align: left;
    transition: background-color .15s ease, border-color .15s ease;
  }

  html:root body.city-government .city-store-badges--home .city-store-badge--web {
    background: var(--city-brand-soft);
    color: var(--city-brand-strong) !important;
  }

  html:root body.city-government .city-store-badges--home .city-store-badge--android {
    border-color: var(--city-brand);
    background: var(--city-brand);
    color: #fff !important;
  }

  html:root body.city-government .city-store-badges--home .city-store-badge::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: 1.75rem;
    height: 1.75rem;
    background: currentColor;
    -webkit-mask: var(--city-app-option-icon) center / contain no-repeat;
    mask: var(--city-app-option-icon) center / contain no-repeat;
  }

  html:root body.city-government .city-store-badges--home .city-store-badge--web {
    --city-app-option-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c-5 5-5 13 0 18M12 3c5 5 5 13 0 18'/%3E%3C/svg%3E");
  }

  html:root body.city-government .city-store-badges--home .city-store-badge--android {
    --city-app-option-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m6.6 3.8-1-1.8.9-.5 1.1 2c2.7-1.1 6.1-1.1 8.8 0l1.1-2 .9.5-1 1.8A7 7 0 0 1 20 10H4a7 7 0 0 1 2.6-6.2ZM4 11h16v7a2 2 0 0 1-2 2h-1v2h-2v-2H9v2H7v-2H6a2 2 0 0 1-2-2ZM1 11h2v7H1Zm20 0h2v7h-2Z'/%3E%3Ccircle cx='8' cy='7' r='1' fill='white'/%3E%3Ccircle cx='16' cy='7' r='1' fill='white'/%3E%3C/svg%3E");
  }

  html:root body.city-government .city-store-badges--home .city-store-badge::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    width: 1rem;
    height: 1rem;
    opacity: .8;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  html:root body.city-government .city-store-badges--home .city-store-badge__title {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: normal;
  }

  html:root body.city-government .city-store-badges--home .city-store-badge--web[href]:hover {
    border-color: var(--city-brand);
    background: var(--city-surface);
  }

  html:root body.city-government .city-store-badges--home .city-store-badge--android[href]:hover {
    border-color: var(--city-brand-strong);
    background: var(--city-brand-strong);
  }

  html:root body.city-government .city-store-badges--home .city-store-badge[href]:focus-visible {
    outline: 3px solid var(--city-brand);
    outline-offset: 3px;
  }
}

@media screen and (max-width: 359px) {
  html:root body.city-government .city-home-hero__store-card .city-store-badges--home {
    grid-template-columns: minmax(0, 1fr);
  }

  html:root body.city-government .city-store-badges--home .city-store-badge {
    grid-template-columns: 1.5rem minmax(0, 1fr) 1rem;
    grid-template-rows: auto;
    min-height: 3.5rem;
    gap: .75rem;
    padding: .875rem;
  }

  html:root body.city-government .city-store-badges--home .city-store-badge::before {
    width: 1.5rem;
    height: 1.5rem;
  }

  html:root body.city-government .city-store-badges--home .city-store-badge__title {
    grid-column: 2;
    grid-row: 1;
  }

  html:root body.city-government .city-store-badges--home .city-store-badge::after {
    grid-column: 3;
  }
}

/* The active MyGenTri PWA uses the shared citizen portal shell. */
@media screen {
  html:root[data-bims-theme][data-bims-display-scope="citizen"] body.public-service-body.citizen-portal-home-page .public-service-shell .citizen-portal-hero {
    min-height: 0;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: clamp(1.5rem, 2.8vw, 2rem);
    border-radius: 1rem;
    box-shadow: 0 3px 12px var(--bims-shadow) !important;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-hero h1 {
    max-width: 28ch;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -.035em;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-hero .eyebrow {
    margin-bottom: .625rem;
    font-size: .75rem;
    letter-spacing: .05em;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-service-desk {
    padding: 1rem;
    border-radius: .875rem;
    box-shadow: none;
  }

  html:root body.public-service-body.citizen-portal-home-page :is(.citizen-portal-feature, .public-service-card) {
    border-radius: 1rem !important;
    box-shadow: 0 2px 8px var(--bims-shadow);
  }

  html:root body.public-service-body.citizen-service-unified-page .citizen-mobile-primary-module-copy small {
    display: none;
  }
}

@media screen and (min-width: 1025px) {
  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-service-desk-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-service-desk-actions > a {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .625rem;
    min-width: 0;
    min-height: 4.5rem;
    padding: .75rem;
    border-radius: .875rem;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-service-desk-actions > a > .bpw-icon {
    display: none;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-service-desk-actions b {
    font-size: .875rem;
    line-height: 1.35;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-service-desk-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .625rem;
  }
}

@media screen and (max-width: 1024px) {
  html:root[data-bims-theme][data-bims-display-scope="citizen"] body.public-service-body.citizen-service-unified-page .citizen-mobile-primary-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem !important;
  }

  html:root[data-bims-theme][data-bims-display-scope="citizen"] body.public-service-body.citizen-service-unified-page .citizen-mobile-primary-module-grid > a {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: .625rem;
    min-width: 0;
    min-height: 4.5rem;
    padding: .75rem;
    border: 1px solid var(--bims-border-strong) !important;
    border-radius: .875rem !important;
    background: var(--bims-surface) !important;
    color: var(--bims-text-strong) !important;
    text-align: left;
  }

  html:root[data-bims-theme][data-bims-display-scope="citizen"] body.public-service-body.citizen-service-unified-page .citizen-mobile-primary-module-grid > a.is-active {
    border-color: var(--bims-primary) !important;
    background: var(--bims-primary-soft) !important;
  }

  html:root[data-bims-theme][data-bims-display-scope="citizen"] body.public-service-body.citizen-service-unified-page .citizen-mobile-primary-module-grid .citizen-mobile-primary-module-icon {
    width: 2rem;
    height: 2rem;
    border-color: transparent !important;
    border-radius: .625rem;
    background: var(--bims-primary-soft) !important;
    color: var(--bims-primary-strong) !important;
  }

  html:root[data-bims-theme][data-bims-display-scope="citizen"] body.public-service-body.citizen-service-unified-page .citizen-mobile-primary-module-grid > a.is-emergency .citizen-mobile-primary-module-icon {
    background: var(--ui-danger-soft, #fff0eb) !important;
    color: var(--ui-danger, #b42318) !important;
  }

  html:root body.public-service-body.citizen-service-unified-page .citizen-mobile-primary-module-icon .bpw-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  html:root[data-bims-theme][data-bims-display-scope="citizen"] body.public-service-body.citizen-service-unified-page .citizen-mobile-primary-module-copy b {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: normal;
    word-break: normal;
  }

  html:root body.public-service-body.citizen-service-unified-page .citizen-mobile-primary-modules-heading {
    gap: .625rem;
    margin-bottom: .75rem;
  }

  html:root body.public-service-body.citizen-service-unified-page .citizen-mobile-primary-modules-heading h2 {
    font-size: 1.0625rem;
    line-height: 1.35;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-mobile-welcome {
    min-height: 0;
    margin-bottom: 1rem;
    padding: 1.125rem;
    border-radius: 1rem;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-mobile-kicker {
    display: none;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-mobile-welcome h1 {
    margin: 0;
    font-size: clamp(1.5rem, 5.8vw, 1.875rem);
    line-height: 1.2;
  }

  html:root body.public-service-body.citizen-service-unified-page .citizen-mobile-header-search label {
    min-height: 2.75rem;
    border-radius: .625rem;
    font-weight: 500;
  }

  html:root body.public-service-body.citizen-service-unified-page .citizen-mobile-header-search input {
    font-size: 1rem !important;
    font-weight: 400;
  }

  html:root body.public-service-body.citizen-service-unified-page :is(.citizen-mobile-header-theme, .citizen-mobile-header-notifications) {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-mobile-feed-card {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--bims-border);
    border-radius: 1rem;
    background: var(--bims-surface);
    box-shadow: 0 2px 8px var(--bims-shadow);
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-mobile-card-heading {
    gap: .75rem;
    margin-bottom: .875rem;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-mobile-card-heading h2 {
    font-size: 1.0625rem;
    line-height: 1.35;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-mobile-update-list > a,
  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-mobile-update-item {
    border-radius: .75rem !important;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-mobile-update-list b {
    overflow: visible;
    color: var(--bims-text-strong) !important;
    font-size: .9375rem !important;
    font-weight: 500;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html:root body.public-service-body.citizen-portal-home-page .citizen-portal-mobile-update-list :is(small, em) {
    overflow: visible;
    font-size: .8125rem !important;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html:root body.public-service-body.citizen-portal-home-page :is(.citizen-portal-mobile-card-heading > a, .citizen-portal-mobile-update-links a, .citizen-portal-mobile-empty > a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .5rem .625rem;
    border-radius: .625rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
  }

  html:root body.public-service-body.citizen-service-unified-page .citizen-website-mobile-tabs > a,
  html:root body.public-service-body.citizen-service-unified-page .citizen-website-mobile-tabs > .citizen-mobile-more > summary {
    min-height: 3.75rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.25;
  }

  html:root body.public-service-body.citizen-service-unified-page .citizen-website-mobile-tabs > a > .bpw-icon,
  html:root body.public-service-body.citizen-service-unified-page .citizen-website-mobile-tabs > .citizen-mobile-more > summary > .bpw-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}