/* Shared citizen menu, display preferences, and dark-mode surface tokens. */
html[data-citizen-font="system"] { --citizen-app-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
html[data-citizen-font="rounded"] { --citizen-app-font: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif; }
html[data-citizen-font="classic"] { --citizen-app-font: Georgia, Cambria, "Times New Roman", serif; }

.citizen-portal-top,
.citizen-portal-top button,
.citizen-portal-top a,
.mydasma-body { font-family: var(--citizen-app-font, Inter, system-ui, sans-serif); }

.citizen-desktop-nav { display: none; }
.citizen-public-actions { align-items: center; }
.citizen-public-menu-toggle {
  gap: 9px;
  min-height: 44px;
  border: 1px solid rgba(11, 101, 65, .18);
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #eef9f2);
  box-shadow: 0 11px 28px rgba(5, 71, 43, .13);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.citizen-public-menu-toggle:hover,
.citizen-public-menu-toggle[aria-expanded="true"] { transform: translateY(-1px); background: #e5f7ec; box-shadow: 0 15px 31px rgba(5, 71, 43, .17); }
.citizen-public-menu-toggle .bpw-icon { padding: 4px; border-radius: 8px; background: #d7f1e5; color: #087545; }
.citizen-public-menu {
  gap: 5px;
  width: min(368px, calc(100vw - 24px));
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(15, 122, 79, .16);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(255,255,255,.99), rgba(245,252,247,.98));
  box-shadow: 0 24px 55px rgba(5, 51, 33, .24);
}
.citizen-menu-account {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 21px;
  align-items: center;
  gap: 10px;
  min-height: 74px !important;
  margin: -2px -2px 2px;
  padding: 10px !important;
  border: 1px solid rgba(15, 122, 79, .14) !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #e5f7ec, #fff7cf) !important;
}
.citizen-menu-account:hover,
.citizen-menu-account:focus-visible { background: linear-gradient(135deg, #d7f2e3, #fff1b8) !important; }
.citizen-menu-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: linear-gradient(135deg, #087545, #c69c1e);
  box-shadow: 0 7px 16px rgba(7, 83, 48, .18);
  color: #fff;
  font-size: .9rem;
  font-weight: 950;
  letter-spacing: .04em;
}
.citizen-menu-account-copy { display: grid; min-width: 0; gap: 2px; }
.citizen-menu-account-copy small { color: #4e7b62; font-size: .66rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.citizen-menu-account-copy b,
.citizen-menu-account-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citizen-menu-account-copy b { color: #073a25; font-size: .88rem; }
.citizen-menu-account-copy em { color: #547465; font-size: .69rem; font-style: normal; font-weight: 700; }
.citizen-menu-account > .bpw-icon { width: 19px; height: 19px; color: #0d7148; }
.citizen-menu-verification {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 25px;
  margin: 0 5px 2px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
}
.citizen-menu-verification .bpw-icon { width: 15px; height: 15px; }
.citizen-menu-verification.is-verified { background: #e5f7ea; color: #087545; }
.citizen-menu-verification.is-pending { background: #fff3cf; color: #8a6411; }
.citizen-menu-divider { display: block; height: 1px; margin: 5px 3px; background: linear-gradient(90deg, transparent, #d8e8db, transparent); }
.citizen-menu-label { display: block; padding: 3px 8px 1px; color: #6d8276; font-size: .62rem; font-weight: 950; letter-spacing: .085em; text-transform: uppercase; }
.citizen-public-menu > a:not(.citizen-menu-account) { gap: 10px; color: #174633; }
.citizen-public-menu > a:not(.citizen-menu-account) .bpw-icon { width: 20px; height: 20px; padding: 3px; border-radius: 8px; background: #e8f6ee; color: #087545; }
.citizen-public-menu > a:nth-of-type(3) .bpw-icon { background: #e8efff; color: #2459ca; }
.citizen-public-menu > a:nth-of-type(4) .bpw-icon { background: #fff6cf; color: #a57700; }
.citizen-public-menu > a:nth-of-type(5) .bpw-icon { background: #ffece7; color: #c7472b; }
.citizen-public-menu > a:nth-of-type(6) .bpw-icon { background: #eee9ff; color: #6247bf; }
.citizen-public-menu > a:nth-of-type(7) .bpw-icon { background: #e6f5ff; color: #1773a6; }
.citizen-public-menu > a small { margin-left: auto; color: #718478; font-size: .66rem; font-weight: 750; }
.citizen-menu-signout { color: #a34228 !important; }
.citizen-menu-signout .bpw-icon { background: #fff0ec !important; color: #b4472d !important; }
.citizen-public-menu .citizen-menu-signout-form { display: block; margin: 0; }
.citizen-public-menu .citizen-menu-signout {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 43px;
  gap: 10px;
  padding: 8px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  text-align: left;
}
.citizen-public-menu .citizen-menu-signout:hover,
.citizen-public-menu .citizen-menu-signout:focus-visible { background: #fff0ec; outline: none; }

/* Saturated menu icon tiles: each destination remains recognizable at a glance. */
.citizen-public-menu .citizen-menu-item .bpw-icon,
.citizen-public-menu .citizen-menu-signout .bpw-icon {
  width: 30px;
  height: 30px;
  padding: 5px;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(9, 53, 34, .18);
}
.citizen-public-menu .menu-home .bpw-icon { background: linear-gradient(135deg, #087c6a, #20a98b) !important; }
.citizen-public-menu .menu-request .bpw-icon { background: linear-gradient(135deg, #2757c7, #5b8af5) !important; }
.citizen-public-menu .menu-complaint .bpw-icon { background: linear-gradient(135deg, #c63d2d, #ee735b) !important; }
.citizen-public-menu .menu-history .bpw-icon { background: linear-gradient(135deg, #147b9d, #42b4cc) !important; }
.citizen-public-menu .menu-updates .bpw-icon { background: linear-gradient(135deg, #ad7600, #e6b226) !important; }
.citizen-public-menu .menu-hotlines .bpw-icon { background: linear-gradient(135deg, #cf402e, #ef785a) !important; }
.citizen-public-menu .menu-transparency .bpw-icon { background: linear-gradient(135deg, #6043b6, #8a70e7) !important; }
.citizen-public-menu .menu-settings .bpw-icon { background: linear-gradient(135deg, #bc8300, #efc83a) !important; }
.citizen-public-menu .menu-account .bpw-icon { background: linear-gradient(135deg, #137c62, #45b895) !important; }
.citizen-public-menu .citizen-menu-signout .bpw-icon { background: linear-gradient(135deg, #c63d2d, #ee735b) !important; }

html[data-citizen-theme="dark"] .citizen-portal-top .public-brand b { color: #f1faf3; }
html[data-citizen-theme="dark"] .citizen-portal-top .public-brand small { color: #abcdb8; }
html[data-citizen-theme="dark"] .citizen-public-menu-toggle { border-color: rgba(151, 224, 181, .2); background: #102b20; color: #e9f8ef; box-shadow: 0 12px 28px rgba(0,0,0,.28); }
html[data-citizen-theme="dark"] .citizen-public-menu-toggle:hover,
html[data-citizen-theme="dark"] .citizen-public-menu-toggle[aria-expanded="true"] { background: #173b2a; }
html[data-citizen-theme="dark"] .citizen-public-menu { border-color: #254b37; background: linear-gradient(150deg, #102b20, #0a1d15); box-shadow: 0 24px 55px rgba(0,0,0,.48); }
html[data-citizen-theme="dark"] .citizen-menu-account { border-color: #2e5e43 !important; background: linear-gradient(135deg, #153927, #3f3414) !important; }
html[data-citizen-theme="dark"] .citizen-menu-account-copy b,
html[data-citizen-theme="dark"] .citizen-public-menu > a:not(.citizen-menu-account) { color: #e8f7ed; }
html[data-citizen-theme="dark"] .citizen-menu-account-copy small,
html[data-citizen-theme="dark"] .citizen-menu-account-copy em,
html[data-citizen-theme="dark"] .citizen-menu-label,
html[data-citizen-theme="dark"] .citizen-public-menu > a small { color: #a7c5b1; }
html[data-citizen-theme="dark"] .citizen-public-menu a:hover,
html[data-citizen-theme="dark"] .citizen-public-menu a:focus-visible { background: #1a402d; color: #fff; }

/* The website has its own horizontal navigation from tablet upward.
   MyDasma deliberately keeps the application drawer at every viewport size. */
@media (min-width: 768px) {
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) {
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand {
    flex: 0 1 282px;
    min-width: 0;
    max-width: 282px;
    gap: 9px;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand .brand-mark {
    flex: 0 0 auto;
    width: 43px;
    height: 43px;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand b {
    overflow: hidden;
    font-size: .89rem;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand small {
    overflow: hidden;
    font-size: .67rem;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-public-subtitle span { display: inline; }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-public-subtitle span + span::before { content: " "; }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav {
    display: flex;
    flex: 1 0 100%;
    order: 2;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    width: auto;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav a {
    width: auto;
    min-height: 37px;
    padding: 6px 8px;
    border-color: rgba(15, 122, 79, .17);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 7px 16px rgba(6, 54, 35, .06);
    color: #10412d;
    font-size: .73rem;
    line-height: 1;
    white-space: nowrap;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav a:hover,
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav a:focus-visible {
    border-color: rgba(8, 124, 106, .36);
    background: #eaf8ef;
    color: #075e3a;
    outline: none;
    transform: translateY(-1px);
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .bpw-icon {
    width: 19px;
    height: 19px;
    padding: 3px;
    border-radius: 7px;
    color: #fff;
    box-shadow: 0 4px 9px rgba(6, 54, 35, .14);
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .menu-home .bpw-icon { background: linear-gradient(135deg, #087c6a, #20a98b); }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .menu-request .bpw-icon { background: linear-gradient(135deg, #2757c7, #5b8af5); }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .menu-complaint .bpw-icon { background: linear-gradient(135deg, #c63d2d, #ee735b); }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .menu-history .bpw-icon { background: linear-gradient(135deg, #147b9d, #42b4cc); }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .menu-updates .bpw-icon { background: linear-gradient(135deg, #ad7600, #e6b226); }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .menu-hotlines .bpw-icon { background: linear-gradient(135deg, #cf402e, #ef785a); }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .menu-transparency .bpw-icon { background: linear-gradient(135deg, #6043b6, #8a70e7); }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .citizen-desktop-account .bpw-icon { background: linear-gradient(135deg, #137c62, #45b895); }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .citizen-desktop-signout { border-color: rgba(198, 61, 45, .22); color: #a34228; }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .citizen-desktop-signout .bpw-icon { background: linear-gradient(135deg, #c63d2d, #ee735b); }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .citizen-desktop-signout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(198, 61, 45, .22);
    cursor: pointer;
    font-weight: 800;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-public-actions { display: none; }
}

@media (min-width: 768px) and (max-width: 1239px) {
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) { gap: 10px; }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand { flex-basis: 222px; max-width: 222px; }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-brand-full { display: none; }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-brand-short { display: inline; }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav { gap: 5px; }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav a { min-height: 35px; padding: 5px 7px; font-size: .69rem; }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .bpw-icon { width: 18px; height: 18px; }
}

@media (min-width: 1240px) {
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) {
    flex-wrap: nowrap;
    gap: 14px;
  }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav {
    flex: 1 1 auto;
    order: initial;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}

@media (max-width: 767px) {
  .citizen-desktop-nav { display: none !important; }
}

html[data-citizen-theme="dark"] .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav a {
  border-color: #28523d;
  background: #102b20;
  color: #e8f7ed;
  box-shadow: none;
}
html[data-citizen-theme="dark"] .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav a:hover,
html[data-citizen-theme="dark"] .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav a:focus-visible { background: #1a402d; color: #fff; }

@media (max-width: 640px) {
  .citizen-public-menu { width: min(352px, calc(100vw - 20px)); border-radius: 18px; }
  .citizen-public-menu-toggle { min-height: 40px; padding: 7px 10px; }
  .citizen-public-menu-toggle .bpw-icon { width: 19px; height: 19px; }
}

/* Citizen website access and account screens. These are deliberately calmer than
   the app shell: a wide screen reads as a civic website, while small screens
   keep the same information in a single, touch-friendly flow. */
.citizen-access-body,
.citizen-account-body {
  font-family: var(--citizen-app-font, Inter, system-ui, sans-serif);
}
.citizen-access-hero,
.citizen-account-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(18, 100, 66, .15);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 251, 246, .96));
  box-shadow: 0 18px 45px rgba(9, 61, 38, .10);
}
.citizen-access-hero h1,
.citizen-account-hero h1 {
  max-width: 820px;
  margin: 8px 0 9px;
  color: #062f1e;
  font-size: clamp(1.8rem, 3.3vw, 2.75rem);
  line-height: 1.11;
  letter-spacing: -.035em;
}
.citizen-access-hero p,
.citizen-account-hero p {
  max-width: 760px;
  margin: 0;
  color: #496c5b;
  font-size: clamp(.95rem, 1.7vw, 1.06rem);
  line-height: 1.65;
}
.citizen-access-hero-mark {
  display: grid;
  width: clamp(56px, 8vw, 76px);
  height: clamp(56px, 8vw, 76px);
  place-items: center;
  border: 1px solid rgba(31, 141, 97, .2);
  border-radius: 22px;
  background: linear-gradient(135deg, #e7f7ec, #fff4cd);
  box-shadow: 0 14px 26px rgba(10, 86, 51, .11);
  color: #0b7a4a;
}
.citizen-access-hero-mark .bpw-icon { width: 32px; height: 32px; }

.citizen-access-layout {
  display: grid;
  grid-template-columns: minmax(250px, .64fr) minmax(0, 1.36fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 30px;
}
.citizen-access-aside,
.citizen-access-card,
.citizen-account-profile,
.citizen-account-panel {
  border: 1px solid rgba(18, 100, 66, .14);
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 36px rgba(8, 58, 37, .08);
}
.citizen-access-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(23px, 3vw, 32px);
  background: linear-gradient(155deg, #0a7148, #126842 58%, #155937);
  color: #f6fff8;
}
.citizen-access-aside-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 15px;
  background: rgba(255, 255, 255, .14);
  color: #fff4bd;
}
.citizen-access-aside-icon .bpw-icon { width: 25px; height: 25px; }
.citizen-access-overline,
.citizen-account-panel-overline,
.citizen-access-step {
  margin: 20px 0 7px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.citizen-access-overline { color: #bff2d0; }
.citizen-access-aside h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.28rem, 2vw, 1.68rem);
  line-height: 1.2;
}
.citizen-access-aside > p:not(.citizen-access-overline) {
  margin: 12px 0 0;
  color: rgba(239, 255, 244, .83);
  line-height: 1.62;
}
.citizen-access-benefits {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: auto 0 0;
  padding: 24px 0 0;
  list-style: none;
}
.citizen-access-benefits li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: .83rem;
  font-weight: 780;
}
.citizen-access-benefits .bpw-icon {
  width: 23px;
  height: 23px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 244, 189, .18);
  color: #fff4bd;
}

.citizen-access-card { padding: clamp(22px, 3vw, 34px); }
.citizen-access-card-head,
.citizen-account-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
/* Account-panel icons and headings belong to one left-aligned reading line.
   The access card intentionally keeps its status icon on the opposite edge. */
.citizen-account-panel-head {
  justify-content: flex-start;
}
.citizen-account-panel-head > div { min-width: 0; }
.citizen-access-card-head h2,
.citizen-account-panel h2 {
  margin: 0;
  color: #073a25;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.22;
}
.citizen-access-card-head p,
.citizen-account-panel > p,
.citizen-account-panel-head + p {
  margin: 7px 0 0;
  color: #5a7667;
  font-size: .92rem;
  line-height: 1.55;
}
.citizen-access-step,
.citizen-account-panel-overline { margin: 0 0 6px; color: #178050; }
.citizen-access-card-icon,
.citizen-account-panel-icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #c6e8d0;
  border-radius: 13px;
  background: #ebf8ef;
  color: #087545;
}
.citizen-access-card-icon .bpw-icon,
.citizen-account-panel-icon .bpw-icon { width: 22px; height: 22px; }
.citizen-access-form { display: grid; gap: 22px; margin-top: 25px; }
.citizen-access-form-section { display: grid; gap: 12px; }
.citizen-access-section-title {
  margin: 0;
  color: #174d35;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.citizen-access-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* A field with help text must not stretch the input in the other column. */
  align-items: start;
  gap: 15px 16px;
}
.citizen-access-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 7px;
}
.citizen-access-field .field-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  color: #123e2b;
  font-size: .88rem;
  font-weight: 850;
}
.citizen-access-field .field-title .bpw-icon {
  width: 21px;
  height: 21px;
  padding: 3px;
  border-radius: 7px;
  background: #e9f7ed;
  color: #0d7a4c;
}
.citizen-access-field .field-title em {
  margin-left: 2px;
  color: #718378;
  font-size: .67rem;
  font-style: normal;
  font-weight: 760;
}
.citizen-access-field input:not([type="hidden"]) {
  width: 100%;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #bddac5;
  border-radius: 12px;
  background: #fcfffc;
  color: #0a3b25;
  font: inherit;
  font-weight: 720;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.citizen-access-field input:not([type="hidden"]):focus {
  border-color: #0c8050;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(19, 137, 80, .13);
}
.citizen-access-field small {
  color: #6c8275;
  font-size: .73rem;
  font-weight: 680;
  line-height: 1.4;
}
.citizen-access-combo { position: relative; display: block; }
.citizen-access-combo-panel {
  z-index: 145;
  max-height: 240px;
  border-color: rgba(11, 119, 71, .25);
}
.citizen-access-combo-panel button { font-family: inherit; }
.citizen-access-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 3px;
}
.citizen-access-form-actions .btn { min-height: 46px; }
.citizen-access-install-link {
  border-color: #b7d8ed;
  background: #f0f8ff;
  color: #075f8c;
}
.citizen-access-install-link .bpw-icon {
  color: #147aa8;
}

.citizen-account-layout {
  display: grid;
  grid-template-columns: minmax(250px, .6fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 32px;
}
.citizen-account-profile {
  position: sticky;
  top: 18px;
  padding: clamp(23px, 3vw, 32px);
  overflow: hidden;
  background: linear-gradient(145deg, #f7fcf7, #eef8ef);
}
.citizen-account-profile::after {
  position: absolute;
  right: -42px;
  bottom: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(209, 170, 35, .2), transparent 68%);
  content: "";
  pointer-events: none;
}
.citizen-account-avatar {
  display: grid;
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, #087545, #1da06b);
  box-shadow: 0 11px 22px rgba(8, 94, 57, .18);
  color: #fff;
}
.citizen-account-avatar .bpw-icon { width: 28px; height: 28px; }
.citizen-account-profile-kicker { margin: 19px 0 5px; color: #5c7a6a; font-size: .7rem; font-weight: 900; letter-spacing: .085em; text-transform: uppercase; }
.citizen-account-profile h2 { position: relative; z-index: 1; margin: 0; color: #073a25; font-size: 1.42rem; line-height: 1.22; }
.citizen-account-email { position: relative; z-index: 1; margin: 6px 0 0; overflow-wrap: anywhere; color: #3f6854; font-size: .87rem; font-weight: 720; }
.citizen-account-verification-chip {
  display: inline-flex;
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 900;
}
.citizen-account-verification-chip .bpw-icon { width: 17px; height: 17px; }
.citizen-account-verification-chip.is-verified { background: #dff5e5; color: #0a6f43; }
.citizen-account-verification-chip.is-pending { background: #fff1c9; color: #89600c; }
.citizen-account-profile-note { position: relative; z-index: 1; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(16, 113, 69, .13); color: #637b6d; font-size: .8rem; line-height: 1.55; }
.citizen-account-panels { display: grid; gap: 16px; }
.citizen-account-panel { padding: clamp(21px, 2.8vw, 29px); }
.citizen-account-panel--verification { border-color: rgba(11, 123, 75, .22); background: linear-gradient(135deg, #fff, #f5fbf6); }
.citizen-account-panel--verification .citizen-account-panel-icon { background: #e4f7e9; color: #0a7948; }
.citizen-account-panel strong { color: #0b653f; }
.citizen-account-inline-form { margin-top: 18px; }
.citizen-account-inline-form .btn { min-height: 43px; }
.citizen-account-barangay-form { display: grid; gap: 15px; margin-top: 18px; }
.citizen-account-barangay-form .btn { width: fit-content; min-height: 44px; }
.citizen-account-panel--danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-color: rgba(197, 68, 45, .2);
  background: linear-gradient(135deg, #fffdfc, #fff4f0);
}
.citizen-account-panel--danger h2 { margin: 0; }
.citizen-account-panel--danger p { margin: 7px 0 0; color: #755d54; font-size: .88rem; line-height: 1.5; }
.citizen-account-panel--danger .citizen-account-panel-overline { color: #b34831; }
.citizen-account-signout-form { flex: 0 0 auto; }
.citizen-account-signout-form .btn { min-height: 42px; white-space: nowrap; }

/* Account settings: each action is deliberately grouped into a short, named
   panel so citizens can understand what changes and what needs email proof. */
.citizen-account-avatar.has-photo {
  padding: 0;
  overflow: hidden;
  background: #e8f5eb;
}
.citizen-account-avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.citizen-account-pending-email,
.citizen-account-email-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  color: #895c0b;
  font-size: .79rem;
  font-weight: 800;
  line-height: 1.42;
}
.citizen-account-pending-email .bpw-icon,
.citizen-account-email-status .bpw-icon { width: 18px; height: 18px; }
.citizen-account-form {
  display: grid;
  gap: 15px;
  margin-top: 18px;
}
.citizen-account-form > .btn { width: fit-content; min-height: 44px; }
.citizen-account-photo-actions { display: grid; gap: 12px; }
.citizen-account-photo-form { margin-top: 18px; }
.citizen-account-photo-remove { margin: 0; }
.citizen-account-photo-remove .btn { min-height: 40px; }
.citizen-account-preference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.citizen-account-preference-group {
  min-width: 0;
  padding: 16px;
  border: 1px solid #d6e8da;
  border-radius: 16px;
  background: #fbfefb;
}
.citizen-account-preference-group h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  color: #174d35;
  font-size: .86rem;
}
.citizen-account-preference-group h3 .bpw-icon { width: 19px; height: 19px; color: #087545; }
.citizen-account-choice-grid { display: grid; gap: 8px; }
.citizen-account-choice-grid button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid #cfe3d3;
  border-radius: 12px;
  background: #fff;
  color: #174d35;
  text-align: left;
  cursor: pointer;
}
.citizen-account-choice-grid button:hover,
.citizen-account-choice-grid button:focus-visible,
.citizen-account-choice-grid button.is-active {
  border-color: #55ad78;
  background: #edf9f0;
  box-shadow: 0 0 0 3px rgba(47, 145, 87, .11);
  outline: 0;
}
.citizen-account-choice-grid button .bpw-icon { width: 23px; height: 23px; color: #168150; }
.citizen-account-choice-grid button span { display: grid; min-width: 0; gap: 2px; }
.citizen-account-choice-grid button b { font-size: .8rem; }
.citizen-account-choice-grid button small { color: #6b8074; font-size: .7rem; line-height: 1.2; }
.citizen-account-reset-preferences { margin-top: 14px; min-height: 40px; }
.citizen-account-panel--activity { background: linear-gradient(135deg, #fcfffc, #f5fbf6); }
.citizen-account-activity-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.citizen-account-activity-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
  border: 1px solid #d9eadc;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
}
.citizen-account-activity-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #e5f7e9;
  color: #0d7b4b;
}
.citizen-account-activity-icon .bpw-icon { width: 19px; height: 19px; }
.citizen-account-activity-list li > span:last-child { display: grid; min-width: 0; gap: 3px; }
.citizen-account-activity-list b { color: #174d35; font-size: .84rem; }
.citizen-account-activity-list small,
.citizen-account-activity-list time,
.citizen-account-empty-activity { color: #61776b; font-size: .75rem; line-height: 1.42; }
.citizen-account-activity-list time { display: block; font-weight: 700; }
.citizen-account-empty-activity {
  margin: 18px 0 0 !important;
  padding: 13px;
  border: 1px dashed #c6ddcb;
  border-radius: 13px;
  background: #f8fcf8;
}

@media (max-width: 900px) {
  .citizen-access-layout,
  .citizen-account-layout { grid-template-columns: 1fr; }
  .citizen-access-aside { min-height: 0; }
  .citizen-access-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .citizen-access-benefits li { grid-template-columns: 23px minmax(0, 1fr); font-size: .76rem; }
  .citizen-account-profile { position: relative; top: auto; }
}
@media (max-width: 640px) {
  .citizen-access-hero,
  .citizen-account-hero { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 22px 20px; border-radius: 19px; }
  .citizen-access-hero-mark { width: 52px; height: 52px; border-radius: 16px; }
  .citizen-access-hero-mark .bpw-icon { width: 26px; height: 26px; }
  .citizen-access-card,
  .citizen-access-aside,
  .citizen-account-profile,
  .citizen-account-panel { border-radius: 18px; }
  .citizen-access-card { padding: 20px; }
  .citizen-access-field-grid { grid-template-columns: 1fr; gap: 14px; }
  .citizen-access-benefits { grid-template-columns: 1fr; padding-top: 20px; }
  .citizen-access-form-actions { align-items: stretch; flex-direction: column; }
  .citizen-access-form-actions .btn { width: 100%; }
  .citizen-account-panel--danger { align-items: flex-start; flex-direction: column; }
  .citizen-account-signout-form,
  .citizen-account-signout-form .btn,
  .citizen-account-barangay-form .btn,
  .citizen-account-form > .btn,
  .citizen-account-photo-remove .btn { width: 100%; }
  .citizen-account-preference-grid { grid-template-columns: 1fr; }
}

html[data-citizen-theme="dark"] .citizen-access-hero,
html[data-citizen-theme="dark"] .citizen-account-hero,
html[data-citizen-theme="dark"] .citizen-access-card,
html[data-citizen-theme="dark"] .citizen-account-profile,
html[data-citizen-theme="dark"] .citizen-account-panel {
  border-color: #28523d;
  background: linear-gradient(145deg, #102b20, #0b2017);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
}
html[data-citizen-theme="dark"] .citizen-access-hero h1,
html[data-citizen-theme="dark"] .citizen-account-hero h1,
html[data-citizen-theme="dark"] .citizen-access-card-head h2,
html[data-citizen-theme="dark"] .citizen-account-panel h2,
html[data-citizen-theme="dark"] .citizen-account-profile h2 { color: #f0fbf3; }
html[data-citizen-theme="dark"] .citizen-access-hero p,
html[data-citizen-theme="dark"] .citizen-account-hero p,
html[data-citizen-theme="dark"] .citizen-access-card-head p,
html[data-citizen-theme="dark"] .citizen-account-panel > p,
html[data-citizen-theme="dark"] .citizen-account-panel-head + p,
html[data-citizen-theme="dark"] .citizen-account-panel--danger p,
html[data-citizen-theme="dark"] .citizen-account-email,
html[data-citizen-theme="dark"] .citizen-account-profile-note { color: #b4cfbd; }
html[data-citizen-theme="dark"] .citizen-access-card-icon,
html[data-citizen-theme="dark"] .citizen-account-panel-icon { border-color: #2d6546; background: #173b2a; color: #98e5b5; }
html[data-citizen-theme="dark"] .citizen-access-field .field-title { color: #e6f7ea; }
html[data-citizen-theme="dark"] .citizen-access-field .field-title .bpw-icon { background: #1a402d; color: #8ee0ac; }
html[data-citizen-theme="dark"] .citizen-access-field input:not([type="hidden"]) { border-color: #315e46; background: #102b20; color: #effaf2; }
html[data-citizen-theme="dark"] .citizen-access-field input:not([type="hidden"]):focus { border-color: #68cb8d; background: #153524; box-shadow: 0 0 0 4px rgba(104, 203, 141, .15); }
html[data-citizen-theme="dark"] .citizen-access-field small { color: #abc6b3; }
html[data-citizen-theme="dark"] .citizen-access-install-link { border-color: #31556b; background: #102b39; color: #a9ddf6; }
html[data-citizen-theme="dark"] .citizen-account-panel--danger { border-color: #673b32; background: linear-gradient(145deg, #2a1815, #1c1210); }
html[data-citizen-theme="dark"] .citizen-account-profile::after { opacity: .55; }
html[data-citizen-theme="dark"] .citizen-account-preference-group,
html[data-citizen-theme="dark"] .citizen-account-activity-list li,
html[data-citizen-theme="dark"] .citizen-account-empty-activity { border-color: #315e46; background: #102b20; }
html[data-citizen-theme="dark"] .citizen-account-preference-group h3,
html[data-citizen-theme="dark"] .citizen-account-activity-list b { color: #eefaf1; }
html[data-citizen-theme="dark"] .citizen-account-choice-grid button { border-color: #315e46; background: #132d21; color: #effaf2; }
html[data-citizen-theme="dark"] .citizen-account-choice-grid button:hover,
html[data-citizen-theme="dark"] .citizen-account-choice-grid button:focus-visible,
html[data-citizen-theme="dark"] .citizen-account-choice-grid button.is-active { border-color: #66cb8e; background: #183a29; }
html[data-citizen-theme="dark"] .citizen-account-choice-grid button small,
html[data-citizen-theme="dark"] .citizen-account-activity-list small,
html[data-citizen-theme="dark"] .citizen-account-activity-list time,
html[data-citizen-theme="dark"] .citizen-account-empty-activity { color: #b4cfbd; }
html[data-citizen-theme="dark"] .citizen-account-pending-email,
html[data-citizen-theme="dark"] .citizen-account-email-status { color: #ffd78c; }

/* Phone website = MyDasma app shell.  This is deliberately isolated from the
   tablet/desktop website and from the actual MyDasma PWA selectors. */
.citizen-website-mobile-tabs { display: none; }

@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body.public-service-body:not(.mydasma-body) {
    min-width: 0;
    background: radial-gradient(circle at 80% 0, #fff2bd, transparent 34%), #f4f8f1;
    color: #10291e;
  }

  body.public-service-body:not(.mydasma-body) .public-service-shell {
    width: min(100%, 760px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: max(14px, env(safe-area-inset-top)) 12px calc(96px + env(safe-area-inset-bottom));
  }

  body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) {
    position: sticky;
    top: 0;
    z-index: 26;
    min-height: 48px;
    margin: calc(-1 * max(14px, env(safe-area-inset-top))) -12px 16px;
    padding: max(14px, env(safe-area-inset-top)) 12px 10px;
    gap: 9px;
    background: rgba(244, 248, 241, .9);
    box-shadow: 0 8px 20px rgba(14, 68, 44, .06);
    backdrop-filter: blur(14px);
  }

  body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand .brand-mark {
    width: 42px;
    height: 42px;
    padding: 6px;
    border-color: #d7e9d9;
    border-radius: 13px;
    background: #e8f5e7;
    color: #087545;
    box-shadow: none;
  }

  body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand b {
    overflow: hidden;
    color: #10291e;
    font-size: .85rem;
    line-height: 1.14;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand small {
    overflow: hidden;
    color: #62756a;
    font-size: .66rem;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.public-service-body:not(.mydasma-body) .citizen-public-actions { flex: 0 0 auto; }
  body.public-service-body:not(.mydasma-body) .citizen-public-menu-toggle {
    display: grid;
    width: 42px;
    min-height: 42px;
    place-items: center;
    padding: 0;
    border-radius: 13px;
    background: #087545;
    box-shadow: 0 8px 18px rgba(8, 117, 69, .2);
    color: #fff;
  }
  body.public-service-body:not(.mydasma-body) .citizen-public-menu-toggle:hover,
  body.public-service-body:not(.mydasma-body) .citizen-public-menu-toggle[aria-expanded="true"] {
    background: #075d39;
    box-shadow: 0 10px 21px rgba(8, 117, 69, .25);
  }
  body.public-service-body:not(.mydasma-body) .citizen-public-menu-toggle .bpw-icon {
    width: 21px;
    height: 21px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: currentColor;
  }
  body.public-service-body:not(.mydasma-body) .citizen-public-menu-toggle span { display: none; }
  /* On phones this control is the account drawer, not a second site menu.
     Keep the person/key glyph visible so it never degrades into a blank tile. */
  body.public-service-body:not(.mydasma-body) .citizen-account-menu-toggle {
    border-color: #b8dfc5;
    background: #e9f8ed;
    box-shadow: 0 8px 18px rgba(8, 117, 69, .13);
    color: #087545;
  }
  body.public-service-body:not(.mydasma-body) .citizen-account-menu-toggle:hover,
  body.public-service-body:not(.mydasma-body) .citizen-account-menu-toggle[aria-expanded="true"] {
    background: #d9f1e1;
    box-shadow: 0 10px 21px rgba(8, 117, 69, .18);
  }
  body.public-service-body:not(.mydasma-body) .citizen-account-menu-toggle .bpw-icon {
    padding: 3px;
    border-radius: 9px;
    background: #dff5f0;
    color: #087545;
  }
  body.public-service-body:not(.mydasma-body) .citizen-public-menu {
    width: min(352px, calc(100vw - 24px));
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
  }

  .citizen-website-mobile-tabs {
    display: grid;
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    width: min(100%, 760px);
    margin: auto;
    padding: 9px max(12px, env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid #dce9de;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -8px 24px rgba(10, 58, 36, .08);
    backdrop-filter: blur(14px);
  }

  .citizen-website-mobile-tabs a {
    display: grid;
    min-height: 56px;
    place-items: center;
    align-content: start;
    gap: 4px;
    padding: 4px 2px;
    border-radius: 13px;
    color: #62756a;
    font-size: .62rem;
    font-weight: 850;
    line-height: 1.05;
    text-align: center;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }

  .citizen-website-mobile-tabs .bpw-icon {
    display: grid;
    width: 29px;
    height: 29px;
    padding: 5px;
    place-items: center;
    border-radius: 10px;
    background: #edf4ef;
    color: #547465;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  }

  .citizen-website-mobile-tabs a:nth-child(1) .bpw-icon { background: #dff5f0; color: #087c6a; }
  .citizen-website-mobile-tabs a:nth-child(2) .bpw-icon { background: #e5edff; color: #2b5dd3; }
  .citizen-website-mobile-tabs a:nth-child(3) .bpw-icon { background: #fff3c9; color: #ad7900; }
  .citizen-website-mobile-tabs a:nth-child(4) .bpw-icon { background: #ffe7e1; color: #d6472d; }
  .citizen-website-mobile-tabs a:nth-child(5) .bpw-icon { background: #f0e9ff; color: #7047b5; }
  .citizen-website-mobile-tabs a.is-active { background: linear-gradient(135deg, #e8f8ed, #fff8dc); color: #087545; }
  .citizen-website-mobile-tabs a.is-active .bpw-icon { color: #fff; box-shadow: 0 6px 14px rgba(8, 117, 69, .22); transform: translateY(-1px); }
  .citizen-website-mobile-tabs a:nth-child(1).is-active .bpw-icon { background: linear-gradient(135deg, #087545, #2c9c62); }
  .citizen-website-mobile-tabs a:nth-child(2).is-active .bpw-icon { background: linear-gradient(135deg, #245ad0, #4a82f1); }
  .citizen-website-mobile-tabs a:nth-child(3).is-active .bpw-icon { background: linear-gradient(135deg, #b37f00, #e1ae24); }
  .citizen-website-mobile-tabs a:nth-child(4).is-active .bpw-icon { background: linear-gradient(135deg, #cf412d, #ed7352); }
  .citizen-website-mobile-tabs a:nth-child(5).is-active .bpw-icon { background: linear-gradient(135deg, #6742af, #9a73df); }
  .citizen-website-mobile-tabs a:focus-visible { outline: 3px solid rgba(25, 145, 87, .28); outline-offset: 2px; }

  body.public-service-body:not(.mydasma-body) .public-hero-panel,
  body.public-service-body:not(.mydasma-body) .public-service-card,
  body.public-service-body:not(.mydasma-body) .public-flow-strip article,
  body.public-service-body:not(.mydasma-body) .citizen-access-hero,
  body.public-service-body:not(.mydasma-body) .citizen-account-hero,
  body.public-service-body:not(.mydasma-body) .citizen-access-card,
  body.public-service-body:not(.mydasma-body) .citizen-account-profile,
  body.public-service-body:not(.mydasma-body) .citizen-account-panel {
    border-color: #d9e9dc;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(14, 68, 44, .10);
  }

  body.public-service-body:not(.mydasma-body) .public-hero-panel {
    display: grid;
    align-items: start;
    gap: 14px;
    margin-bottom: 16px;
    padding: 18px;
  }
  body.public-service-body:not(.mydasma-body) .public-hero-panel h1 {
    margin: 7px 0 6px;
    font-size: clamp(1.45rem, 7vw, 1.85rem);
    line-height: 1.12;
    letter-spacing: -.03em;
  }
  body.public-service-body:not(.mydasma-body) .public-hero-panel p { color: #62756a; font-size: .86rem; line-height: 1.5; }
  body.public-service-body:not(.mydasma-body) .public-hero-actions { justify-content: stretch; }
  body.public-service-body:not(.mydasma-body) .public-hero-actions .btn { flex: 1 1 132px; min-height: 42px; }
  body.public-service-body:not(.mydasma-body) .public-service-grid { grid-template-columns: 1fr; gap: 14px; }
  body.public-service-body:not(.mydasma-body) .public-service-card { padding: 17px; }

  body.public-service-body:not(.mydasma-body) .citizen-access-hero,
  body.public-service-body:not(.mydasma-body) .citizen-account-hero {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 14px;
    padding: 18px;
  }
  body.public-service-body:not(.mydasma-body) .citizen-access-hero h1,
  body.public-service-body:not(.mydasma-body) .citizen-account-hero h1 { font-size: clamp(1.55rem, 7vw, 1.95rem); }
  body.public-service-body:not(.mydasma-body) .citizen-access-hero p,
  body.public-service-body:not(.mydasma-body) .citizen-account-hero p { color: #62756a; font-size: .87rem; line-height: 1.52; }
  body.public-service-body:not(.mydasma-body) .citizen-access-hero-mark { display: none; }
  body.public-service-body:not(.mydasma-body) .citizen-access-layout,
  body.public-service-body:not(.mydasma-body) .citizen-account-layout { gap: 14px; margin-bottom: 18px; }
  body.public-service-body:not(.mydasma-body) .citizen-access-aside { display: none; }
  body.public-service-body:not(.mydasma-body) .citizen-access-card { max-width: 540px; margin: 0 auto; padding: 18px; }
  body.public-service-body:not(.mydasma-body) .citizen-access-field-grid { grid-template-columns: 1fr; gap: 13px; }
  body.public-service-body:not(.mydasma-body) .citizen-access-form { gap: 18px; margin-top: 18px; }
  body.public-service-body:not(.mydasma-body) .citizen-access-form-actions { align-items: stretch; flex-direction: column; }
  body.public-service-body:not(.mydasma-body) .citizen-access-form-actions .btn { width: 100%; }
  body.public-service-body:not(.mydasma-body) .citizen-account-profile,
  body.public-service-body:not(.mydasma-body) .citizen-account-panel { padding: 18px; }

  body.public-service-body:not(.mydasma-body) .alert { border-radius: 13px; box-shadow: 0 8px 18px rgba(14, 68, 44, .05); }
}

@media (max-width: 767px) {
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) {
    background: radial-gradient(circle at 82% 0, rgba(149, 102, 16, .24), transparent 34%), #07140e;
    color: #eaf7ed;
  }
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) { background: rgba(7, 20, 14, .9); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand b { color: #edf8f0; }
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand small { color: #abc9b6; }
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-public-menu { border-color: #294b37; background: #102319; }
  html[data-citizen-theme="dark"] .citizen-website-mobile-tabs { border-color: #294b37; background: rgba(8, 22, 15, .96); }
  html[data-citizen-theme="dark"] .citizen-website-mobile-tabs a { color: #adc5b3; }
  html[data-citizen-theme="dark"] .citizen-website-mobile-tabs a.is-active { background: linear-gradient(135deg, #173b27, #443913); color: #8ee5af; }
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .public-hero-panel,
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .public-service-card,
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .public-flow-strip article,
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-access-hero,
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-account-hero,
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-access-card,
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-account-profile,
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-account-panel { border-color: #274735; background: #102319; box-shadow: 0 16px 32px rgba(0, 0, 0, .28); }
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .public-hero-panel h1 { color: #edf8f0; }
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .public-hero-panel p,
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-access-hero p,
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-account-hero p { color: #abc9b6; }
}

/* Phone web shell: the public website follows the same module order as the
   citizen app, without changing the wider desktop portal. */
.citizen-mobile-header-tools,
.citizen-portal-mobile-welcome,
.citizen-portal-mobile-services,
.citizen-portal-mobile-guest-card,
.citizen-portal-mobile-public-content { display: none; }

@media (max-width: 767px) {
  body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) {
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding-bottom: 12px;
  }

  body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand {
    flex: 1 0 100%;
  }

  body.public-service-body:not(.mydasma-body) .citizen-public-actions { display: none !important; }

  .citizen-mobile-header-tools {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  .citizen-mobile-header-search { min-width: 0; flex: 1 1 auto; margin: 0; }
  .citizen-mobile-header-search label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #c9dfcd;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(11, 73, 43, .07);
    color: #168055;
  }
  .citizen-mobile-header-search .bpw-icon { width: 19px; height: 19px; }
  .citizen-mobile-header-search input {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #103e2a;
    font: inherit;
    font-size: .82rem;
    font-weight: 760;
  }
  .citizen-mobile-header-search input::placeholder { color: #789083; opacity: 1; }
  .citizen-mobile-header-search:focus-within label { border-color: #108052; box-shadow: 0 0 0 3px rgba(16, 128, 82, .13); }
  .citizen-mobile-header-notifications {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid #e8cc6d;
    border-radius: 14px;
    background: #fff9dc;
    box-shadow: 0 7px 16px rgba(11, 73, 43, .07);
    color: #ad7800;
    text-decoration: none;
  }
  .citizen-mobile-header-notifications .bpw-icon { width: 21px; height: 21px; }
  .citizen-mobile-header-notifications:focus-visible { outline: 3px solid rgba(16, 128, 82, .25); outline-offset: 2px; }

  .citizen-portal-home-page .citizen-portal-mobile-welcome,
  .citizen-portal-home-page .citizen-portal-mobile-services,
  .citizen-portal-home-page .citizen-portal-mobile-public-content { display: block; }
  .citizen-portal-home-page .citizen-portal-mobile-guest-card { display: grid; }

  .citizen-portal-home-page .citizen-portal-mobile-welcome {
    margin: 0 0 14px;
    padding: 21px 19px;
    overflow: hidden;
    border: 1px solid #e7d78e;
    border-radius: 21px;
    background: linear-gradient(135deg, #fff9d8, #fff0af);
    box-shadow: 0 15px 28px rgba(117, 93, 18, .11);
  }
  .citizen-portal-mobile-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0e7549;
    font-size: .65rem;
    font-weight: 950;
    letter-spacing: .075em;
    text-transform: uppercase;
  }
  .citizen-portal-mobile-kicker .bpw-icon { width: 17px; height: 17px; }
  .citizen-portal-mobile-welcome h1 {
    max-width: 15ch;
    margin: 8px 0 7px;
    color: #0b3926;
    font-size: clamp(1.65rem, 8vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -.035em;
  }
  .citizen-portal-mobile-welcome p { margin: 0; color: #4e6657; font-size: .9rem; font-weight: 650; line-height: 1.46; }
  .citizen-portal-mobile-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: #075f3a;
    font-size: .82rem;
    font-weight: 900;
    text-decoration: none;
  }
  .citizen-portal-mobile-hero-link .bpw-icon { width: 18px; height: 18px; }

  .citizen-portal-mobile-services { margin: 0 0 15px; }
  .citizen-portal-mobile-section-heading { margin: 0 2px 10px; }
  .citizen-portal-mobile-section-heading > span { color: #718378; font-size: .64rem; font-weight: 950; letter-spacing: .085em; }
  .citizen-portal-mobile-section-heading h2 { margin: 3px 0 0; color: #0e3826; font-size: 1.16rem; line-height: 1.18; }
  .citizen-portal-mobile-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  .citizen-portal-mobile-service-grid a {
    display: grid;
    min-height: 105px;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 10px 6px;
    border: 1px solid #d7e6da;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(12, 69, 40, .07);
    color: #123e2c;
    font-size: .68rem;
    font-weight: 880;
    line-height: 1.18;
    text-align: center;
    text-decoration: none;
  }
  .citizen-portal-mobile-service-grid a .bpw-icon {
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 11px;
    box-sizing: content-box;
  }
  .citizen-portal-mobile-service-grid .is-service .bpw-icon { background: #e5edff; color: #2c5ed4; }
  .citizen-portal-mobile-service-grid .is-history .bpw-icon { background: #e3f4fb; color: #08799c; }
  .citizen-portal-mobile-service-grid .is-updates .bpw-icon { background: #fff4ce; color: #ae7900; }
  .citizen-portal-mobile-service-grid .is-emergency .bpw-icon { background: #ffe7e1; color: #cf472f; }
  .citizen-portal-mobile-service-grid .is-complaint .bpw-icon { background: #f1e9ff; color: #6c48b6; }
  .citizen-portal-mobile-service-grid .is-transparency .bpw-icon { background: #e3f6ec; color: #087b54; }
  .citizen-portal-mobile-service-grid a:focus-visible { outline: 3px solid rgba(16, 128, 82, .25); outline-offset: 2px; }
  .citizen-portal-mobile-search-empty {
    margin: 10px 0 0;
    padding: 12px;
    border: 1px dashed #d6c36b;
    border-radius: 14px;
    background: #fff9df;
    color: #695514;
    font-size: .78rem;
    font-weight: 760;
    line-height: 1.45;
  }

  .citizen-portal-mobile-guest-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 15px;
    padding: 17px;
    border: 1px solid #c9ddcf;
    border-radius: 20px;
    background: linear-gradient(135deg, #e6f7ec, #fff7cc);
    box-shadow: 0 14px 25px rgba(11, 82, 47, .09);
  }
  .citizen-portal-mobile-guest-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: #087545;
    box-shadow: 0 8px 15px rgba(8, 117, 69, .18);
    color: #fff;
  }
  .citizen-portal-mobile-guest-icon .bpw-icon { width: 24px; height: 24px; }
  .citizen-portal-mobile-guest-card h2 { margin: 3px 0 5px; color: #0b3a26; font-size: 1.04rem; line-height: 1.2; }
  .citizen-portal-mobile-guest-card p { margin: 0; color: #526c5b; font-size: .79rem; font-weight: 650; line-height: 1.43; }
  .citizen-portal-mobile-guest-actions { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 8px; }
  .citizen-portal-mobile-guest-actions .btn { min-height: 40px; justify-content: center; padding: 8px; font-size: .75rem; }

  .citizen-portal-mobile-public-content { margin-bottom: 8px; }
  .citizen-portal-mobile-feed-card {
    margin: 0 0 13px;
    padding: 16px;
    border: 1px solid #d8e6db;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 13px 25px rgba(12, 69, 40, .08);
  }
  .citizen-portal-mobile-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
  }
  .citizen-portal-mobile-card-heading > div > span { display: inline-flex; align-items: center; gap: 5px; color: #0d7950; font-size: .62rem; font-weight: 950; letter-spacing: .07em; }
  .citizen-portal-mobile-card-heading > div > span .bpw-icon { width: 16px; height: 16px; }
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-card-heading > div > span { color: #bd452d; }
  .citizen-portal-mobile-card-heading h2 { margin: 3px 0 0; color: #103a28; font-size: 1.05rem; line-height: 1.18; }
  .citizen-portal-mobile-card-heading > a { padding: 6px 8px; border: 1px solid #c8dfcc; border-radius: 10px; color: #087545; font-size: .69rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
  .citizen-portal-mobile-update-list { display: grid; gap: 8px; }
  .citizen-portal-mobile-update-list > a {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 9px;
    border-radius: 13px;
    background: #f4faf5;
    color: #174532;
    text-decoration: none;
  }
  .citizen-portal-mobile-update-list > a > span:first-child { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #fff3cb; color: #ae7900; }
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a > span:first-child { background: #ffe7e1; color: #cf472f; }
  .citizen-portal-mobile-update-list > a > span:last-child { display: grid; min-width: 0; gap: 2px; }
  .citizen-portal-mobile-update-list small { overflow: hidden; color: #0d7a4e; font-size: .61rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
  .citizen-portal-mobile-update-list b { overflow: hidden; color: #123e2b; font-size: .81rem; text-overflow: ellipsis; white-space: nowrap; }
  .citizen-portal-mobile-update-list em { overflow: hidden; color: #698073; font-size: .67rem; font-style: normal; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
  .citizen-portal-mobile-empty { margin: 0; padding: 12px; border: 1px dashed #cfe0d2; border-radius: 13px; color: #6a8274; font-size: .78rem; font-weight: 680; line-height: 1.45; }

  /* The wide portal cards are deliberately hidden only on the phone homepage:
     their content is represented above in compact, app-like cards. */
  .citizen-portal-home-page .citizen-portal-hero,
  .citizen-portal-home-page .citizen-portal-feature-grid,
  .citizen-portal-home-page .citizen-feature-detail-modal,
  .citizen-portal-home-page .citizen-portal-home-grid,
  .citizen-portal-home-page .citizen-action-preview,
  .citizen-portal-home-page .citizen-portal-footer { display: none; }

  .citizen-website-mobile-tabs a:nth-child(5) .bpw-icon { background: #e3f5ec; color: #087545; }
  .citizen-website-mobile-tabs a:nth-child(5).is-active .bpw-icon { background: linear-gradient(135deg, #087545, #2c9c62); }

  html[data-citizen-theme="dark"] .citizen-mobile-header-search label { border-color: #2b573d; background: #102719; color: #9ee2b5; }
  html[data-citizen-theme="dark"] .citizen-mobile-header-search input { color: #edf8f0; }
  html[data-citizen-theme="dark"] .citizen-mobile-header-search input::placeholder { color: #9ab9a6; }
  html[data-citizen-theme="dark"] .citizen-mobile-header-notifications { border-color: #6c5822; background: #382f12; color: #f1cb55; }
  html[data-citizen-theme="dark"] .citizen-portal-home-page .citizen-portal-mobile-welcome { border-color: #6c5822; background: linear-gradient(135deg, #2c341c, #493b16); }
  html[data-citizen-theme="dark"] .citizen-portal-mobile-welcome h1,
  html[data-citizen-theme="dark"] .citizen-portal-mobile-section-heading h2,
  html[data-citizen-theme="dark"] .citizen-portal-mobile-card-heading h2,
  html[data-citizen-theme="dark"] .citizen-portal-mobile-guest-card h2 { color: #edf8f0; }
  html[data-citizen-theme="dark"] .citizen-portal-mobile-welcome p,
  html[data-citizen-theme="dark"] .citizen-portal-mobile-guest-card p,
  html[data-citizen-theme="dark"] .citizen-portal-mobile-empty { color: #b4cfbd; }
  html[data-citizen-theme="dark"] .citizen-portal-mobile-service-grid a,
  html[data-citizen-theme="dark"] .citizen-portal-mobile-feed-card { border-color: #294b37; background: #102319; color: #eaf7ed; }
  html[data-citizen-theme="dark"] .citizen-portal-mobile-service-grid a { color: #eaf7ed; }
  html[data-citizen-theme="dark"] .citizen-portal-mobile-guest-card { border-color: #31513b; background: linear-gradient(135deg, #143826, #3e3415); }
  html[data-citizen-theme="dark"] .citizen-portal-mobile-update-list > a { background: #173223; color: #eaf7ed; }
  html[data-citizen-theme="dark"] .citizen-portal-mobile-update-list b { color: #eaf7ed; }
  html[data-citizen-theme="dark"] .citizen-portal-mobile-update-list em { color: #b4cfbd; }
html[data-citizen-theme="dark"] .citizen-portal-mobile-card-heading > a { border-color: #31583f; color: #9ee2b5; }
}

/* MyDasma APK parity for the citizen website on phone and tablet.  This is
   intentionally below every legacy phone rule and ends at 1024px, leaving
   the established desktop portal completely unchanged. */
.citizen-mobile-header-theme,
.citizen-portal-mobile-verification { display: none; }

@media (max-width: 1024px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body.public-service-body:not(.mydasma-body) {
    min-width: 0;
    background: #000;
    color: #f2f2f7;
    font-family: var(--citizen-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  }

  body.public-service-body:not(.mydasma-body) .public-service-shell {
    width: min(100%, 860px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(94px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }

  body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) {
    display: block !important;
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 0;
    margin: calc(-1 * max(12px, env(safe-area-inset-top))) calc(-1 * max(20px, env(safe-area-inset-right))) 14px calc(-1 * max(20px, env(safe-area-inset-left)));
    padding: max(8px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
    background: rgba(0, 0, 0, .96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .34);
    backdrop-filter: blur(16px);
  }

  body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) .public-brand,
  body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav { display: none !important; }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-header-tools {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search { flex: 1 1 auto; min-width: 0; margin: 0; }
  body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: #2c2c2e;
    box-shadow: none;
    color: #d1d1d6;
  }
  body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search .bpw-icon { width: 20px; height: 20px; }
  body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input {
    height: 46px;
    color: #f2f2f7;
    font-size: .82rem;
    font-weight: 700;
  }
  body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input::placeholder { color: #b8b8be; }
  body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search:focus-within label { outline: 2px solid rgba(10, 132, 255, .72); outline-offset: 1px; box-shadow: none; }

  .citizen-mobile-header-theme,
  .citizen-mobile-header-notifications {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #2c2c2e;
    color: #ffb400;
    box-shadow: none;
    text-decoration: none;
  }
  .citizen-mobile-header-theme { width: 42px; height: 42px; padding: 0; cursor: pointer; }
  .citizen-mobile-header-notifications { position: relative; width: 48px; height: 48px; }
  .citizen-mobile-header-theme:focus-visible,
  .citizen-mobile-header-notifications:focus-visible { outline: 3px solid rgba(10, 132, 255, .72); outline-offset: 2px; }
  .citizen-mobile-header-theme .bpw-icon { width: 21px; height: 21px; }
  .citizen-mobile-header-notifications .bpw-icon { width: 22px; height: 22px; }
  .citizen-mobile-header-notifications::after {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border: 2px solid #000;
    border-radius: 50%;
    background: #ff453a;
    content: "";
  }
  .citizen-mobile-theme-icon { display: none; }
  .citizen-mobile-theme-icon--moon { display: grid; }
  html[data-citizen-theme="dark"] .citizen-mobile-theme-icon--moon { display: none; }
  html[data-citizen-theme="dark"] .citizen-mobile-theme-icon--sun { display: grid; }

  .citizen-website-mobile-tabs {
    display: grid;
    position: fixed;
    z-index: 60;
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    width: min(100%, 860px);
    min-height: 78px;
    margin: auto;
    padding: 7px max(12px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-top: 1px solid #323235;
    background: rgba(28, 28, 30, .98);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .34);
    backdrop-filter: blur(16px);
  }
  .citizen-website-mobile-tabs a {
    display: grid;
    min-height: 60px;
    place-items: center;
    align-content: center;
    gap: 4px;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent !important;
    color: #d1d1d6;
    font-size: .61rem;
    font-weight: 800;
    line-height: 1.05;
    text-decoration: none;
  }
  .citizen-website-mobile-tabs .bpw-icon {
    width: 23px;
    height: 23px;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .citizen-website-mobile-tabs a:nth-child(1), .citizen-website-mobile-tabs a:nth-child(1) .bpw-icon { color: #4cc9b0; }
  .citizen-website-mobile-tabs a:nth-child(2), .citizen-website-mobile-tabs a:nth-child(2) .bpw-icon { color: #0a84ff; }
  .citizen-website-mobile-tabs a:nth-child(3), .citizen-website-mobile-tabs a:nth-child(3) .bpw-icon { color: #ffb400; }
  .citizen-website-mobile-tabs a:nth-child(4), .citizen-website-mobile-tabs a:nth-child(4) .bpw-icon { color: #ff453a; }
  .citizen-website-mobile-tabs a:nth-child(5), .citizen-website-mobile-tabs a:nth-child(5) .bpw-icon { color: #5e5ce6; }
  .citizen-website-mobile-tabs a:not(.is-active) { opacity: .72; }
  .citizen-website-mobile-tabs a.is-active { opacity: 1; font-weight: 900; }
  .citizen-website-mobile-tabs a:focus-visible { outline: 2px solid #0a84ff; outline-offset: -2px; }

  /* Home only: the duplicate app composition replaces the wide web panels. */
  .citizen-portal-home-page .citizen-portal-mobile-welcome,
  .citizen-portal-home-page .citizen-portal-mobile-services,
  .citizen-portal-home-page .citizen-portal-mobile-public-content { display: block; }
  .citizen-portal-home-page .citizen-portal-mobile-verification { display: grid; }
  .citizen-portal-home-page .citizen-portal-mobile-guest-card { display: none !important; }
  .citizen-portal-home-page .citizen-portal-hero,
  .citizen-portal-home-page .citizen-portal-feature-grid,
  .citizen-portal-home-page .citizen-feature-detail-modal,
  .citizen-portal-home-page .citizen-portal-home-grid,
  .citizen-portal-home-page .citizen-action-preview,
  .citizen-portal-home-page .citizen-portal-footer { display: none !important; }

  .citizen-portal-home-page .citizen-portal-mobile-welcome {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: space-between;
    min-height: 150px;
    margin: 0 0 22px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 30px;
    background:
      radial-gradient(circle at 92% 8%, rgba(255, 180, 0, .25), transparent 24%),
      radial-gradient(circle at 88% 83%, rgba(94, 92, 230, .48), transparent 35%),
      linear-gradient(135deg, #1e1b22 0%, #1e1b22 45%, #100f13 100%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
  }
  .citizen-portal-home-page .citizen-portal-mobile-welcome::after {
    position: absolute;
    z-index: -1;
    top: -54px;
    right: -58px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 44% 56% 54% 46%;
    box-shadow: -46px 46px 0 -1px rgba(76, 201, 176, .11), -92px 92px 0 -2px rgba(255, 180, 0, .10);
    content: "";
    transform: rotate(18deg);
  }
  .citizen-portal-mobile-kicker {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .025em;
    text-transform: uppercase;
  }
  .citizen-portal-mobile-kicker .bpw-icon { width: 16px; height: 16px; color: #4cc9b0; }
  .citizen-portal-mobile-welcome h1 {
    max-width: 15ch;
    margin: 16px 0 4px;
    color: #fff;
    font-size: clamp(1.52rem, 6.7vw, 2rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.04em;
  }
  .citizen-portal-mobile-welcome p { margin: 0; color: #e9e3f2; font-size: .84rem; font-weight: 650; line-height: 1.42; }
  .citizen-portal-mobile-welcome h1 .heading-auto-icon,
  .citizen-portal-mobile-section-heading h2 .heading-auto-icon,
  .citizen-portal-mobile-card-heading h2 .heading-auto-icon { display: none !important; }

  .citizen-portal-mobile-verification {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    margin: -8px 0 21px;
    padding: 12px 13px;
    border: 1px solid rgba(255, 180, 0, .24);
    border-radius: 18px;
    background: #413725;
    color: #fff8df;
  }
  .citizen-portal-mobile-verification > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: rgba(255, 180, 0, .18); color: #ffb400; }
  .citizen-portal-mobile-verification > span .bpw-icon { width: 20px; height: 20px; }
  .citizen-portal-mobile-verification b,
  .citizen-portal-mobile-verification small { display: block; }
  .citizen-portal-mobile-verification b { font-size: .77rem; }
  .citizen-portal-mobile-verification small { margin-top: 2px; color: #e9d9ad; font-size: .66rem; font-weight: 650; line-height: 1.35; }
  .citizen-portal-mobile-verification a { padding: 8px 10px; border-radius: 11px; background: #ffb400; color: #201708; font-size: .68rem; font-weight: 900; text-decoration: none; }

  .citizen-portal-mobile-services { margin: 0 0 24px; }
  .citizen-portal-mobile-section-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
  }
  .citizen-portal-mobile-section-heading > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: rgba(255, 69, 58, .16); color: #ff453a; }
  .citizen-portal-mobile-section-heading > span .bpw-icon { width: 20px; height: 20px; }
  .citizen-portal-mobile-section-heading h2 { margin: 0; color: #f2f2f7; font-size: 1.06rem; font-weight: 900; line-height: 1.15; letter-spacing: -.02em; }
  .citizen-portal-mobile-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .citizen-portal-mobile-service-grid a {
    display: grid;
    min-height: 122px;
    align-content: center;
    justify-items: center;
    gap: 9px;
    padding: 11px 7px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 22px;
    background: linear-gradient(160deg, #2c2c2e, #1c1c1e);
    box-shadow: 0 9px 20px rgba(0, 0, 0, .19);
    color: #f2f2f7;
    text-align: center;
    text-decoration: none;
  }
  .citizen-portal-mobile-service-grid a > span:last-child { display: grid; gap: 3px; min-width: 0; }
  .citizen-portal-mobile-service-grid a b,
  .citizen-portal-mobile-service-grid a small { display: block; }
  .citizen-portal-mobile-service-grid a b { font-size: .69rem; font-weight: 900; line-height: 1.12; }
  .citizen-portal-mobile-service-grid a small { color: #c7c7cc; font-size: .57rem; font-weight: 650; line-height: 1.22; }
  .citizen-portal-mobile-service-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; }
  .citizen-portal-mobile-service-icon .bpw-icon { width: 24px; height: 24px; }
  .citizen-portal-mobile-service-grid .is-service .citizen-portal-mobile-service-icon { background: rgba(10, 132, 255, .17); color: #0a84ff; }
  .citizen-portal-mobile-service-grid .is-complaint .citizen-portal-mobile-service-icon { background: rgba(255, 69, 58, .17); color: #ff453a; }
  .citizen-portal-mobile-service-grid .is-history .citizen-portal-mobile-service-icon { background: rgba(76, 201, 176, .17); color: #4cc9b0; }
  .citizen-portal-mobile-service-grid a:focus-visible { outline: 3px solid #0a84ff; outline-offset: 2px; }
  .citizen-portal-mobile-search-empty { margin: 11px 0 0; padding: 12px; border: 1px solid rgba(255, 180, 0, .26); border-radius: 14px; background: #413725; color: #fff1c7; font-size: .76rem; font-weight: 700; line-height: 1.42; }

  .citizen-portal-mobile-public-content { margin: 0 0 8px; }
  .citizen-portal-mobile-feed-card { margin: 0 0 24px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .citizen-portal-mobile-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 11px;
  }
  .citizen-portal-mobile-card-heading > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .citizen-portal-mobile-card-heading > div > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: rgba(255, 180, 0, .16); color: #ffb400; }
  .citizen-portal-mobile-card-heading > div > span .bpw-icon { width: 20px; height: 20px; }
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-card-heading > div > span { background: rgba(255, 69, 58, .16); color: #ff453a; }
  .citizen-portal-mobile-card-heading h2 { margin: 0; color: #f2f2f7; font-size: 1.06rem; font-weight: 900; line-height: 1.15; letter-spacing: -.02em; }
  .citizen-portal-mobile-card-heading > a { padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px; color: #0a84ff; font-size: .67rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
  .citizen-portal-mobile-update-list { display: grid; gap: 8px; }
  .citizen-portal-mobile-update-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px 11px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    background: #2c2c2e;
    color: #f2f2f7;
    box-shadow: none;
  }
  .citizen-portal-mobile-news-icon { display: grid; grid-column: 1; grid-row: 1; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: rgba(255, 180, 0, .16); color: #ffb400; }
  .citizen-portal-mobile-news-icon .bpw-icon { width: 20px; height: 20px; }
  .citizen-portal-mobile-update-item > div:not(.citizen-portal-mobile-update-links) { display: grid; grid-column: 2; grid-row: 1; min-width: 0; gap: 2px; }
  .citizen-portal-mobile-update-item small { overflow: hidden; color: #0a84ff; font-size: .6rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
  .citizen-portal-mobile-update-item b { overflow: hidden; color: #f2f2f7; font-size: .78rem; font-weight: 850; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  .citizen-portal-mobile-update-item em { overflow: hidden; color: #b8b8be; font-size: .64rem; font-style: normal; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  .citizen-portal-mobile-update-links { display: flex; grid-column: 2; flex-wrap: wrap; gap: 8px; }
  .citizen-portal-mobile-update-links a { color: #0a84ff; font-size: .63rem; font-weight: 850; text-decoration: none; }
  .citizen-portal-mobile-update-image { display: block; grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 104px; max-height: 160px; overflow: hidden; border-radius: 13px; }
  .citizen-portal-mobile-update-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .citizen-portal-mobile-update-item:has(.citizen-portal-mobile-update-image) .citizen-portal-mobile-update-links { grid-row: 3; }
  .citizen-portal-mobile-update-item:has(.citizen-portal-mobile-update-image) > div:not(.citizen-portal-mobile-update-links) { grid-row: 1; }
  .citizen-portal-mobile-empty { margin: 0; padding: 15px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: #2c2c2e; color: #c7c7cc; font-size: .76rem; font-weight: 650; line-height: 1.45; }

  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 66px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    background: #2c2c2e;
    color: #f2f2f7;
    text-decoration: none;
  }
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a > span:first-child { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: rgba(255, 69, 58, .16); color: #ff453a; }
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a > span:first-child .bpw-icon { width: 20px; height: 20px; }
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a > span:last-child { display: grid; min-width: 0; gap: 2px; }
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list small { color: #4cc9b0; }
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list b { color: #f2f2f7; }
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list em { color: #b8b8be; }

  /* Other public module pages keep their content, but inherit the real app
     shell and readable card surfaces while they are viewed on a tablet. */
  body.public-service-body:not(.mydasma-body) .public-hero-panel,
  body.public-service-body:not(.mydasma-body) .public-service-card,
  body.public-service-body:not(.mydasma-body) .public-flow-strip article,
  body.public-service-body:not(.mydasma-body) .citizen-access-hero,
  body.public-service-body:not(.mydasma-body) .citizen-account-hero,
  body.public-service-body:not(.mydasma-body) .citizen-access-card,
  body.public-service-body:not(.mydasma-body) .citizen-account-profile,
  body.public-service-body:not(.mydasma-body) .citizen-account-panel { border-color: rgba(255, 255, 255, .08); background: #1c1c1e; box-shadow: none; }
  body.public-service-body:not(.mydasma-body) .public-service-grid { grid-template-columns: 1fr; gap: 14px; }
  body.public-service-body:not(.mydasma-body) .public-hero-panel h1,
  body.public-service-body:not(.mydasma-body) .public-service-card h2,
  body.public-service-body:not(.mydasma-body) .citizen-access-hero h1,
  body.public-service-body:not(.mydasma-body) .citizen-account-hero h1 { color: #f2f2f7; }

  /* Android defaults to the dark palette.  Light is a deliberate user choice
     and uses the corresponding iOS light surfaces. */
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) { background: #f2f2f7; color: #1c1c1e; }
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) { background: rgba(242, 242, 247, .96); box-shadow: 0 8px 24px rgba(28, 28, 30, .08); }
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search label,
  html[data-citizen-theme="light"] .citizen-mobile-header-theme,
  html[data-citizen-theme="light"] .citizen-mobile-header-notifications { background: #e5e5ea; color: #007aff; }
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input { color: #1c1c1e; }
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input::placeholder { color: #5e5e63; }
  html[data-citizen-theme="light"] .citizen-mobile-header-notifications::after { border-color: #f2f2f7; }
  html[data-citizen-theme="light"] .citizen-website-mobile-tabs { border-color: #d1d1d6; background: rgba(255, 255, 255, .98); box-shadow: 0 -8px 24px rgba(28, 28, 30, .09); }
  html[data-citizen-theme="light"] .citizen-website-mobile-tabs a { color: #3a3a3c; }
  html[data-citizen-theme="light"] .citizen-portal-mobile-section-heading h2,
  html[data-citizen-theme="light"] .citizen-portal-mobile-card-heading h2 { color: #1c1c1e; }
  html[data-citizen-theme="light"] .citizen-portal-mobile-service-grid a,
  html[data-citizen-theme="light"] .citizen-portal-mobile-update-item,
  html[data-citizen-theme="light"] .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a,
  html[data-citizen-theme="light"] .citizen-portal-mobile-empty { border-color: #e5e5ea; background: #fff; color: #1c1c1e; box-shadow: 0 7px 18px rgba(28, 28, 30, .06); }
  html[data-citizen-theme="light"] .citizen-portal-mobile-service-grid a small,
  html[data-citizen-theme="light"] .citizen-portal-mobile-update-item em,
  html[data-citizen-theme="light"] .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list em { color: #6b6b70; }
  html[data-citizen-theme="light"] .citizen-portal-mobile-update-item b,
  html[data-citizen-theme="light"] .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list b { color: #1c1c1e; }
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .public-hero-panel,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .public-service-card,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .public-flow-strip article,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-access-hero,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-account-hero,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-access-card,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-account-profile,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-account-panel { border-color: #e5e5ea; background: #fff; box-shadow: 0 8px 20px rgba(28, 28, 30, .07); }
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .public-hero-panel h1,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .public-service-card h2,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-access-hero h1,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-account-hero h1 { color: #1c1c1e; }
}

@media (max-width: 420px) {
  body.public-service-body:not(.mydasma-body) .public-service-shell { padding-right: 14px; padding-left: 14px; }
  body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
  .citizen-portal-mobile-service-grid { gap: 7px; }
  .citizen-portal-mobile-service-grid a { min-height: 116px; padding-right: 5px; padding-left: 5px; border-radius: 19px; }
  .citizen-portal-mobile-service-grid a b { font-size: .63rem; }
  .citizen-portal-mobile-service-grid a small { font-size: .53rem; }
  .citizen-portal-mobile-service-icon { width: 38px; height: 38px; border-radius: 13px; }
  .citizen-portal-mobile-service-icon .bpw-icon { width: 22px; height: 22px; }
}

/* Stable mobile PWA hierarchy: one colored glyph per surface, with the news
   content and actions using explicit grid areas instead of implicit rows. */
@media (max-width: 1024px) {
  .citizen-mobile-header-search .bpw-icon,
  .citizen-mobile-header-theme .bpw-icon,
  .citizen-mobile-header-notifications .bpw-icon,
  .citizen-portal-mobile-kicker .bpw-icon,
  .citizen-portal-mobile-verification > span .bpw-icon,
  .citizen-portal-mobile-section-heading > span .bpw-icon,
  .citizen-portal-mobile-service-icon .bpw-icon,
  .citizen-portal-mobile-card-heading > div > span .bpw-icon,
  .citizen-portal-mobile-news-icon .bpw-icon,
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a > span:first-child .bpw-icon,
  .citizen-portal-mobile-update-links .bpw-icon,
  .citizen-website-mobile-tabs .bpw-icon {
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    --icon-wash: transparent;
  }

  .citizen-mobile-header-search .bpw-icon,
  .citizen-portal-mobile-card-heading:not(.citizen-portal-mobile-emergency-card) > div > span .bpw-icon,
  .citizen-portal-mobile-news-icon .bpw-icon,
  .citizen-portal-mobile-update-link--details .bpw-icon {
    color: #64d2ff !important;
    --icon-ink: #64d2ff;
    --icon-accent: #0a84ff;
    --icon-detail: #5e5ce6;
  }

  .citizen-mobile-header-theme .bpw-icon,
  .citizen-portal-mobile-kicker .bpw-icon,
  .citizen-portal-mobile-verification > span .bpw-icon {
    color: #ffd166 !important;
    --icon-ink: #ffd166;
    --icon-accent: #ffb400;
    --icon-detail: #ff9f0a;
  }

  .citizen-mobile-header-notifications .bpw-icon,
  .citizen-portal-mobile-section-heading > span .bpw-icon,
  .citizen-portal-mobile-service-grid .is-complaint .citizen-portal-mobile-service-icon .bpw-icon,
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-card-heading > div > span .bpw-icon,
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a > span:first-child .bpw-icon {
    color: #ff6961 !important;
    --icon-ink: #ff6961;
    --icon-accent: #ff453a;
    --icon-detail: #ff9f7a;
  }

  .citizen-portal-mobile-service-grid .is-service .citizen-portal-mobile-service-icon .bpw-icon {
    color: #64d2ff !important;
    --icon-ink: #64d2ff;
    --icon-accent: #0a84ff;
    --icon-detail: #5e5ce6;
  }

  .citizen-portal-mobile-service-grid .is-history .citizen-portal-mobile-service-icon .bpw-icon {
    color: #61e6c3 !important;
    --icon-ink: #61e6c3;
    --icon-accent: #4cc9b0;
    --icon-detail: #2dd4bf;
  }

  .citizen-portal-mobile-update-link--external .bpw-icon {
    width: 15px;
    height: 15px;
    color: #c3b8ff !important;
    --icon-ink: #c3b8ff;
    --icon-accent: #8e7dff;
    --icon-detail: #5e5ce6;
  }

  .citizen-website-mobile-tabs a:nth-child(1) .bpw-icon {
    color: #61e6c3 !important;
    --icon-ink: #61e6c3;
    --icon-accent: #4cc9b0;
    --icon-detail: #2dd4bf;
  }
  .citizen-website-mobile-tabs a:nth-child(2) .bpw-icon {
    color: #64d2ff !important;
    --icon-ink: #64d2ff;
    --icon-accent: #0a84ff;
    --icon-detail: #5e5ce6;
  }
  .citizen-website-mobile-tabs a:nth-child(3) .bpw-icon {
    color: #ffd166 !important;
    --icon-ink: #ffd166;
    --icon-accent: #ffb400;
    --icon-detail: #ff9f0a;
  }
  .citizen-website-mobile-tabs a:nth-child(4) .bpw-icon {
    color: #ff6961 !important;
    --icon-ink: #ff6961;
    --icon-accent: #ff453a;
    --icon-detail: #ff9f0a;
  }
  .citizen-website-mobile-tabs a:nth-child(5) .bpw-icon {
    color: #c3b8ff !important;
    --icon-ink: #c3b8ff;
    --icon-accent: #8e7dff;
    --icon-detail: #5e5ce6;
  }

  .citizen-mobile-header-search label { color: #64d2ff; }
  .citizen-mobile-header-theme { color: #ffd166; }
  .citizen-mobile-header-notifications { color: #ff6961; }
  .citizen-portal-mobile-kicker .bpw-icon { margin-right: 1px; }

  .citizen-portal-mobile-section-heading > span {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 69, 58, .30);
    background: rgba(255, 69, 58, .16);
    color: #ff6961;
  }

  .citizen-portal-mobile-service-grid .is-service .citizen-portal-mobile-service-icon {
    border: 1px solid rgba(10, 132, 255, .34);
    background: rgba(10, 132, 255, .16);
  }
  .citizen-portal-mobile-service-grid .is-complaint .citizen-portal-mobile-service-icon {
    border: 1px solid rgba(255, 69, 58, .34);
    background: rgba(255, 69, 58, .16);
  }
  .citizen-portal-mobile-service-grid .is-history .citizen-portal-mobile-service-icon {
    border: 1px solid rgba(76, 201, 176, .34);
    background: rgba(76, 201, 176, .16);
  }

  .citizen-portal-mobile-card-heading > div { min-width: 0; }
  .citizen-portal-mobile-card-heading > div > span {
    flex: 0 0 auto;
    border: 1px solid rgba(10, 132, 255, .30);
    background: rgba(10, 132, 255, .16);
    color: #64d2ff;
  }
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-card-heading > div > span {
    border-color: rgba(255, 69, 58, .30);
    background: rgba(255, 69, 58, .16);
    color: #ff6961;
  }
  .citizen-portal-mobile-card-heading h2 {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .citizen-portal-mobile-card-heading > a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-color: rgba(10, 132, 255, .36);
    background: rgba(10, 132, 255, .10);
    color: #64d2ff;
    line-height: 1;
  }
  .citizen-portal-mobile-emergency-card .citizen-portal-mobile-card-heading > a {
    border-color: rgba(255, 69, 58, .36);
    background: rgba(255, 69, 58, .10);
    color: #ff9a93;
  }

  .citizen-portal-mobile-update-item {
    grid-template-areas:
      "icon copy"
      "links links";
    align-items: start;
    gap: 10px 12px;
    padding: 14px;
    border-color: rgba(255, 255, 255, .10);
  }
  .citizen-portal-mobile-update-item.has-image {
    grid-template-areas:
      "icon copy"
      "image image"
      "links links";
  }
  .citizen-portal-mobile-news-icon {
    grid-area: icon;
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 auto;
    border: 1px solid rgba(10, 132, 255, .30);
    background: rgba(10, 132, 255, .16);
    color: #64d2ff;
  }
  .citizen-portal-mobile-update-item.is-government .citizen-portal-mobile-news-icon {
    border-color: rgba(255, 180, 0, .34);
    background: rgba(255, 180, 0, .16);
    color: #ffd166;
  }
  .citizen-portal-mobile-update-item.is-government .citizen-portal-mobile-news-icon .bpw-icon {
    color: #ffd166 !important;
    --icon-ink: #ffd166;
    --icon-accent: #ffb400;
    --icon-detail: #ff9f0a;
  }
  .citizen-portal-mobile-update-item.is-service .citizen-portal-mobile-news-icon {
    border-color: rgba(10, 132, 255, .34);
    background: rgba(10, 132, 255, .16);
    color: #64d2ff;
  }
  .citizen-portal-mobile-update-item.is-service .citizen-portal-mobile-news-icon .bpw-icon {
    color: #64d2ff !important;
    --icon-ink: #64d2ff;
    --icon-accent: #0a84ff;
    --icon-detail: #5e5ce6;
  }
  .citizen-portal-mobile-update-item.is-alert .citizen-portal-mobile-news-icon {
    border-color: rgba(255, 69, 58, .34);
    background: rgba(255, 69, 58, .16);
    color: #ff6961;
  }
  .citizen-portal-mobile-update-item.is-alert .citizen-portal-mobile-news-icon .bpw-icon {
    color: #ff6961 !important;
    --icon-ink: #ff6961;
    --icon-accent: #ff453a;
    --icon-detail: #ff9f0a;
  }
  .citizen-portal-mobile-update-item.is-update .citizen-portal-mobile-news-icon {
    border-color: rgba(142, 125, 255, .34);
    background: rgba(94, 92, 230, .16);
    color: #c3b8ff;
  }
  .citizen-portal-mobile-update-item.is-update .citizen-portal-mobile-news-icon .bpw-icon {
    color: #c3b8ff !important;
    --icon-ink: #c3b8ff;
    --icon-accent: #8e7dff;
    --icon-detail: #5e5ce6;
  }
  .citizen-portal-mobile-update-item > .citizen-portal-mobile-update-copy {
    display: grid;
    grid-area: copy !important;
    min-width: 0;
    gap: 3px;
    padding-top: 2px;
  }
  .citizen-portal-mobile-update-copy small,
  .citizen-portal-mobile-update-copy b,
  .citizen-portal-mobile-update-copy em {
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .citizen-portal-mobile-update-copy small {
    color: #64d2ff;
    font-size: .61rem;
    font-weight: 900;
    line-height: 1.2;
  }
  .citizen-portal-mobile-update-copy b {
    display: -webkit-box;
    overflow: hidden;
    color: #f2f2f7;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .citizen-portal-mobile-update-copy em {
    display: -webkit-box;
    overflow: hidden;
    color: #b8b8be;
    font-size: .67rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .citizen-portal-mobile-update-item > .citizen-portal-mobile-update-image {
    position: relative;
    display: block;
    grid-area: image;
    grid-column: auto;
    grid-row: auto;
    width: 100% !important;
    height: clamp(118px, 34vw, 150px) !important;
    min-height: 0;
    max-height: none;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 14px;
    background: #1c1c1e !important;
    box-shadow: none !important;
    cursor: zoom-in;
  }
  .citizen-portal-mobile-update-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .citizen-portal-mobile-update-image .citizen-image-zoom-hint {
    position: absolute;
    right: 9px;
    bottom: 9px;
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 9px;
    background: rgba(0, 0, 0, .68);
    color: #fff;
    font-size: .63rem;
    font-weight: 900;
    line-height: 1;
  }
  .citizen-portal-mobile-update-links {
    display: flex;
    grid-area: links;
    grid-column: auto;
    grid-row: auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .citizen-portal-mobile-update-links .citizen-portal-mobile-update-link {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(10, 132, 255, .38);
    border-radius: 10px;
    background: rgba(10, 132, 255, .10);
    color: #64d2ff;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }
  .citizen-portal-mobile-update-links .citizen-portal-mobile-update-link--external {
    border-color: rgba(142, 125, 255, .42);
    background: rgba(94, 92, 230, .14);
    color: #c3b8ff;
  }
  .citizen-portal-mobile-update-links .citizen-portal-mobile-update-link:focus-visible,
  .citizen-portal-mobile-card-heading > a:focus-visible {
    outline: 2px solid #64d2ff;
    outline-offset: 2px;
  }

  /* Apply the same single, semantic colored glyph treatment to the other
     citizen PWA modules without touching their desktop layouts. */
  body.public-service-body:not(.mydasma-body) .public-service-shell :is(
    .eyebrow,
    .field-title,
    .dashboard-panel-header h2,
    .dashboard-panel-header h3,
    .public-hero-actions .btn,
    .form-actions .btn,
    .citizen-access-benefits li,
    .citizen-access-form-actions .btn,
    .citizen-account-inline-form .btn,
    .citizen-account-panel .btn,
    .citizen-update-official-link
  ) > .bpw-icon {
    width: 18px;
    min-width: 18px !important;
    height: 18px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    vertical-align: middle;
  }
  body.public-service-body:not(.mydasma-body) .public-service-shell :is(
    .dashboard-panel-header h2,
    .dashboard-panel-header h3
  ) > .bpw-icon {
    width: 20px;
    min-width: 20px !important;
    height: 20px;
    margin-right: 5px;
  }

  html[data-citizen-theme="light"] .citizen-mobile-header-search label { color: #007aff; }
  html[data-citizen-theme="light"] .citizen-mobile-header-notifications { color: #ff453a; }
  html[data-citizen-theme="light"] .citizen-portal-mobile-update-copy b { color: #1c1c1e; }
  html[data-citizen-theme="light"] .citizen-portal-mobile-update-copy em { color: #6b6b70; }
  html[data-citizen-theme="light"] .citizen-portal-mobile-update-links .citizen-portal-mobile-update-link--details,
  html[data-citizen-theme="light"] .citizen-portal-mobile-card-heading > a {
    border-color: rgba(0, 122, 255, .28);
    background: #edf7ff;
    color: #007aff;
  }
  html[data-citizen-theme="light"] .citizen-portal-mobile-update-links .citizen-portal-mobile-update-link--external {
    border-color: rgba(94, 92, 230, .26);
    background: #f1efff;
    color: #5856d6;
  }
  html[data-citizen-theme="light"] .citizen-portal-mobile-emergency-card .citizen-portal-mobile-card-heading > a {
    border-color: rgba(255, 69, 58, .28);
    background: #fff1ef;
    color: #d70015;
  }
}

/* Final public-PWA dark palette.
   The old dark rules mixed green website surfaces with iOS charcoal surfaces,
   which left individual cards looking like light mode.  Keep the desktop
   layout unchanged, but give every public surface one neutral dark system.
   Colored icons and status accents remain the only saturated elements. */
html[data-citizen-theme="dark"] {
  --citizen-dark-page: #000;
  --citizen-dark-surface: #1c1c1e;
  --citizen-dark-surface-raised: #2c2c2e;
  --citizen-dark-surface-soft: #252529;
  --citizen-dark-line: #3a3a3c;
  --citizen-dark-text: #f2f2f7;
  --citizen-dark-muted: #aeaeb2;
  --citizen-dark-subtle: #8e8e93;
  --citizen-dark-blue: #64d2ff;
  --citizen-dark-green: #63e6be;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) {
  background: var(--citizen-dark-page);
  color: var(--citizen-dark-text);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .public-service-shell {
  color: inherit;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .public-hero-panel,
  .public-service-card,
  .public-flow-strip article,
  .citizen-portal-feature,
  .citizen-update-list article,
  .citizen-hotline-list a,
  .citizen-action-list article,
  .citizen-report-list article,
  .citizen-announcement-card,
  .citizen-directory-card,
  .citizen-action-card,
  .request-history-group,
  .tracking-order-card,
  .tracking-update-panel,
  .tracking-latest-note,
  .tracking-update-history article,
  .order-progress article,
  .device-request-card,
  .citizen-portal-empty,
  .citizen-feature-detail-modal,
  .citizen-info-modal,
  .citizen-request-detail-modal,
  .citizen-account-hero,
  .citizen-account-profile,
  .citizen-account-panel,
  .citizen-feed-post,
  .citizen-directory-grid article,
  .public-consent,
  .public-combo-panel,
  .citizen-access-combo-panel,
  .citizen-scope-results,
  .citizen-info-modal-head
) {
  border-color: var(--citizen-dark-line);
  background: var(--citizen-dark-surface);
  color: var(--citizen-dark-text);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .tracking-order-head,
  .tracking-latest-note,
  .tracking-update-history article,
  .order-progress article,
  .citizen-account-panel--verification
) {
  border-color: var(--citizen-dark-line);
  background: var(--citizen-dark-surface-raised);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .public-hero-panel,
  .public-service-card,
  .public-flow-strip article,
  .citizen-portal-feature,
  .citizen-update-list article,
  .citizen-hotline-list a,
  .citizen-action-list article,
  .citizen-report-list article,
  .citizen-announcement-card,
  .citizen-directory-card,
  .citizen-action-card,
  .request-history-group,
  .tracking-order-card,
  .tracking-update-panel,
  .tracking-latest-note,
  .tracking-update-history article,
  .order-progress article,
  .device-request-card,
  .citizen-feature-detail-modal,
  .citizen-info-modal,
  .citizen-request-detail-modal,
  .citizen-account-hero,
  .citizen-account-profile,
  .citizen-account-panel,
  .citizen-feed-post,
  .citizen-directory-grid article
) :is(h1, h2, h3, h4, b, strong, dt, dd) {
  color: var(--citizen-dark-text);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .public-hero-panel,
  .public-service-card,
  .public-flow-strip article,
  .citizen-portal-feature,
  .citizen-update-list article,
  .citizen-hotline-list a,
  .citizen-action-list article,
  .citizen-report-list article,
  .citizen-announcement-card,
  .citizen-directory-card,
  .citizen-action-card,
  .request-history-group,
  .tracking-order-card,
  .tracking-update-panel,
  .tracking-latest-note,
  .tracking-update-history article,
  .order-progress article,
  .device-request-card,
  .citizen-feature-detail-modal,
  .citizen-info-modal,
  .citizen-request-detail-modal,
  .citizen-account-hero,
  .citizen-account-profile,
  .citizen-account-panel,
  .citizen-feed-post,
  .citizen-directory-grid article
) :is(p, small, em, footer, .muted) {
  color: var(--citizen-dark-muted);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-update-official-link,
  .citizen-portal-mobile-update-links a,
  .citizen-email-link,
  .citizen-directory-grid > article > a:last-child,
  .tracking-update-details summary,
  .tracking-latest-note > span
) {
  color: var(--citizen-dark-blue);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
) {
  border-color: var(--citizen-dark-line);
  background: #151517;
  color: var(--citizen-dark-text);
  box-shadow: none;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(input, textarea)::placeholder {
  color: var(--citizen-dark-subtle);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(input, select, textarea):focus {
  border-color: var(--citizen-dark-blue);
  background: #1c1c1e;
  box-shadow: 0 0 0 3px rgba(100, 210, 255, .18);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .btn.secondary,
  .btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger),
  .citizen-feature-details
) {
  border-color: var(--citizen-dark-line);
  background: var(--citizen-dark-surface-raised);
  color: var(--citizen-dark-text);
  box-shadow: none;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .btn.secondary,
  .btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger),
  .citizen-feature-details
):hover {
  border-color: var(--citizen-dark-blue);
  background: #343438;
  color: #fff;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .tracking-progress-meter,
  .citizen-progress
) { background: #48484d; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .tracking-update-details,
  .citizen-mobile-request-section,
  .citizen-account-profile-note
) { border-color: var(--citizen-dark-line); }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .tracking-update-details summary::after,
  .citizen-mobile-request-stages article > span
) {
  border-color: var(--citizen-dark-line);
  background: #3a3a3c;
  color: var(--citizen-dark-muted);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .table-wrap,
  .citizen-request-detail-list > div,
  .citizen-request-detail-copy
) {
  border-color: var(--citizen-dark-line);
  background: #151517;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(table th, .table-wrap thead th) {
  border-color: var(--citizen-dark-line);
  background: var(--citizen-dark-surface-raised);
  color: var(--citizen-dark-text);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(table td, .table-wrap tbody td) {
  border-color: var(--citizen-dark-line);
  background: var(--citizen-dark-surface);
  color: var(--citizen-dark-muted);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-feature-detail-modal,
  .citizen-info-modal,
  .citizen-request-detail-modal
)::backdrop { background: rgba(0, 0, 0, .76); }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-account-panel--danger {
  border-color: #703c3c;
  background: #281919;
}

@media (max-width: 1024px) {
  /* The Android-style PWA is dark unless the visitor deliberately selects
     light mode. This covers fresh installs before a preference is saved. */
  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) {
    background: #000;
    color: #f2f2f7;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) {
    border-color: #27272a;
    background: rgba(0, 0, 0, .94);
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search label {
    border-color: #3a3a3c;
    background: #2c2c2e;
    color: #64d2ff;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input,
  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input:focus {
    border: 0;
    background: transparent !important;
    color: #f2f2f7;
    box-shadow: none;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search:focus-within label {
    border-color: #64d2ff;
    box-shadow: 0 0 0 3px rgba(100, 210, 255, .18);
  }

  html:not([data-citizen-theme="light"]) :is(
    .citizen-mobile-header-theme,
    .citizen-mobile-header-notifications
  ) { background: #2c2c2e; }

  html:not([data-citizen-theme="light"]) .citizen-website-mobile-tabs {
    border-color: #3a3a3c;
    background: rgba(28, 28, 30, .98);
  }

  html:not([data-citizen-theme="light"]) .citizen-website-mobile-tabs a.is-active {
    background: #2c2c2e !important;
    box-shadow: inset 0 2px 0 currentColor;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-portal-mobile-welcome,
    .citizen-portal-mobile-verification,
    .citizen-portal-mobile-service-grid a,
    .citizen-portal-mobile-update-item,
    .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a,
    .citizen-portal-mobile-empty,
    .citizen-mobile-primary-module-grid > a,
    .citizen-mobile-request-expanded:not([hidden]),
    .citizen-mobile-request-stages article,
    .request-history-group-mobile-tracker .citizen-action-card,
    .request-history-group-complaint .tracking-order-card > .tracking-order-head
  ) {
    border-color: #3a3a3c;
    background: #1c1c1e;
    color: #f2f2f7;
    box-shadow: none;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-portal-mobile-welcome {
    background: radial-gradient(circle at 92% 7%, rgba(10, 132, 255, .26), transparent 30%), linear-gradient(145deg, #2b2340, #1c1c1e 64%);
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-portal-mobile-verification,
    .citizen-portal-mobile-search-empty
  ) {
    border-color: rgba(255, 180, 0, .34);
    background: #302c1f;
    color: #fff1c7;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-portal-mobile-service-grid a small,
    .citizen-mobile-primary-module-copy small,
    .citizen-portal-mobile-update-item em,
    .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list em,
    .citizen-mobile-request-overview small,
    .citizen-mobile-request-overview p,
    .citizen-mobile-request-stages small
  ) { color: #aeaeb2; }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-portal-mobile-service-grid a b,
    .citizen-portal-mobile-update-item b,
    .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list b,
    .citizen-mobile-primary-module-copy b,
    .citizen-mobile-request-overview strong,
    .citizen-mobile-request-section h3,
    .citizen-mobile-request-stages b
  ) { color: #f2f2f7; }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-mobile-primary-modules-heading > span,
    .citizen-mobile-primary-module-icon,
    .citizen-portal-mobile-service-icon,
    .citizen-portal-mobile-news-icon,
    .citizen-portal-mobile-card-heading > div > span,
    .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a > span:first-child,
    .citizen-portal-mobile-verification > span
  ) { border: 0; }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .request-history-group-mobile-tracker .citizen-action-card > .badge,
  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .request-history-group-complaint .tracking-status-stack .badge {
    box-shadow: none;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-mobile-request-view,
    .citizen-request-detail-modal-dismiss
  ) {
    border-color: rgba(100, 210, 255, .46);
    background: rgba(10, 132, 255, .16);
    color: #64d2ff;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-request-toggle {
    border-color: rgba(99, 230, 190, .40);
    background: rgba(99, 230, 190, .12);
    color: #63e6be;
  }
}

@media (max-width: 360px) {
  .citizen-portal-mobile-update-links .citizen-portal-mobile-update-link { flex: 1 1 100%; }
}

/* Mobile request history follows the APK's compact case-card workflow:
   summary first, expanded tracking second, and full facts in a separate View dialog. */
.citizen-mobile-request-actions,
.citizen-mobile-request-expanded {
  display: none;
}

.citizen-request-detail-modal {
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 122, 79, .20);
  border-radius: 20px;
  background: #fff;
  color: #173022;
  box-shadow: 0 28px 72px rgba(2, 45, 28, .36);
}

.citizen-request-detail-modal::backdrop {
  background: rgba(3, 24, 16, .56);
  backdrop-filter: blur(4px);
}

.citizen-request-detail-modal-card {
  position: relative;
  display: grid;
  gap: 14px;
  max-height: calc(100dvh - 28px);
  padding: 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.citizen-request-detail-modal-close {
  position: absolute;
  top: 13px;
  right: 13px;
  display: grid !important;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 69, 58, .26);
  border-radius: 50%;
  background: #fff1ef;
  color: #d70015;
  box-shadow: none;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.citizen-request-detail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding-right: 42px;
  color: #c7472b;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.citizen-request-detail-kicker .bpw-icon,
.citizen-mobile-request-view .bpw-icon {
  width: 17px;
  min-width: 17px !important;
  height: 17px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.citizen-request-detail-kicker .bpw-icon {
  color: #ff453a !important;
  --icon-ink: #ff453a;
  --icon-accent: #ff9f0a;
  --icon-detail: #ff6961;
}

.citizen-request-detail-modal h2 {
  margin: -6px 38px 0 0;
  color: #173022;
  font-size: 1.3rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.citizen-request-detail-reference {
  margin: -8px 0 0;
  color: #607264;
  font-size: .78rem;
  font-weight: 760;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.citizen-request-detail-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.citizen-request-detail-list > div {
  display: grid;
  grid-template-columns: minmax(88px, .6fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(15, 122, 79, .14);
  border-radius: 12px;
  background: #f8fcf8;
}

.citizen-request-detail-list dt {
  color: #607264;
  font-size: .69rem;
  font-weight: 900;
}

.citizen-request-detail-list dd {
  min-width: 0;
  margin: 0;
  color: #173022;
  font-size: .8rem;
  font-weight: 850;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.citizen-request-detail-copy {
  padding: 12px;
  border: 1px solid rgba(10, 132, 255, .17);
  border-radius: 13px;
  background: #f4fbff;
}

.citizen-request-detail-copy h3 {
  margin: 0 0 5px;
  color: #0a6e9f;
  font-size: .78rem;
}

.citizen-request-detail-copy p {
  margin: 0;
  color: #3e5964;
  font-size: .8rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.citizen-request-detail-copy strong { color: #173022; }

.citizen-request-detail-modal-dismiss {
  min-height: 40px;
  border: 1px solid rgba(10, 132, 255, .30);
  border-radius: 12px;
  background: #edf7ff;
  color: #007aff;
  font: inherit;
  font-size: .8rem;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 1024px) {
  body.public-service-body .request-history-group-complaint .tracking-order-card {
    gap: 10px;
  }

  body.public-service-body .request-history-group-complaint .tracking-order-card > .tracking-order-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 14px;
    border-color: rgba(15, 122, 79, .20);
    border-radius: 15px;
    background: linear-gradient(135deg, #f6fff3, #fff8d5);
  }

  body.public-service-body .request-history-group-complaint .tracking-order-head > div:first-child {
    min-width: 0;
  }

  body.public-service-body .request-history-group-complaint .tracking-order-head .eyebrow {
    min-width: 0;
    color: #087c6a;
    font-size: .68rem;
    line-height: 1.25;
  }

  body.public-service-body .request-history-group-complaint .tracking-order-head .eyebrow .bpw-icon {
    width: 16px;
    min-width: 16px !important;
    height: 16px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ff453a !important;
    --icon-ink: #ff453a;
    --icon-accent: #ff9f0a;
    --icon-detail: #ff6961;
  }

  body.public-service-body .request-history-group-complaint .tracking-order-head h2 {
    margin: 6px 0 5px;
    color: #173022;
    font-size: clamp(1.08rem, 4.4vw, 1.32rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  body.public-service-body .request-history-group-complaint .tracking-order-head p {
    color: #5b7463;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  body.public-service-body .request-history-group-complaint .tracking-status-stack {
    max-width: 104px;
    justify-content: flex-end;
  }

  body.public-service-body .request-history-group-complaint .tracking-status-stack .badge {
    min-height: 28px;
    padding: 6px 9px;
    font-size: .67rem;
    line-height: 1;
    text-align: center;
    white-space: normal;
  }

  body.public-service-body .request-history-group-complaint .tracking-order-card > .tracking-update-panel,
  body.public-service-body .request-history-group-complaint .tracking-order-card > .order-progress,
  body.public-service-body .request-history-group-complaint .tracking-order-card > .tracking-update-details {
    display: none !important;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.public-service-body .request-history-group-complaint :is(.citizen-mobile-request-view, .citizen-mobile-request-toggle) {
    display: inline-flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 12px;
    font: inherit;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-view {
    border: 1px solid rgba(10, 132, 255, .32);
    background: #edf7ff;
    color: #007aff;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-view .bpw-icon {
    color: #007aff !important;
    --icon-ink: #007aff;
    --icon-accent: #5e5ce6;
    --icon-detail: #64d2ff;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-toggle {
    border: 1px solid rgba(15, 122, 79, .28);
    background: #eefaf2;
    color: #087c6a;
  }

  .citizen-mobile-request-caret {
    width: 8px;
    height: 8px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease, margin .18s ease;
  }

  .citizen-mobile-request-toggle[aria-expanded="true"] .citizen-mobile-request-caret {
    margin-top: 4px;
    transform: rotate(225deg);
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-expanded:not([hidden]) {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(15, 122, 79, .16);
    border-radius: 15px;
    background: #fbfef9;
  }

  .citizen-mobile-request-overview {
    display: grid;
    gap: 5px;
  }

  .citizen-mobile-request-overview small,
  .citizen-mobile-request-overview strong,
  .citizen-mobile-request-overview p {
    display: block;
    margin: 0;
  }

  .citizen-mobile-request-overview small {
    color: #607264;
    font-size: .68rem;
    font-weight: 900;
  }

  .citizen-mobile-request-overview strong {
    color: #173022;
    font-size: 1.1rem;
  }

  .citizen-mobile-request-overview p {
    color: #526d5c;
    font-size: .76rem;
    font-weight: 720;
    line-height: 1.45;
  }

  .citizen-mobile-request-expanded .tracking-progress-meter {
    height: 8px;
    margin-top: 1px;
  }

  .citizen-mobile-request-expanded .tracking-latest-note {
    margin-top: 0;
  }

  .citizen-mobile-request-section {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 122, 79, .13);
  }

  .citizen-mobile-request-section h3 {
    margin: 0;
    color: #173022;
    font-size: .8rem;
  }

  .citizen-mobile-request-stages {
    display: grid;
    gap: 7px;
  }

  .citizen-mobile-request-stages article {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    padding: 9px;
    border: 1px solid rgba(15, 122, 79, .13);
    border-radius: 11px;
    background: #fff;
  }

  .citizen-mobile-request-stages article > span {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid rgba(15, 122, 79, .18);
    border-radius: 9px;
    background: #f2f7f2;
    color: #607264;
    font-size: .67rem;
    font-weight: 900;
  }

  .citizen-mobile-request-stages article.done > span,
  .citizen-mobile-request-stages article.active > span {
    border-color: rgba(15, 122, 79, .26);
    background: #087c6a;
    color: #fff;
  }

  .citizen-mobile-request-stages article.active {
    border-color: rgba(255, 159, 10, .30);
    background: #fffdf1;
  }

  .citizen-mobile-request-stages b,
  .citizen-mobile-request-stages small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .citizen-mobile-request-stages b {
    color: #173022;
    font-size: .76rem;
  }

  .citizen-mobile-request-stages small {
    margin-top: 2px;
    color: #607264;
    font-size: .68rem;
    font-weight: 720;
    line-height: 1.35;
  }

  .citizen-mobile-request-expanded .tracking-update-history {
    gap: 8px;
    margin-top: 0;
  }

  .citizen-mobile-request-expanded .tracking-update-history article {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .citizen-mobile-request-expanded .tracking-update-history article > span {
    width: 26px;
    height: 26px;
  }

  .citizen-mobile-request-expanded .tracking-update-history article:not(:last-child)::after {
    top: 34px;
    left: 21px;
  }

  .citizen-mobile-request-view:focus-visible,
  .citizen-mobile-request-toggle:focus-visible,
  .citizen-request-detail-modal-close:focus-visible,
  .citizen-request-detail-modal-dismiss:focus-visible {
    outline: 2px solid #007aff;
    outline-offset: 2px;
  }

  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .tracking-order-card > .tracking-order-head {
    border-color: rgba(97, 230, 195, .20);
    background: linear-gradient(135deg, #132b20, #252414);
  }

  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .tracking-order-head h2,
  html[data-citizen-theme="dark"] .citizen-mobile-request-overview strong,
  html[data-citizen-theme="dark"] .citizen-mobile-request-section h3,
  html[data-citizen-theme="dark"] .citizen-mobile-request-stages b,
  html[data-citizen-theme="dark"] .citizen-request-detail-modal h2,
  html[data-citizen-theme="dark"] .citizen-request-detail-list dd,
  html[data-citizen-theme="dark"] .citizen-request-detail-copy strong {
    color: #f2f2f7;
  }

  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .tracking-order-head p,
  html[data-citizen-theme="dark"] .citizen-mobile-request-overview small,
  html[data-citizen-theme="dark"] .citizen-mobile-request-overview p,
  html[data-citizen-theme="dark"] .citizen-mobile-request-stages small,
  html[data-citizen-theme="dark"] .citizen-request-detail-reference,
  html[data-citizen-theme="dark"] .citizen-request-detail-list dt,
  html[data-citizen-theme="dark"] .citizen-request-detail-copy p {
    color: #b8cbbd;
  }

  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-view {
    border-color: rgba(100, 210, 255, .34);
    background: rgba(10, 132, 255, .16);
    color: #64d2ff;
  }

  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-view .bpw-icon {
    color: #64d2ff !important;
    --icon-ink: #64d2ff;
    --icon-accent: #0a84ff;
    --icon-detail: #c3b8ff;
  }

  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-toggle {
    border-color: rgba(97, 230, 195, .30);
    background: rgba(76, 201, 176, .13);
    color: #61e6c3;
  }

  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-expanded:not([hidden]) {
    border-color: rgba(97, 230, 195, .17);
    background: #11261c;
  }

  html[data-citizen-theme="dark"] .citizen-mobile-request-section {
    border-color: rgba(255, 255, 255, .10);
  }

  html[data-citizen-theme="dark"] .citizen-mobile-request-stages article {
    border-color: rgba(255, 255, 255, .10);
    background: #1c3026;
  }

  html[data-citizen-theme="dark"] .citizen-mobile-request-stages article > span {
    border-color: rgba(255, 255, 255, .12);
    background: #273e32;
    color: #b8cbbd;
  }

  html[data-citizen-theme="dark"] .citizen-mobile-request-stages article.active {
    border-color: rgba(255, 209, 102, .28);
    background: #342f1a;
  }

  html[data-citizen-theme="dark"] .citizen-request-detail-modal {
    border-color: #2f5a43;
    background: #17241f;
    color: #f2f2f7;
  }

  html[data-citizen-theme="dark"] .citizen-request-detail-modal-close {
    border-color: rgba(255, 105, 97, .30);
    background: rgba(255, 69, 58, .14);
    color: #ff9a93;
  }

  html[data-citizen-theme="dark"] .citizen-request-detail-list > div {
    border-color: rgba(255, 255, 255, .10);
    background: #20352b;
  }

  html[data-citizen-theme="dark"] .citizen-request-detail-copy {
    border-color: rgba(100, 210, 255, .18);
    background: #172d36;
  }

  html[data-citizen-theme="dark"] .citizen-request-detail-copy h3 { color: #64d2ff; }

  html[data-citizen-theme="dark"] .citizen-request-detail-modal-dismiss {
    border-color: rgba(100, 210, 255, .30);
    background: rgba(10, 132, 255, .16);
    color: #64d2ff;
  }
}

@media (max-width: 360px) {
  body.public-service-body .request-history-group-complaint .tracking-order-card > .tracking-order-head {
    grid-template-columns: minmax(0, 1fr);
  }

  body.public-service-body .request-history-group-complaint .tracking-status-stack {
    max-width: none;
    justify-content: flex-start;
  }

  .citizen-request-detail-modal-card { padding: 17px; }
  .citizen-request-detail-list > div { grid-template-columns: 1fr; gap: 3px; }
}

/* Final mobile/tablet APK parity layer. This intentionally comes after the
   legacy portal rules so the citizen PWA keeps one reliable layout at every
   phone and tablet width while the desktop website remains unchanged. */
.citizen-mobile-primary-modules { display: none; }

@media (max-width: 1024px) {
  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-modules {
    display: block;
    margin: 0 0 22px;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-modules-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 2px 11px;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-modules-heading > span {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255, 69, 58, .34);
    border-radius: 12px;
    background: rgba(255, 69, 58, .16);
    color: #ff6961;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-modules-heading > span .bpw-icon {
    width: 20px;
    height: 20px;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-modules-heading h2 {
    margin: 0;
    color: #f2f2f7;
    font-size: 1.06rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-grid > a {
    display: grid;
    min-width: 0;
    min-height: 122px;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 10px 7px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    background: #2c2c2e;
    color: #f2f2f7;
    box-shadow: none;
    text-align: center;
    text-decoration: none;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-grid > a.is-active {
    border-color: rgba(10, 132, 255, .62);
    background: linear-gradient(180deg, #2c2c2e, rgba(10, 132, 255, .16));
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 14px;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-icon .bpw-icon {
    width: 24px;
    height: 24px;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-grid .is-service .citizen-mobile-primary-module-icon {
    border-color: rgba(10, 132, 255, .34);
    background: rgba(10, 132, 255, .16);
    color: #64d2ff;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-grid .is-complaint .citizen-mobile-primary-module-icon {
    border-color: rgba(255, 69, 58, .34);
    background: rgba(255, 69, 58, .16);
    color: #ff6961;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-grid .is-history .citizen-mobile-primary-module-icon {
    border-color: rgba(76, 201, 176, .34);
    background: rgba(76, 201, 176, .16);
    color: #61e6c3;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-copy b,
  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-copy small {
    display: block;
    overflow-wrap: anywhere;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-copy b {
    color: inherit;
    font-size: .69rem;
    font-weight: 900;
    line-height: 1.12;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-copy small {
    color: #c7c7cc;
    font-size: .57rem;
    font-weight: 650;
    line-height: 1.22;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-modules.is-home .citizen-mobile-primary-module-copy small {
    display: none;
  }

  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-grid > a:focus-visible {
    outline: 3px solid #0a84ff;
    outline-offset: 2px;
  }

  /* The old grid used grid-column/grid-row:auto after named areas, which
     cancelled the named areas and squeezed the image and links to 38px. */
  .citizen-portal-home-page .citizen-portal-mobile-update-list {
    gap: 12px !important;
  }

  .citizen-portal-home-page .citizen-portal-mobile-update-item {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon copy"
      "links links" !important;
    align-items: start !important;
    gap: 10px 12px !important;
    min-width: 0;
    padding: 14px !important;
  }

  .citizen-portal-home-page .citizen-portal-mobile-update-item.has-image {
    grid-template-areas:
      "icon copy"
      "image image"
      "links links" !important;
  }

  .citizen-portal-home-page .citizen-portal-mobile-news-icon {
    grid-area: icon !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .citizen-portal-home-page .citizen-portal-mobile-update-item > .citizen-portal-mobile-update-copy {
    grid-area: copy !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .citizen-portal-home-page .citizen-portal-mobile-update-item.has-image > .citizen-portal-mobile-update-image {
    position: relative !important;
    display: block !important;
    grid-area: image !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: clamp(118px, 34vw, 150px) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .citizen-portal-home-page .citizen-portal-mobile-update-image img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .citizen-portal-home-page .citizen-portal-mobile-update-links {
    display: flex !important;
    grid-area: links !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
  }

  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-modules-heading h2 {
    color: #1c1c1e;
  }

  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-grid > a {
    border-color: #e5e5ea;
    background: #fff;
    color: #1c1c1e;
    box-shadow: 0 7px 18px rgba(28, 28, 30, .06);
  }

  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-grid > a.is-active {
    border-color: rgba(0, 122, 255, .38);
    background: linear-gradient(180deg, #fff, #edf7ff);
  }

  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-copy small {
    color: #6b6b70;
  }
}

@media (max-width: 360px) {
  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-grid { gap: 7px; }
  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-grid > a { min-height: 116px; padding-right: 5px; padding-left: 5px; border-radius: 19px; }
  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-copy b { font-size: .63rem; }
  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-copy small { font-size: .53rem; }
  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-icon { width: 38px; height: 38px; border-radius: 13px; }
  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-module-icon .bpw-icon { width: 22px; height: 22px; }
}

/* The APK has one combined Service & Document tracker. Give those PWA cards
   the same compact View / Show details behavior without changing desktop. */
@media (max-width: 1024px) {
  body.public-service-body .request-history-group-mobile-tracker .citizen-action-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(15, 122, 79, .18);
    border-radius: 15px;
    background: linear-gradient(135deg, #f6fff3, #fff8d5);
  }

  body.public-service-body .request-history-group-mobile-tracker .citizen-action-card > .citizen-action-icon {
    grid-column: 1;
    grid-row: 1;
  }

  body.public-service-body .request-history-group-mobile-tracker .citizen-action-card > div:not(.citizen-mobile-request-actions):not(.citizen-mobile-request-expanded) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  body.public-service-body .request-history-group-mobile-tracker .citizen-action-card > .badge {
    grid-column: 3;
    grid-row: 1;
    max-width: 104px;
    min-height: 28px;
    padding: 6px 9px;
    font-size: .67rem;
    line-height: 1;
    text-align: center;
    white-space: normal;
  }

  body.public-service-body .request-history-group-mobile-tracker .citizen-action-card > .tracking-update-details {
    display: none !important;
  }

  body.public-service-body .request-history-group-mobile-tracker .citizen-mobile-request-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.public-service-body .request-history-group-mobile-tracker :is(.citizen-mobile-request-view, .citizen-mobile-request-toggle) {
    display: inline-flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 12px;
    font: inherit;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
  }

  body.public-service-body .request-history-group-mobile-tracker .citizen-mobile-request-view {
    border: 1px solid rgba(10, 132, 255, .32);
    background: #edf7ff;
    color: #007aff;
  }

  body.public-service-body .request-history-group-mobile-tracker .citizen-mobile-request-toggle {
    border: 1px solid rgba(15, 122, 79, .28);
    background: #eefaf2;
    color: #087c6a;
  }

  body.public-service-body .request-history-group-mobile-tracker .citizen-mobile-request-expanded:not([hidden]) {
    display: grid;
    grid-column: 1 / -1;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(15, 122, 79, .16);
    border-radius: 15px;
    background: #fbfef9;
  }

  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-mobile-tracker .citizen-action-card {
    border-color: rgba(97, 230, 195, .20);
    background: linear-gradient(135deg, #132b20, #252414);
    color: #f2f2f7;
  }

  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-mobile-tracker .citizen-mobile-request-view {
    border-color: rgba(100, 210, 255, .34);
    background: rgba(10, 132, 255, .16);
    color: #64d2ff;
  }

  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-mobile-tracker .citizen-mobile-request-toggle {
    border-color: rgba(97, 230, 195, .30);
    background: rgba(76, 201, 176, .13);
    color: #61e6c3;
  }

  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-mobile-tracker .citizen-mobile-request-expanded:not([hidden]) {
    border-color: rgba(97, 230, 195, .17);
    background: #11261c;
  }
}

/* Cohesive dark mode for the citizen website and installed PWA.
   Keep this last so a dark preference changes every public surface together,
   instead of leaving the legacy white page and request-group layers behind. */
html[data-citizen-theme="dark"] { color-scheme: dark; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) {
  background:
    radial-gradient(circle at 12% -4%, rgba(37, 139, 89, .20), transparent 32%),
    radial-gradient(circle at 92% 0, rgba(205, 157, 28, .14), transparent 30%),
    #07140e;
  color: #eaf7ed;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .public-service-shell {
  color: inherit;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) {
  border-bottom: 1px solid rgba(129, 222, 165, .15);
  background: rgba(7, 20, 14, .94);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-portal-top .public-brand b { color: #f1faf3; }
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-portal-top .public-brand small { color: #afc9b8; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .public-hero-panel,
  .public-service-card,
  .public-flow-strip article,
  .citizen-portal-feature,
  .citizen-update-list article,
  .citizen-hotline-list a,
  .citizen-action-list article,
  .citizen-report-list article,
  .citizen-announcement-card,
  .citizen-directory-card,
  .citizen-action-card,
  .request-history-group,
  .tracking-order-card,
  .tracking-update-panel,
  .tracking-latest-note,
  .tracking-update-history article,
  .order-progress article,
  .device-request-card,
  .citizen-portal-empty,
  .citizen-feature-detail-modal,
  .citizen-info-modal,
  .citizen-request-detail-modal
) {
  border-color: #294d38;
  background: linear-gradient(145deg, #10271b, #0b1d14);
  color: #eaf7ed;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .26);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .tracking-order-head,
  .order-progress article.done,
  .order-progress article.active
) {
  border-color: #345940;
  background: linear-gradient(135deg, #173524, #2a2917);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-account-panel--danger {
  border-color: #6b4037;
  background: linear-gradient(145deg, #2b1916, #1c1210);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .public-hero-panel,
  .public-service-card,
  .public-flow-strip article,
  .citizen-portal-feature,
  .citizen-update-list article,
  .citizen-hotline-list a,
  .citizen-action-list article,
  .citizen-report-list article,
  .citizen-announcement-card,
  .citizen-directory-card,
  .citizen-action-card,
  .request-history-group,
  .tracking-order-card,
  .tracking-update-panel,
  .tracking-latest-note,
  .tracking-update-history article,
  .order-progress article,
  .device-request-card,
  .citizen-feature-detail-modal,
  .citizen-info-modal,
  .citizen-request-detail-modal
) :is(h1, h2, h3, h4, b, strong) {
  color: #f1f9f3;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .public-hero-panel,
  .public-service-card,
  .public-flow-strip article,
  .citizen-portal-feature,
  .citizen-update-list article,
  .citizen-hotline-list a,
  .citizen-action-list article,
  .citizen-report-list article,
  .citizen-announcement-card,
  .citizen-directory-card,
  .citizen-action-card,
  .request-history-group,
  .tracking-order-card,
  .tracking-update-panel,
  .tracking-latest-note,
  .tracking-update-history article,
  .order-progress article,
  .device-request-card,
  .citizen-feature-detail-modal,
  .citizen-info-modal,
  .citizen-request-detail-modal
) :is(p, small, em, footer) {
  color: #b9cfbf;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .eyebrow.dark,
  .citizen-account-profile-kicker,
  .citizen-account-panel-overline,
  .request-history-group-head p,
  .tracking-latest-note > span
) {
  color: #8ce1ad;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .eyebrow.dark {
  border-color: rgba(125, 227, 166, .18);
  background: rgba(73, 179, 112, .14);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .request-history-group-head > span {
  background: #173b2a;
  color: #76e7b1;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .request-history-group-head > b {
  background: #173523;
  color: #8ee4ad;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
) {
  border-color: #355d45;
  background: #0c1f16;
  color: #effaf2;
  box-shadow: none;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(input, textarea)::placeholder { color: #8fab99; }
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(input, select, textarea):focus {
  border-color: #65d996;
  background: #10291c;
  box-shadow: 0 0 0 4px rgba(101, 217, 150, .14);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(.btn.secondary, .btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger), .citizen-feature-details) {
  border-color: #355d45;
  background: #173323;
  color: #dff8e6;
  box-shadow: none;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(.btn.secondary, .btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger), .citizen-feature-details):hover {
  border-color: #68d898;
  background: #1d402c;
  color: #fff;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-desktop-signout {
  border-color: #7d4439 !important;
  background: #291917 !important;
  box-shadow: none !important;
  color: #ffb4aa !important;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .tracking-progress-meter,
  .citizen-progress
) { background: #254131; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .tracking-latest-note,
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .tracking-update-history article,
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .order-progress article:not(.done):not(.active) {
  background: #11271b;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .tracking-update-details {
  border-color: rgba(145, 225, 173, .22);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .tracking-update-details summary,
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .tracking-latest-note > span { color: #8ee4ad; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .tracking-update-details summary::after {
  border-color: #3b694e;
  background: #183626;
  color: #8ee4ad;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .order-progress article:not(:last-child)::after,
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .tracking-update-history article:not(:last-child)::after {
  background: #3b694e;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(.citizen-feature-detail-modal, .citizen-info-modal, .citizen-request-detail-modal)::backdrop {
  background: rgba(0, 0, 0, .68);
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .table-wrap {
  border-color: #294d38;
  background: #0c1e16;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(table th, .table-wrap thead th) {
  border-color: #294d38;
  background: #173323;
  color: #eaf7ed;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(table td, .table-wrap tbody td) {
  border-color: rgba(149, 220, 174, .12);
  background: #10271b;
  color: #d8ebde;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(.alert, .alert-success) {
  border-color: #315a42;
  background: #153424;
  color: #ddf6e5;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .alert-danger {
  border-color: #774139;
  background: #2a1917;
  color: #ffd3cd;
}

/* The compact PWA uses its own detail sheet.  Hide the legacy disclosure
   wherever it is nested, then give a narrow phone enough room for each title. */
@media (max-width: 1024px) {
  body.public-service-body .request-history-group-mobile-tracker .citizen-action-card .tracking-update-details {
    display: none !important;
  }
}

@media (max-width: 560px) {
  body.public-service-body .request-history-group-mobile-tracker .citizen-action-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  body.public-service-body .request-history-group-mobile-tracker .citizen-action-card > .badge {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    max-width: none;
  }
}

/* Remaining public-information and form support surfaces use legacy white
   backgrounds.  Keep them in the same dark system as the main PWA cards. */
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-account-panel,
  .citizen-feed-post,
  .citizen-directory-grid article,
  .citizen-report-list article,
  .public-consent,
  .public-combo-panel,
  .citizen-access-combo-panel,
  .citizen-scope-results,
  .citizen-info-modal-head
) {
  border-color: #294d38;
  background: #10271b;
  color: #eaf7ed;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-feed-post-head b,
  .citizen-feed-post-body h2,
  .citizen-directory-grid b,
  .citizen-report-list h3
) { color: #f1f9f3; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-feed-post-head small,
  .citizen-feed-post-body p,
  .citizen-feed-post-foot,
  .citizen-directory-grid small,
  .citizen-directory-grid p,
  .public-consent span,
  .citizen-scope-empty,
  .public-combo-empty,
  .citizen-portal-mobile-update-item small,
  .citizen-portal-mobile-update-item em
) { color: #b9cfbf; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-feed-post-category,
  .citizen-directory-grid article > span,
  .citizen-report-list article > span,
  .citizen-publisher-avatar
) {
  border-color: rgba(140, 225, 173, .22);
  background: #173b2a;
  color: #9aeab7;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-feed-post-foot,
  .citizen-portal-mobile-update-item
) { border-color: #294d38; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-feed-post-foot a,
  .citizen-update-official-link,
  .citizen-portal-mobile-update-links a,
  .citizen-email-link,
  .citizen-directory-grid > article > a:last-child
) { color: #8ee4ad; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .public-combo-panel button,
  .citizen-access-combo-panel button,
  .citizen-scope-results button
) {
  border-color: transparent;
  background: transparent;
  color: #eaf7ed;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .public-combo-panel button:hover,
  .public-combo-panel button.active,
  .citizen-access-combo-panel button:hover,
  .citizen-access-combo-panel button.active,
  .citizen-scope-results button:hover
) {
  border-color: #3e7652;
  background: #193926;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .public-photo-field input[type="file"] {
  border-color: #355d45;
  background: #0c1f16;
  color: #dff8e6;
}

/* Desktop citizen navigation: use saturated module-colored icon tiles instead
   of the pale generic icon boxes, without increasing the button size. */
@media (min-width: 768px) {
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav :is(a, button) .bpw-icon {
    display: inline-grid !important;
    place-items: center;
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, .34) !important;
    border-radius: 8px !important;
    color: #fff !important;
    --icon-ink: #fff;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .22) !important;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .menu-home .bpw-icon {
    background: linear-gradient(135deg, #008c68, #36c89a) !important;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .menu-request .bpw-icon {
    background: linear-gradient(135deg, #315fd8, #78a7ff) !important;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .menu-complaint .bpw-icon {
    background: linear-gradient(135deg, #cf433b, #f27b63) !important;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .menu-history .bpw-icon {
    background: linear-gradient(135deg, #087f9f, #43c5d2) !important;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .citizen-desktop-account .bpw-icon {
    background: linear-gradient(135deg, #6844c8, #a882f4) !important;
  }

  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .citizen-desktop-signout .bpw-icon {
    background: linear-gradient(135deg, #c74637, #f4775e) !important;
  }
}

/* Mobile PWA search is one control.  Prevent the general dark input surface
   from painting a second, mismatched rectangle behind the text. */
@media (max-width: 1024px) {
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search label {
    border: 1px solid #355d45;
    background: #13271d;
    color: #64d2ff;
  }

  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input,
  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input:focus {
    border: 0;
    background: transparent !important;
    box-shadow: none;
    color: #effaf2;
  }

  html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search:focus-within label {
    border-color: #64d2ff;
    box-shadow: 0 0 0 3px rgba(100, 210, 255, .16);
    outline: 0;
  }
}

/* Public citizen icons use one colored surface only.  The shared icon helper
   already paints a complete tile, so icon shells must flatten that child
   instead of drawing a second or third bordered tile around it. */
body.public-service-body:not(.mydasma-body) :is(
  .citizen-access-hero-mark,
  .citizen-access-aside-icon,
  .citizen-access-card-icon,
  .citizen-account-panel-icon,
  .citizen-account-avatar,
  .citizen-feature-icon,
  .citizen-hotline-list a > span:first-child,
  .request-history-group-head > span,
  .citizen-directory-grid article > span,
  .citizen-report-list article > span,
  .public-flow-strip .public-flow-portal > span
) {
  border: 0 !important;
  box-shadow: none !important;
}

body.public-service-body:not(.mydasma-body) :is(
  .citizen-access-hero-mark,
  .citizen-access-aside-icon,
  .citizen-access-card-icon,
  .citizen-account-panel-icon,
  .citizen-account-avatar,
  .citizen-feature-icon,
  .citizen-hotline-list a > span:first-child,
  .request-history-group-head > span,
  .citizen-directory-grid article > span,
  .citizen-report-list article > span,
  .public-flow-strip .public-flow-portal > span
) > :is(.bpw-icon, .ico) {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  --icon-ink: currentColor !important;
  --icon-accent: currentColor !important;
  --icon-detail: currentColor !important;
  --icon-wash: transparent !important;
}

@media (max-width: 1024px) {
  /* bims-ui adds a generic heading icon inside h2. This heading already has
     its own colored icon shell, so suppress that duplicate here only. */
  body.public-service-body:not(.mydasma-body) .citizen-mobile-primary-modules-heading h2 .heading-auto-icon {
    display: none !important;
  }

  body.public-service-body:not(.mydasma-body) :is(
    .citizen-mobile-header-theme,
    .citizen-mobile-header-notifications,
    .citizen-portal-mobile-verification > span,
    .citizen-portal-mobile-section-heading > span,
    .citizen-portal-mobile-service-icon,
    .citizen-portal-mobile-card-heading > div > span,
    .citizen-portal-mobile-news-icon,
    .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a > span:first-child,
    .citizen-portal-mobile-guest-icon,
    .citizen-mobile-primary-modules-heading > span,
    .citizen-mobile-primary-module-icon
  ) {
    border: 0 !important;
    box-shadow: none !important;
  }

  body.public-service-body:not(.mydasma-body) :is(
    .citizen-mobile-header-theme,
    .citizen-mobile-header-notifications,
    .citizen-portal-mobile-verification > span,
    .citizen-portal-mobile-section-heading > span,
    .citizen-portal-mobile-service-icon,
    .citizen-portal-mobile-card-heading > div > span,
    .citizen-portal-mobile-news-icon,
    .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a > span:first-child,
    .citizen-portal-mobile-guest-icon,
    .citizen-mobile-primary-modules-heading > span,
    .citizen-mobile-primary-module-icon
  ) :is(.bpw-icon, .ico) {
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    --icon-ink: currentColor !important;
    --icon-accent: currentColor !important;
    --icon-detail: currentColor !important;
    --icon-wash: transparent !important;
  }
}

/* Dark-mode cascade guarantee.  This stays last because the portal has
   several older phone rules below its first dark-theme block. */
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) {
  background: #000 !important;
  color: #f2f2f7;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .public-hero-panel,
  .public-service-card,
  .public-flow-strip article,
  .citizen-portal-feature,
  .citizen-update-list article,
  .citizen-hotline-list a,
  .citizen-action-list article,
  .citizen-report-list article,
  .citizen-announcement-card,
  .citizen-directory-card,
  .citizen-action-card,
  .request-history-group,
  .tracking-order-card,
  .tracking-order-head,
  .tracking-update-panel,
  .tracking-latest-note,
  .tracking-update-history article,
  .order-progress article,
  .device-request-card,
  .citizen-portal-empty,
  .citizen-feature-detail-modal,
  .citizen-info-modal,
  .citizen-request-detail-modal,
  .citizen-account-hero,
  .citizen-account-profile,
  .citizen-account-panel,
  .citizen-feed-post,
  .citizen-directory-grid article,
  .public-consent,
  .public-combo-panel,
  .citizen-access-combo-panel,
  .citizen-scope-results,
  .citizen-info-modal-head
) {
  border-color: #3a3a3c !important;
  background: #1c1c1e !important;
  color: #f2f2f7 !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28) !important;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .tracking-latest-note,
  .tracking-update-history article,
  .order-progress article,
  .citizen-account-panel--verification,
  .citizen-request-detail-list > div,
  .citizen-request-detail-copy,
  .table-wrap
) { background: #2c2c2e !important; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .public-hero-panel,
  .public-service-card,
  .public-flow-strip article,
  .citizen-portal-feature,
  .citizen-update-list article,
  .citizen-hotline-list a,
  .citizen-action-list article,
  .citizen-report-list article,
  .citizen-announcement-card,
  .citizen-directory-card,
  .citizen-action-card,
  .request-history-group,
  .tracking-order-card,
  .tracking-update-panel,
  .tracking-latest-note,
  .tracking-update-history article,
  .order-progress article,
  .device-request-card,
  .citizen-feature-detail-modal,
  .citizen-info-modal,
  .citizen-request-detail-modal,
  .citizen-account-hero,
  .citizen-account-profile,
  .citizen-account-panel,
  .citizen-feed-post,
  .citizen-directory-grid article
) :is(h1, h2, h3, h4, b, strong, dt, dd) { color: #f2f2f7 !important; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .public-hero-panel,
  .public-service-card,
  .public-flow-strip article,
  .citizen-portal-feature,
  .citizen-update-list article,
  .citizen-hotline-list a,
  .citizen-action-list article,
  .citizen-report-list article,
  .citizen-announcement-card,
  .citizen-directory-card,
  .citizen-action-card,
  .request-history-group,
  .tracking-order-card,
  .tracking-update-panel,
  .tracking-latest-note,
  .tracking-update-history article,
  .order-progress article,
  .device-request-card,
  .citizen-feature-detail-modal,
  .citizen-info-modal,
  .citizen-request-detail-modal,
  .citizen-account-hero,
  .citizen-account-profile,
  .citizen-account-panel,
  .citizen-feed-post,
  .citizen-directory-grid article
) :is(p, small, em, footer, .muted) { color: #aeaeb2 !important; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  .public-photo-field input[type="file"]
) {
  border-color: #3a3a3c !important;
  background: #151517 !important;
  color: #f2f2f7 !important;
  box-shadow: none !important;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(input, textarea)::placeholder { color: #8e8e93 !important; }
html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(input, select, textarea):focus {
  border-color: #64d2ff !important;
  background: #1c1c1e !important;
  box-shadow: 0 0 0 3px rgba(100, 210, 255, .18) !important;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .btn.secondary,
  .btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger),
  .citizen-feature-details
) {
  border-color: #3a3a3c !important;
  background: #2c2c2e !important;
  color: #f2f2f7 !important;
  box-shadow: none !important;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-update-official-link,
  .citizen-portal-mobile-update-links a,
  .citizen-email-link,
  .citizen-directory-grid > article > a:last-child,
  .tracking-update-details summary,
  .tracking-latest-note > span
) { color: #64d2ff !important; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .tracking-progress-meter,
  .citizen-progress
) { background: #48484d !important; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .tracking-update-details,
  .citizen-mobile-request-section,
  .citizen-account-profile-note,
  .citizen-request-detail-list > div,
  .citizen-request-detail-copy,
  .table-wrap
) { border-color: #3a3a3c !important; }

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .tracking-update-details summary::after,
  .citizen-mobile-request-stages article > span
) {
  border-color: #48484d !important;
  background: #3a3a3c !important;
  color: #aeaeb2 !important;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) .citizen-account-panel--danger {
  border-color: #703c3c !important;
  background: #281919 !important;
}

@media (max-width: 1024px) {
  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) {
    background: #000 !important;
    color: #f2f2f7;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-portal-top:not(.citizen-portal-top--mobile-app) {
    border-color: #27272a !important;
    background: rgba(0, 0, 0, .94) !important;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search label {
    border-color: #3a3a3c !important;
    background: #2c2c2e !important;
    color: #64d2ff !important;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input,
  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input:focus {
    border: 0 !important;
    background: transparent !important;
    color: #f2f2f7 !important;
    box-shadow: none !important;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-mobile-header-theme,
    .citizen-mobile-header-notifications
  ) { background: #2c2c2e !important; }

  html:not([data-citizen-theme="light"]) .citizen-website-mobile-tabs {
    border-color: #3a3a3c !important;
    background: rgba(28, 28, 30, .98) !important;
  }

  html:not([data-citizen-theme="light"]) .citizen-website-mobile-tabs a.is-active {
    background: #2c2c2e !important;
    box-shadow: inset 0 2px 0 currentColor !important;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-portal-mobile-welcome,
    .citizen-portal-mobile-service-grid a,
    .citizen-portal-mobile-update-item,
    .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a,
    .citizen-portal-mobile-empty,
    .citizen-mobile-primary-module-grid > a,
    .citizen-mobile-request-expanded:not([hidden]),
    .citizen-mobile-request-stages article,
    .request-history-group-mobile-tracker .citizen-action-card,
    .request-history-group-complaint .tracking-order-card > .tracking-order-head
  ) {
    border-color: #3a3a3c !important;
    background: #1c1c1e !important;
    color: #f2f2f7 !important;
    box-shadow: none !important;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-portal-mobile-welcome {
    background: radial-gradient(circle at 92% 7%, rgba(10, 132, 255, .26), transparent 30%), linear-gradient(145deg, #2b2340, #1c1c1e 64%) !important;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-portal-mobile-verification,
    .citizen-portal-mobile-search-empty
  ) {
    border-color: rgba(255, 180, 0, .34) !important;
    background: #302c1f !important;
    color: #fff1c7 !important;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-portal-mobile-service-grid a small,
    .citizen-mobile-primary-module-copy small,
    .citizen-portal-mobile-update-item em,
    .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list em,
    .citizen-mobile-request-overview small,
    .citizen-mobile-request-overview p,
    .citizen-mobile-request-stages small
  ) { color: #aeaeb2 !important; }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-portal-mobile-service-grid a b,
    .citizen-portal-mobile-update-item b,
    .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list b,
    .citizen-mobile-primary-module-copy b,
    .citizen-mobile-request-overview strong,
    .citizen-mobile-request-section h3,
    .citizen-mobile-request-stages b
  ) { color: #f2f2f7 !important; }

  /* Only the icon tile carries a color.  The parent card remains a plain
     surface, eliminating the nested/triple-border treatment on PWA pages. */
  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-mobile-primary-modules-heading > span,
    .citizen-mobile-primary-module-icon,
    .citizen-portal-mobile-service-icon,
    .citizen-portal-mobile-news-icon,
    .citizen-portal-mobile-card-heading > div > span,
    .citizen-portal-mobile-emergency-card .citizen-portal-mobile-update-list > a > span:first-child,
    .citizen-portal-mobile-verification > span
  ) {
    border: 0 !important;
    box-shadow: none !important;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) :is(
    .citizen-mobile-request-view,
    .citizen-request-detail-modal-dismiss
  ) {
    border-color: rgba(100, 210, 255, .46) !important;
    background: rgba(10, 132, 255, .16) !important;
    color: #64d2ff !important;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-request-toggle {
    border-color: rgba(99, 230, 190, .40) !important;
    background: rgba(99, 230, 190, .12) !important;
    color: #63e6be !important;
  }
}

/* Ask MyDasma is a compact PWA assistant.  Its shell is intentionally
   separate from the web portal cards so phone/tablet navigation stays
   consistent with the APK without changing the desktop portal layout. */
.citizen-ask-page .citizen-ask-shell {
  width: min(100%, 1060px);
  padding-bottom: 38px;
}

.citizen-ask-intro,
.citizen-ask-assistant {
  border: 1px solid #d8e7dc;
  border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 34px rgba(16, 66, 44, .10);
}

.citizen-ask-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 4px 0 18px;
  padding: 22px;
}

.citizen-ask-intro-icon,
.citizen-ask-head-icon,
.citizen-ask-message-icon,
.citizen-ask-message-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 15px;
}

.citizen-ask-intro-icon {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(94, 92, 230, .26);
  background: linear-gradient(145deg, #e7e5ff, #e4f6ff);
  color: #5e5ce6;
}

.citizen-ask-intro-icon .bpw-icon,
.citizen-ask-head-icon .bpw-icon,
.citizen-ask-message-icon .bpw-icon {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.citizen-ask-kicker {
  display: block;
  margin-bottom: 3px;
  color: #5e5ce6;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.citizen-ask-intro h1 {
  margin: 0;
  color: #172c22;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  letter-spacing: -.035em;
  line-height: 1.08;
}

.citizen-ask-intro p {
  max-width: 680px;
  margin: 7px 0 0;
  color: #607468;
  line-height: 1.55;
}

.citizen-ask-online {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: #087545;
  font-size: .78rem;
  font-weight: 850;
}

.citizen-ask-online i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30c979;
  box-shadow: 0 0 0 4px rgba(48, 201, 121, .14);
}

.citizen-ask-assistant {
  display: grid;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
  padding: 20px;
}

.citizen-ask-assistant-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.citizen-ask-head-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(10, 132, 255, .28);
  background: #e4f6ff;
  color: #0a84ff;
}

.citizen-ask-head-icon .bpw-icon { width: 21px; height: 21px; }

.citizen-ask-assistant-head h2 {
  margin: 0;
  color: #172c22;
  font-size: 1.08rem;
  line-height: 1.2;
}

.citizen-ask-assistant-head p {
  margin: 3px 0 0;
  color: #67796e;
  font-size: .84rem;
  line-height: 1.45;
}

.citizen-ask-messages {
  display: grid;
  gap: 10px;
  max-height: min(46vh, 430px);
  min-height: 130px;
  overflow: auto;
  padding: 4px 2px;
  scrollbar-gutter: stable;
}

.citizen-ask-message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: min(82%, 620px);
}

.citizen-ask-message.is-user {
  justify-self: end;
  text-align: right;
}

.citizen-ask-message > div {
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid #dce9de;
  border-radius: 16px;
  background: #f5faf6;
}

.citizen-ask-message.is-user > div {
  border-color: rgba(94, 92, 230, .24);
  background: linear-gradient(145deg, #e8e7ff, #f0ecff);
}

.citizen-ask-message b {
  display: block;
  color: #1d3528;
  font-size: .76rem;
}

.citizen-ask-message p {
  margin: 4px 0 0;
  color: #405649;
  font-size: .91rem;
  line-height: 1.52;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.citizen-ask-message-icon,
.citizen-ask-message-avatar {
  width: 32px;
  height: 32px;
  font-size: .64rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.citizen-ask-message-icon {
  border: 1px solid rgba(10, 132, 255, .25);
  background: #e4f6ff;
  color: #0a84ff;
}

.citizen-ask-message-avatar {
  border: 1px solid rgba(94, 92, 230, .26);
  background: #e7e5ff;
  color: #5e5ce6;
}

.citizen-ask-message.is-assistant .citizen-ask-message-avatar {
  border-color: rgba(10, 132, 255, .25);
  background: #e4f6ff;
  color: #0a84ff;
}

.citizen-ask-suggestions {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.citizen-ask-suggestions > span {
  color: #687a70;
  font-size: .76rem;
  font-weight: 800;
}

.citizen-ask-suggestions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.citizen-ask-suggestions button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #c9dfd0;
  border-radius: 999px;
  background: #fff;
  color: #087545;
  font: inherit;
  font-size: .77rem;
  font-weight: 780;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.citizen-ask-suggestions button:hover,
.citizen-ask-suggestions button:focus-visible {
  border-color: rgba(10, 132, 255, .48);
  background: #e8f5ff;
  color: #0a63c8;
}

.citizen-ask-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px;
  padding-top: 4px;
}

.citizen-ask-composer label { min-width: 0; }

.citizen-ask-composer textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: 132px;
  resize: none;
  padding: 13px 14px;
  border: 1px solid #c8dbce;
  border-radius: 16px;
  background: #fff;
  color: #193126;
  font: inherit;
  font-size: .93rem;
  line-height: 1.4;
  box-shadow: none;
}

.citizen-ask-composer textarea::placeholder { color: #76867d; }

.citizen-ask-composer textarea:focus {
  border-color: #0a84ff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .16);
}

.citizen-ask-send {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid #087c6a;
  border-radius: 15px;
  background: #087c6a;
  color: #fff;
  font: inherit;
  font-size: .84rem;
  font-weight: 850;
  cursor: pointer;
}

.citizen-ask-send .bpw-icon {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: currentColor;
}

.citizen-ask-send:hover:not(:disabled),
.citizen-ask-send:focus-visible:not(:disabled) { background: #05634f; }
.citizen-ask-send:disabled { opacity: .62; cursor: wait; }

.citizen-ask-loading {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #607468;
  font-size: .78rem;
}

.citizen-ask-loading span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0a84ff;
  animation: citizen-ask-dot 1s infinite ease-in-out;
}

.citizen-ask-loading span:nth-child(2) { animation-delay: .15s; }
.citizen-ask-loading span:nth-child(3) { animation-delay: .3s; }

@keyframes citizen-ask-dot {
  0%, 100% { transform: translateY(0); opacity: .42; }
  50% { transform: translateY(-3px); opacity: 1; }
}

.citizen-ask-status {
  margin: -5px 0 0;
  color: #62756a;
  font-size: .79rem;
  line-height: 1.45;
}

.citizen-ask-status.is-error { color: #c23830; }

.citizen-ask-disclaimer {
  margin: -1px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e1ebe4;
  color: #718178;
  font-size: .74rem;
  line-height: 1.45;
}

.citizen-ask-disclaimer a { color: #0a63c8; font-weight: 850; }

/* Six PWA destinations fit one row through tablet: Home, Services, News,
   Emergency, Ask AI, Account.  Classes avoid fragile nth-child colors. */
@media (max-width: 1024px) {
  .citizen-website-mobile-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .citizen-website-mobile-tabs a { min-width: 0; font-size: clamp(.5rem, 1.5vw, .61rem); }
  .citizen-website-mobile-tabs .citizen-tab-ask,
  .citizen-website-mobile-tabs .citizen-tab-ask .bpw-icon { color: #5e5ce6 !important; }
  .citizen-website-mobile-tabs .citizen-tab-account,
  .citizen-website-mobile-tabs .citizen-tab-account .bpw-icon { color: #087c6a !important; }

  .citizen-ask-page .citizen-ask-shell {
    width: 100%;
    max-width: 760px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .citizen-ask-intro,
  .citizen-ask-assistant { border-radius: 20px; }

  .citizen-ask-intro {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    margin-top: 0;
    padding: 17px;
  }

  .citizen-ask-intro-icon { width: 43px; height: 43px; }
  .citizen-ask-intro h1 { font-size: clamp(1.38rem, 5vw, 1.8rem); }
  .citizen-ask-intro p { font-size: .89rem; }
  .citizen-ask-online { grid-column: 1 / -1; justify-self: start; margin-left: 55px; }
  .citizen-ask-assistant { gap: 14px; padding: 16px; }
  .citizen-ask-messages { max-height: 42vh; min-height: 110px; }
  .citizen-ask-message { max-width: 92%; }
}

@media (max-width: 430px) {
  .citizen-website-mobile-tabs { padding-right: max(7px, env(safe-area-inset-right)); padding-left: max(7px, env(safe-area-inset-left)); }
  .citizen-website-mobile-tabs a { min-height: 58px; padding-right: 0; padding-left: 0; font-size: .5rem; }
  .citizen-website-mobile-tabs .bpw-icon { width: 22px; height: 22px; }
  .citizen-ask-intro { padding: 15px; }
  .citizen-ask-online { margin-left: 0; }
  .citizen-ask-suggestions > div { display: grid; grid-template-columns: 1fr; }
  .citizen-ask-suggestions button { width: 100%; min-height: 34px; }
  .citizen-ask-composer { grid-template-columns: 1fr; }
  .citizen-ask-send { width: 100%; }
  .citizen-ask-send span { display: inline; }
}

html[data-citizen-theme="dark"] .citizen-ask-intro,
html[data-citizen-theme="dark"] .citizen-ask-assistant {
  border-color: #3a3a3c !important;
  background: #1c1c1e !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28) !important;
}

html[data-citizen-theme="dark"] .citizen-ask-intro h1,
html[data-citizen-theme="dark"] .citizen-ask-assistant-head h2,
html[data-citizen-theme="dark"] .citizen-ask-message b { color: #f2f2f7 !important; }

html[data-citizen-theme="dark"] :is(
  .citizen-ask-intro p,
  .citizen-ask-assistant-head p,
  .citizen-ask-message p,
  .citizen-ask-suggestions > span,
  .citizen-ask-loading,
  .citizen-ask-status,
  .citizen-ask-disclaimer
) { color: #aeaeb2 !important; }

html[data-citizen-theme="dark"] .citizen-ask-message > div {
  border-color: #3a3a3c;
  background: #2c2c2e;
}

html[data-citizen-theme="dark"] .citizen-ask-message.is-user > div {
  border-color: rgba(191, 190, 255, .36);
  background: #29253d;
}

html[data-citizen-theme="dark"] .citizen-ask-suggestions button {
  border-color: #3a3a3c;
  background: #2c2c2e;
  color: #63e6be;
}

html[data-citizen-theme="dark"] .citizen-ask-suggestions button:hover,
html[data-citizen-theme="dark"] .citizen-ask-suggestions button:focus-visible {
  border-color: rgba(100, 210, 255, .55);
  background: #1d2b3a;
  color: #64d2ff;
}

html[data-citizen-theme="dark"] .citizen-ask-composer textarea {
  border-color: #3a3a3c;
  background: #151517;
  color: #f2f2f7;
}

html[data-citizen-theme="dark"] .citizen-ask-composer textarea::placeholder { color: #8e8e93; }
html[data-citizen-theme="dark"] .citizen-ask-disclaimer { border-color: #3a3a3c; }
html[data-citizen-theme="dark"] .citizen-ask-disclaimer a { color: #64d2ff; }
html[data-citizen-theme="dark"] .citizen-website-mobile-tabs .citizen-tab-account,
html[data-citizen-theme="dark"] .citizen-website-mobile-tabs .citizen-tab-account .bpw-icon { color: #63e6be !important; }

/* Phone/tablet starts dark by default.  Mirror the explicit dark palette
   even before JavaScript writes data-citizen-theme to the document. */
@media (max-width: 1024px) {
  html:not([data-citizen-theme="light"]) .citizen-ask-intro,
  html:not([data-citizen-theme="light"]) .citizen-ask-assistant {
    border-color: #3a3a3c !important;
    background: #1c1c1e !important;
    box-shadow: none !important;
  }
  html:not([data-citizen-theme="light"]) .citizen-ask-intro h1,
  html:not([data-citizen-theme="light"]) .citizen-ask-assistant-head h2,
  html:not([data-citizen-theme="light"]) .citizen-ask-message b { color: #f2f2f7 !important; }
  html:not([data-citizen-theme="light"]) :is(
    .citizen-ask-intro p,
    .citizen-ask-assistant-head p,
    .citizen-ask-message p,
    .citizen-ask-suggestions > span,
    .citizen-ask-loading,
    .citizen-ask-status,
    .citizen-ask-disclaimer
  ) { color: #aeaeb2 !important; }
  html:not([data-citizen-theme="light"]) .citizen-ask-message > div { border-color: #3a3a3c; background: #2c2c2e; }
  html:not([data-citizen-theme="light"]) .citizen-ask-message.is-user > div { border-color: rgba(191, 190, 255, .36); background: #29253d; }
  html:not([data-citizen-theme="light"]) .citizen-ask-suggestions button { border-color: #3a3a3c; background: #2c2c2e; color: #63e6be; }
  html:not([data-citizen-theme="light"]) .citizen-ask-composer textarea { border-color: #3a3a3c; background: #151517; color: #f2f2f7; }
  html:not([data-citizen-theme="light"]) .citizen-ask-composer textarea::placeholder { color: #8e8e93; }
  html:not([data-citizen-theme="light"]) .citizen-ask-disclaimer { border-color: #3a3a3c; }
  html:not([data-citizen-theme="light"]) .citizen-ask-disclaimer a { color: #64d2ff; }
  html:not([data-citizen-theme="light"]) .citizen-website-mobile-tabs .citizen-tab-account,
  html:not([data-citizen-theme="light"]) .citizen-website-mobile-tabs .citizen-tab-account .bpw-icon { color: #63e6be !important; }
}

/* Notification bell and result popover.  This is shared by the website header
   on desktop/tablet, the phone header, and the MyDasma browser shell. */
.citizen-notification-shell { position: relative; flex: 0 0 auto; }
.citizen-notification-toggle {
  position: relative;
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(173, 120, 0, .30);
  border-radius: 12px;
  background: #fff8da;
  box-shadow: 0 7px 16px rgba(6, 54, 35, .07);
  color: #ad7800;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.citizen-notification-toggle:hover,
.citizen-notification-toggle[aria-expanded="true"] { background: #fff1b5; box-shadow: 0 10px 20px rgba(128, 88, 0, .14); transform: translateY(-1px); }
.citizen-notification-toggle:focus-visible { outline: 3px solid rgba(10, 132, 255, .52); outline-offset: 2px; }
.citizen-notification-toggle .bpw-icon { width: 21px; height: 21px; }
.citizen-notification-toggle.citizen-mobile-header-notifications::after { display: none !important; }
.citizen-notification-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ff453a;
  box-sizing: border-box;
  color: #fff;
  font-size: .56rem;
  font-weight: 950;
  line-height: 1;
}
.citizen-notification-popover {
  position: absolute;
  z-index: 140;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: min(410px, calc(100vw - 28px));
  max-height: min(600px, 70vh);
  overflow: hidden;
  border: 1px solid #d5e6d9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(6, 54, 35, .22);
  color: #173a2a;
}
.citizen-notification-popover[hidden] { display: none !important; }
.citizen-notification-popover-head {
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 12px 13px 11px;
  border-bottom: 1px solid #e4eee6;
  background: linear-gradient(135deg, #fbfff8, #fff9df);
}
.citizen-notification-popover-head > span {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border-radius: 10px;
  background: #fff1ba;
  color: #ad7800;
}
.citizen-notification-popover-head .bpw-icon { width: 19px; height: 19px; }
.citizen-notification-popover-head div { display: grid; min-width: 0; gap: 1px; }
.citizen-notification-popover-head b { color: #173a2a; font-size: .86rem; line-height: 1.2; }
.citizen-notification-popover-head small { color: #61786c; font-size: .66rem; font-weight: 700; line-height: 1.35; }
.citizen-notification-list { display: grid; min-height: 76px; max-height: min(500px, 59vh); overflow-y: auto; padding: 7px; gap: 5px; overscroll-behavior: contain; }
.citizen-notification-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.citizen-notification-item:hover,
.citizen-notification-item:focus-visible { border-color: #b9dcca; background: #f2fbf4; color: #123724; outline: none; transform: translateY(-1px); }
.citizen-notification-item.is-unread { border-color: #d8ebdf; background: #f7fcf7; }
.citizen-notification-item-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #e6f6ed;
  color: #087c6a;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
}
.citizen-notification-item.is-complaint .citizen-notification-item-icon { background: #ffe8e4; color: #d04435; }
.citizen-notification-item.is-service .citizen-notification-item-icon { background: #e6f0ff; color: #2d63d6; }
.citizen-notification-item.is-announcement .citizen-notification-item-icon { background: #fff2c9; color: #aa7700; }
.citizen-notification-item.is-emergency .citizen-notification-item-icon { background: #ffe7e5; color: #d7382c; }
.citizen-notification-item-copy { display: grid; min-width: 0; gap: 2px; }
.citizen-notification-item-copy small { color: #698076; font-size: .61rem; font-weight: 900; letter-spacing: .025em; line-height: 1.3; }
.citizen-notification-item-copy b { overflow: hidden; color: #173a2a; font-size: .75rem; font-weight: 900; line-height: 1.28; text-overflow: ellipsis; white-space: nowrap; }
.citizen-notification-item-copy p { display: -webkit-box; overflow: hidden; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #506b5d; font-size: .68rem; font-weight: 650; line-height: 1.35; }
.citizen-notification-item-copy time { color: #7b8e84; font-size: .6rem; font-weight: 750; line-height: 1.3; }
.citizen-notification-empty,
.citizen-notification-loading { margin: 0; padding: 17px 12px; color: #61786c; font-size: .72rem; font-weight: 700; line-height: 1.45; text-align: center; }
.citizen-notification-empty.is-error { color: #b5473a; }
.citizen-notification-sign-in { display: block; margin: 2px 3px 4px; padding: 10px 11px; border-radius: 11px; background: #edf7ff; color: #007aff; font-size: .69rem; font-weight: 850; line-height: 1.35; text-align: center; text-decoration: none; }
.citizen-notification-sign-in:hover,
.citizen-notification-sign-in:focus-visible { background: #dcedff; color: #005ec4; outline: 2px solid rgba(0, 122, 255, .34); outline-offset: 2px; }
.is-notification-target { scroll-margin-top: 24px; animation: citizen-notification-flash 2.4s ease both; }
@keyframes citizen-notification-flash {
  0%, 35% { outline: 3px solid rgba(10, 132, 255, .76); outline-offset: 5px; }
  100% { outline: 3px solid transparent; outline-offset: 7px; }
}

/* Desktop navigation keeps the bell aligned with its compact action pills. */
@media (min-width: 768px) {
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .citizen-notification-shell { display: inline-grid; }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .citizen-notification-toggle { width: 37px; height: 37px; }
  .citizen-portal-top:not(.citizen-portal-top--mobile-app) .citizen-desktop-nav .citizen-notification-toggle .bpw-icon { width: 19px; height: 19px; }
}

/* Phone and tablet popovers stay inside the viewport instead of being clipped
   by the compact search header. */
@media (max-width: 1024px) {
  .citizen-notification-shell--mobile { position: static; }
  .citizen-notification-shell--mobile .citizen-notification-toggle { width: 48px; height: 48px; flex: 0 0 48px; }
  .citizen-notification-shell--mobile .citizen-notification-popover {
    position: fixed;
    top: max(70px, calc(env(safe-area-inset-top) + 58px));
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100dvh - 146px);
  }
  .citizen-notification-shell--mobile .citizen-notification-list { max-height: calc(100dvh - 228px); }
  .citizen-notification-shell--app .citizen-notification-popover {
    position: fixed;
    top: max(60px, calc(env(safe-area-inset-top) + 50px));
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100dvh - 92px);
  }
}

html[data-citizen-theme="dark"] .citizen-notification-toggle { border-color: #5d4820; background: #382f12; box-shadow: none; color: #ffd166; }
html[data-citizen-theme="dark"] .citizen-notification-toggle:hover,
html[data-citizen-theme="dark"] .citizen-notification-toggle[aria-expanded="true"] { background: #4a3b14; }
html[data-citizen-theme="dark"] .citizen-notification-badge { border-color: #1c1c1e; }
html[data-citizen-theme="dark"] .citizen-notification-popover { border-color: #3a3a3c; background: #1c1c1e; box-shadow: 0 24px 54px rgba(0, 0, 0, .52); color: #f2f2f7; }
html[data-citizen-theme="dark"] .citizen-notification-popover-head { border-color: #3a3a3c; background: #2c2c2e; }
html[data-citizen-theme="dark"] .citizen-notification-popover-head > span { background: rgba(255, 180, 0, .16); color: #ffb400; }
html[data-citizen-theme="dark"] .citizen-notification-popover-head b,
html[data-citizen-theme="dark"] .citizen-notification-item-copy b { color: #f2f2f7; }
html[data-citizen-theme="dark"] .citizen-notification-popover-head small,
html[data-citizen-theme="dark"] .citizen-notification-item-copy small,
html[data-citizen-theme="dark"] .citizen-notification-item-copy p,
html[data-citizen-theme="dark"] .citizen-notification-item-copy time,
html[data-citizen-theme="dark"] .citizen-notification-empty,
html[data-citizen-theme="dark"] .citizen-notification-loading { color: #aeaeb2; }
html[data-citizen-theme="dark"] .citizen-notification-item:hover,
html[data-citizen-theme="dark"] .citizen-notification-item:focus-visible { border-color: #4d8070; background: #273a31; color: #fff; }
html[data-citizen-theme="dark"] .citizen-notification-item.is-unread { border-color: #344d41; background: #222a26; }
html[data-citizen-theme="dark"] .citizen-notification-item.is-complaint .citizen-notification-item-icon { background: rgba(255, 105, 97, .18); color: #ff8a7f; }
html[data-citizen-theme="dark"] .citizen-notification-item.is-service .citizen-notification-item-icon { background: rgba(10, 132, 255, .18); color: #64d2ff; }
html[data-citizen-theme="dark"] .citizen-notification-item.is-announcement .citizen-notification-item-icon { background: rgba(255, 180, 0, .16); color: #ffb400; }
html[data-citizen-theme="dark"] .citizen-notification-item.is-emergency .citizen-notification-item-icon { background: rgba(255, 69, 58, .18); color: #ff6961; }
html[data-citizen-theme="dark"] .citizen-notification-sign-in { background: rgba(10, 132, 255, .16); color: #64d2ff; }

@media (max-width: 1024px) {
  /* The search label and its native input are visually one control.  Browser
     autofill/default input paint must use the exact same surface, otherwise a
     second green/black rectangle appears behind the search text. */
  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search label {
    --citizen-mobile-search-surface: #2c2c2e;
    overflow: hidden;
    background: var(--citizen-mobile-search-surface) !important;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input,
  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input:focus,
  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input:-webkit-autofill,
  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input:-webkit-autofill:hover,
  html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input:-webkit-autofill:focus {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: var(--citizen-mobile-search-surface) !important;
    background-color: var(--citizen-mobile-search-surface) !important;
    box-shadow: 0 0 0 1000px var(--citizen-mobile-search-surface) inset !important;
    -webkit-box-shadow: 0 0 0 1000px var(--citizen-mobile-search-surface) inset !important;
    color: #f2f2f7 !important;
    -webkit-text-fill-color: #f2f2f7;
  }

  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search label {
    --citizen-mobile-search-surface: #e5e5ea;
    overflow: hidden;
    background: var(--citizen-mobile-search-surface) !important;
  }

  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input:focus,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input:-webkit-autofill,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input:-webkit-autofill:hover,
  html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) .citizen-mobile-header-search input:-webkit-autofill:focus {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: var(--citizen-mobile-search-surface) !important;
    background-color: var(--citizen-mobile-search-surface) !important;
    box-shadow: 0 0 0 1000px var(--citizen-mobile-search-surface) inset !important;
    -webkit-box-shadow: 0 0 0 1000px var(--citizen-mobile-search-surface) inset !important;
    color: #1c1c1e !important;
    -webkit-text-fill-color: #1c1c1e;
  }

  html:not([data-citizen-theme="light"]) .citizen-notification-toggle { border-color: #3a3a3c !important; background: #2c2c2e !important; box-shadow: none !important; color: #ffb400; }
  html:not([data-citizen-theme="light"]) .citizen-notification-badge { border-color: #000; }
  html:not([data-citizen-theme="light"]) .citizen-notification-popover { border-color: #3a3a3c; background: #1c1c1e; color: #f2f2f7; box-shadow: 0 24px 54px rgba(0, 0, 0, .52); }
  html:not([data-citizen-theme="light"]) .citizen-notification-popover-head { border-color: #3a3a3c; background: #2c2c2e; }
  html:not([data-citizen-theme="light"]) .citizen-notification-popover-head b,
  html:not([data-citizen-theme="light"]) .citizen-notification-item-copy b { color: #f2f2f7; }
  html:not([data-citizen-theme="light"]) .citizen-notification-popover-head small,
  html:not([data-citizen-theme="light"]) .citizen-notification-item-copy small,
  html:not([data-citizen-theme="light"]) .citizen-notification-item-copy p,
  html:not([data-citizen-theme="light"]) .citizen-notification-item-copy time,
  html:not([data-citizen-theme="light"]) .citizen-notification-empty,
  html:not([data-citizen-theme="light"]) .citizen-notification-loading { color: #aeaeb2; }
  html:not([data-citizen-theme="light"]) .citizen-notification-item.is-unread { border-color: #344d41; background: #222a26; }
  html:not([data-citizen-theme="light"]) .citizen-notification-sign-in { background: rgba(10, 132, 255, .16); color: #64d2ff; }
}

/* Request-history progress must keep the stage copy beside every numbered
   marker. Older generic mobile rules can shrink an unclassified child div,
   which left the first four steps looking blank on some phone/tablet widths. */
@media (max-width: 1024px) {
  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages {
    display: grid !important;
    gap: 0 !important;
    padding: 2px 0 0 !important;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article {
    position: relative;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: start;
    gap: 10px;
    min-width: 0;
    min-height: 56px;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 40px;
    bottom: -2px;
    left: 21px;
    width: 3px;
    border-radius: 3px;
    background: #d8e7dc;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.done:not(:last-child)::after,
  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.active:not(:last-child)::after {
    background: #087c6a;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article > span {
    position: relative;
    z-index: 1;
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    padding: 0;
    border-radius: 50% !important;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stage-copy {
    display: grid !important;
    align-content: start;
    gap: 3px;
    min-width: 0 !important;
    min-height: 44px;
    padding: 7px 10px;
    border: 1px solid rgba(15, 122, 79, .13);
    border-radius: 11px;
    background: #fff;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.done .citizen-mobile-request-stage-copy {
    background: #f2fbf5;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.active .citizen-mobile-request-stage-copy {
    border-color: rgba(255, 159, 10, .34);
    background: #fffdf1;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stage-copy > b,
  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stage-copy > small {
    display: block !important;
    min-width: 0;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-wrap: anywhere;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stage-copy > b {
    color: #173022;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1.28;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-stage-copy > small {
    margin: 0;
    color: #607264;
    font-size: .68rem;
    font-weight: 720;
    line-height: 1.36;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article:not(:last-child)::after,
  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article:not(:last-child)::after {
    background: #48484d;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.done:not(:last-child)::after,
  html:not([data-citizen-theme="light"]) body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.active:not(:last-child)::after,
  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.done:not(:last-child)::after,
  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.active:not(:last-child)::after {
    background: #63e6be;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body .request-history-group-complaint .citizen-mobile-request-stage-copy,
  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-stage-copy {
    border-color: #3a3a3c;
    background: #1c1c1e;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.done .citizen-mobile-request-stage-copy,
  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.done .citizen-mobile-request-stage-copy {
    background: #1c2f26;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.active .citizen-mobile-request-stage-copy,
  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-stages > article.active .citizen-mobile-request-stage-copy {
    border-color: rgba(255, 209, 102, .34);
    background: #342f1a;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body .request-history-group-complaint .citizen-mobile-request-stage-copy > b,
  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-stage-copy > b {
    color: #f2f2f7 !important;
  }

  html:not([data-citizen-theme="light"]) body.public-service-body .request-history-group-complaint .citizen-mobile-request-stage-copy > small,
  html[data-citizen-theme="dark"] body.public-service-body .request-history-group-complaint .citizen-mobile-request-stage-copy > small {
    color: #aeaeb2 !important;
  }

  /* Keep each history rail continuous.  The older fixed-height connector was
     calculated before the event card's actual content height, so a long or
     short event could leave a visible break before the following marker. */
  body.public-service-body .request-history-group-complaint .citizen-mobile-request-expanded .tracking-update-history {
    --citizen-history-event-gap: 8px;
    --citizen-history-marker-inset: 9px;
    --citizen-history-marker-size: 26px;
    gap: var(--citizen-history-event-gap) !important;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-expanded .tracking-update-history article {
    overflow: visible !important;
  }

  body.public-service-body .request-history-group-complaint .citizen-mobile-request-expanded .tracking-update-history article:not(:last-child)::after {
    top: calc(var(--citizen-history-marker-inset) + var(--citizen-history-marker-size) - 1px) !important;
    bottom: calc(-1 * (var(--citizen-history-event-gap) + var(--citizen-history-marker-inset))) !important;
    left: calc(var(--citizen-history-marker-inset) + 12px) !important;
    width: 2px !important;
    height: auto !important;
  }
}