:root {
color-scheme: light;
--ink: #073b4a;
--teal: #005d6c;
--emerald: #008767;
--muted: #516a77;
--border: #dde7ec;
--page: #f4f7f9;
--mint: #e2f5ee;
font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--page);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; font-size: 16px; line-height: 1.6; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
img { max-width: 100%; }
svg { width: 24px; height: 24px; flex-shrink: 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.22; letter-spacing: -.035em; }
h1 { margin-bottom: 14px; font-size: clamp(32px, 3.5vw, 44px); font-weight: 800; }
h2 { font-size: 23px; margin-bottom: 12px; }
h3 { font-size: 20px; margin-bottom: 10px; }
p { margin-bottom: 16px; }
:focus-visible { outline: 3px solid #007a60; outline-offset: 4px; }
.compact-footer :focus-visible { outline-color: #b6f8df; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 100; padding: 12px 20px; background: white; border: 2px solid var(--teal); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-header { background: #fff; border-bottom: 1px solid var(--border); }
.header-inner, .footer-inner { max-width: 1280px; margin: 0 auto; padding: 22px 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { object-fit: contain; }
.brand > picture { display: contents; }
.brand strong { font-weight: 800; font-size: 19px; display: block; line-height: 1.3; letter-spacing: -.02em; }
.brand small { display: block; font-size: 10px; letter-spacing: .13em; font-weight: 600; margin-top: 4px; color: var(--muted); }
.main-navigation { display: flex; align-items: center; gap: 27px; }
.main-navigation > a { color: var(--ink); font-size: 14px; font-weight: 650; padding: 13px 0; border-bottom: 3px solid transparent; }
.main-navigation > a[aria-current="page"]:not(.login-link) { border-bottom-color: var(--emerald); }
.main-navigation .login-link { padding: 11px 22px; margin-left: 9px; color: white; border-bottom: 0; }
.menu-toggle { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid transparent; border-radius: 9px; padding: 12px 20px; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; }
.button:hover { text-decoration: none; }
.button svg { width: 20px; height: 20px; }
.button-teal { background: var(--teal); color: white; }
.button-teal:hover { background: #004b57; }
.button-emerald { background: var(--emerald); color: #fff; }
.button-emerald:hover { background: #006e55; }
.button-outline { color: var(--teal); border-color: #68b4a7; background: #fff; }
.button-outline:hover { background: #edf9f4; }
.home-main, .page-main { width: min(1280px, 100%); padding: 36px 32px 44px; margin: 0 auto; flex: 1; }
.home-main { padding-top: 28px; }
.welcome-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 455px; border-radius: 20px; background: #e8eff2; display: flex; align-items: center; }
.welcome-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 67% center; z-index: -2; }
.welcome-hero > picture { display: contents; }
.welcome-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f7fafb 0%, rgba(247,250,251,.97) 22%, rgba(247,250,251,.88) 38%, rgba(247,250,251,.25) 63%, transparent 76%); z-index: -1; }
.hero-copy { width: 57%; padding: 55px 44px; }
.eyebrow { color: var(--emerald); font-weight: 800; letter-spacing: .17em; font-size: 12px; margin-bottom: 16px; }
.hero-copy h1 { font-size: clamp(38px, 4.4vw, 61px); letter-spacing: -.055em; line-height: 1.08; margin-bottom: 23px; }
.hero-description { max-width: 425px; font-size: 19px; line-height: 1.6; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.hero-actions .button { padding: 15px 19px; }
.shortcut-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.shortcut-card, .card, .service-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 4px 14px rgba(7,59,74,.025); }
.shortcut-card { position: relative; padding: 24px 60px 22px 24px; color: var(--ink); }
.shortcut-card:hover { text-decoration: none; border-color: #8cc7b8; }
.shortcut-card h2 { font-size: 19px; margin: 15px 0 8px; }
.shortcut-card p { color: var(--muted); font-size: 14px; margin-bottom: 0; }
.icon-box { width: 51px; height: 51px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; flex-shrink: 0; }
.icon-box svg { width: 28px; height: 28px; }
.mint { color: var(--emerald); background: var(--mint); }
.blue { color: #0075bc; background: #e4f3fe; }
.peach { color: #b5520b; background: #fff0e2; }
.circle-arrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--teal); background: #e8f6f2; position: absolute; right: 19px; bottom: 43px; }
.circle-arrow svg { width: 18px; height: 18px; }
.emergency-strip { display: flex; align-items: center; gap: 21px; background: #e3f5ee; padding: 22px 26px; border-radius: 13px; margin-top: 23px; }
.emergency-strip h2 { font-size: 19px; margin-bottom: 4px; }
.emergency-strip p { color: #355b66; font-size: 14px; margin-bottom: 0; }
.emergency-strip .icon-box { background: #bfead9; }
.emergency-strip .button { margin-left: auto; flex-shrink: 0; }
.compact-footer { background: var(--teal); color: white; margin-top: auto; }
.footer-inner { padding-top: 27px; padding-bottom: 22px; gap: 26px; }
.footer-brand { color: #fff; }
.footer-brand strong { font-size: 15px; }
.footer-brand small { color: #ddedf0; font-size: 10px; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 23px; }
.footer-inner nav a { color: #fff; font-size: 13px; }
.footer-inner > p { font-size: 12px; line-height: 1.7; color: #e0eff0; margin: 0; }
.footer-bottom { max-width: 1216px; margin: 0 auto; padding: 11px 0 16px; border-top: 1px solid #40818c; font-size: 12px; color: #d5e8eb; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin-bottom: 28px; }
.page-heading .eyebrow { margin-bottom: 10px; }
.page-heading p:not(.eyebrow), .section-heading p, .muted { color: var(--muted); }
.page-heading p:last-child { margin-bottom: 0; }
.search-form { display: flex; position: relative; align-items: center; gap: 8px; max-width: 425px; width: 100%; }
.search-form > span { position: absolute; left: 14px; top: 14px; color: var(--muted); }
.search-form input { padding-left: 44px; min-width: 0; flex: 1; }
.search-form .button { flex-shrink: 0; }
input, textarea, select { width: 100%; min-width: 0; min-height: 48px; color: var(--ink); background: #fff; border: 1px solid #c7d9e1; border-radius: 8px; padding: 12px 14px; font-size: 15px; }
input::placeholder, textarea::placeholder { color: #657d8a; }
textarea { resize: vertical; }
label { display: block; margin-bottom: 8px; font-weight: 650; font-size: 14px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 19px; }
.filter-row a { border: 1px solid var(--border); background: #eaf0f3; color: var(--ink); border-radius: 30px; font-size: 14px; font-weight: 650; padding: 8px 19px; }
.filter-row a[aria-current="true"] { background: var(--emerald); border-color: var(--emerald); color: white; }
.announcement-list { display: grid; gap: 16px; }
.announcement-card { display: flex; gap: 23px; padding: 20px; color: var(--ink); align-items: center; background: white; border: 1px solid var(--border); border-radius: 13px; }
.announcement-card:hover { text-decoration: none; border-color: #9bc8be; }
.announcement-thumbnail { width: 155px; height: 125px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.announcement-placeholder { width: 80px; height: 95px; display: grid; place-items: center; background: #e9f7f2; color: var(--emerald); border-radius: 10px; flex-shrink: 0; }
.announcement-placeholder svg { width: 35px; height: 35px; }
.announcement-copy { flex: 1; min-width: 0; }
.announcement-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 11px; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 6px; background: #e4f4ef; color: #006850; font-size: 12px; font-weight: 700; }
.badge.advisories { color: #755500; background: #fff1cb; }
.badge.events { color: #005e98; background: #e4f3fe; }
.announcement-meta time { color: var(--muted); font-size: 13px; }
.announcement-copy h2 { font-size: 21px; margin-bottom: 8px; }
.announcement-copy p { color: var(--muted); margin: 0; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.announcement-card > svg { width: 21px; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 28px; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 7px; background: white; font-size: 14px; font-weight: 650; }
.pagination a[aria-current="page"] { background: var(--teal); color: #fff; border-color: var(--teal); }
.pagination span[aria-disabled="true"] { color: #61737d; background: #edf1f4; }
.empty-state { width: 100%; padding: 38px 24px; border: 1px dashed #bfd2db; border-radius: 14px; background: #fff; text-align: center; color: var(--muted); grid-column: 1/-1; }
.empty-state h2 { color: var(--ink); }
.empty-state p:last-child { margin-bottom: 0; }
.detail-article { max-width: 860px; margin: 22px auto 0; padding: 34px; }
.detail-image { width: 100%; max-height: 430px; object-fit: contain; border-radius: 10px; margin-bottom: 25px; background: #f4f7f9; }
.detail-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; }
.detail-facts { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); padding: 15px 0; border-block: 1px solid var(--border); margin-top: 24px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 14px; }
.text-link svg { width: 17px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card { padding: 28px; display: flex; flex-direction: column; }
.service-card h2 { margin: 21px 0 12px; font-size: 22px; }
.service-card p { color: var(--muted); font-size: 15px; }
.service-card .text-link { margin-top: auto; border: 0; padding: 8px 0; background: none; color: var(--emerald); align-self: flex-start; min-height: 44px; }
.help-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #e6f4ef; padding: 25px; border-radius: 13px; margin-top: 27px; }
.help-strip h2 { font-size: 20px; margin-bottom: 7px; }
.help-strip p { margin: 0; color: var(--muted); font-size: 15px; }
.purpose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.purpose-card { display: flex; align-items: flex-start; gap: 20px; padding: 27px; }
.purpose-card > div { min-width: 0; flex: 1; }
.purpose-card p { color: var(--muted); font-size: 15px; white-space: pre-line; margin-bottom: 0; }
.information-card { margin-top: 22px; padding: 27px; }
.information-card ul { padding-left: 23px; color: var(--muted); margin-bottom: 0; }
.information-card li + li { margin-top: 9px; }
.directory-section { margin-top: 38px; }
.section-heading { margin-bottom: 20px; }
.section-heading h2 { font-size: 28px; margin-bottom: 8px; }
.section-heading p { margin-bottom: 0; }
.portrait-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.portrait-card { min-width: 0; overflow: hidden; }
.portrait-image { width: 100%; height: 245px; object-fit: cover; object-position: center 25%; display: block; background: #e3edee; }
.portrait-fallback { display: grid; place-items: center; height: 190px; background: #e3edee; color: var(--teal); font-weight: 650; font-size: 47px; }
.portrait-copy { padding: 22px; }
.portrait-copy h3 { font-size: 20px; overflow-wrap: anywhere; margin-bottom: 7px; }
.portrait-role { color: #007357; font-weight: 650; font-size: 14px; margin-bottom: 7px; }
.portrait-copy p:last-child { color: var(--muted); font-size: 14px; margin-bottom: 0; }
.health-grid, .hotline-grid, .community-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; }
.health-card, .hotline-card { padding: 25px; }
.health-card, .community-value { min-width: 0; }
.health-card h3, .health-card li, .purpose-card p, .community-value p { overflow-wrap: anywhere; }
.community-value { padding: 25px; }
.community-value h2 { font-size: 21px; }
.community-value p { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 0; }
.system-credits { margin-top: 24px; padding: 20px 25px; }
.system-credits summary { cursor: pointer; font-weight: 650; }
.system-credits p { color: var(--muted); line-height: 1.8; margin: 15px 0 0; overflow-wrap: anywhere; }
.health-card ul { padding-left: 22px; color: var(--muted); margin-bottom: 0; }
.health-card li + li { margin-top: 7px; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 25px; align-items: start; }
.contact-information, .contact-form-card { padding: 30px; }
.contact-detail { display: flex; gap: 16px; margin-bottom: 26px; }
.contact-detail > svg { color: var(--emerald); margin-top: 1px; }
.contact-detail h2 { font-size: 17px; margin-bottom: 6px; }
.contact-detail p { color: var(--muted); margin-bottom: 0; font-size: 15px; overflow-wrap: anywhere; }
.social-links { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 20px; font-weight: 650; }
.office-map { display: block; width: 100%; height: 230px; border: 1px solid var(--border); border-radius: 11px; background: #e7eff1; margin-bottom: 13px; }
.contact-form-card > h2 { margin-bottom: 9px; }
.contact-form-card > p { font-size: 14px; margin-bottom: 22px; }
.contact-form-card input, .contact-form-card textarea { margin-bottom: 21px; }
.contact-form-card .button { width: 100%; margin-top: 3px; }
.feedback { margin: 20px 0 0; padding: 15px 18px; background: #e7f3fa; border: 1px solid #bad5e3; border-radius: 9px; font-size: 15px; overflow-wrap: anywhere; }
.feedback.error { color: #8c2736; background: #fff0f1; border-color: #e4b8be; }
.feedback.success { color: #006347; background: #e5f5ed; border-color: #abd6c3; }
.hotline-card h3 { font-size: 18px; }
.hotline-card a { font-size: 18px; font-weight: 700; }
.hotline-card p { margin: 0; color: var(--muted); }
dialog { width: min(620px, calc(100% - 32px)); max-height: calc(100svh - 40px); padding: 30px; border: 1px solid var(--border); border-radius: 17px; color: var(--ink); box-shadow: 0 24px 80px #073b4a33; }
dialog::backdrop { background: #073b4a88; }
.dialog-top { display: flex; align-items: flex-start; gap: 20px; justify-content: space-between; margin-bottom: 18px; }
.dialog-top h2 { margin: 8px 0 0; }
.dialog-close { width: 44px; height: 44px; border: 1px solid var(--border); background: #f1f6f8; border-radius: 50%; color: var(--ink); font-size: 27px; flex-shrink: 0; }
#dialog-content p { color: var(--muted); }
#dialog-content li { margin-bottom: 9px; }
#dialog-content .button { margin-top: 15px; }
.auth-layout { max-width: 600px; margin: 15px auto 0; padding: 35px; }
.auth-layout h1 { font-size: 33px; }
.auth-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 25px; }
.auth-choice { padding: 25px 16px; border: 1px solid var(--border); border-radius: 11px; background: white; color: var(--ink); text-align: left; }
.auth-choice:hover { border-color: var(--emerald); background: #f1faf6; }
.auth-choice strong { display: block; font-size: 20px; margin: 15px 0 8px; }
.auth-choice span:last-child { font-size: 14px; color: var(--muted); }
.modal { display: none; position: fixed; inset: 0; z-index: 30; padding: 24px; background: #073b4a88; align-items: center; justify-content: center; }
.modal-content { width: min(500px, 100%); max-height: calc(100svh - 48px); overflow: auto; background: #fff; border-radius: 16px; padding: 28px; }
.modal-content .dialog-top { margin-bottom: 20px; }
.modal-content input { margin-bottom: 19px; }
.modal-content .btn { min-height: 46px; padding: 11px 18px; border: 1px solid transparent; border-radius: 8px; font-weight: 700; background: var(--teal); color: white; }
.modal-content .btn-green { background: var(--emerald); }
.login-field { position: relative; display: flex; align-items: center; margin-bottom: 19px; }
.login-field input { margin-bottom: 0; }
.login-field > svg { display: none; }
.login-field input[type="password"], .login-field #password { padding-right: 56px; }
.login-field input::-ms-reveal, .login-field input::-ms-clear { display: none; }
.password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--teal); }
.password-toggle svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.password-toggle:hover { background: var(--mint); }
.password-toggle:focus-visible { outline-offset: -2px; }
.login-divider { margin: 18px 0 8px; text-align: center; font-size: 12px; color: var(--muted); }
.error { display: none; color: #972536; margin-top: 18px; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.role-card { border: 1px solid var(--border); border-radius: 10px; background: white; padding: 21px; color: var(--ink); }
.role-card h3 { margin: 15px 0 8px; }
.role-card p { color: var(--muted); font-size: 14px; }
.role-emblem { display: none; }
.role-avatar svg { width: 50px; height: 50px; fill: var(--teal); }
.role-intro { color: var(--muted); }
@media (min-width: 1600px) { .home-main { padding-top: 38px; } .welcome-hero { min-height: 490px; } }
@media (max-width: 1060px) {
.header-inner { gap: 18px; padding-inline: 24px; }
.main-navigation { gap: 17px; }
.brand strong { font-size: 16px; }
.brand img { width: 44px; height: 44px; }
.main-navigation .login-link { padding: 11px 16px; margin-left: 0; }
.footer-inner { flex-wrap: wrap; }
.footer-inner > p { width: 100%; }
.footer-bottom { margin-inline: 32px; }
.hero-copy { width: 64%; padding: 43px 34px; }
.service-grid, .portrait-grid, .health-grid, .hotline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.community-values-grid { grid-template-columns: 1fr; }
.page-heading { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 960px) {
.header-inner { flex-wrap: wrap; padding: 17px 20px; gap: 0; }
.menu-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--teal); background: white; font-size: 13px; font-weight: 650; }
.menu-toggle svg { width: 20px; }
.main-navigation { display: none; flex-direction: column; align-items: stretch; width: 100%; padding-top: 15px; gap: 3px; }
.main-navigation.is-open { display: flex; }
.main-navigation > a { padding: 12px 8px; border-radius: 6px; border-bottom: 0; }
.main-navigation > a[aria-current="page"]:not(.login-link) { color: #00664d; background: var(--mint); }
.main-navigation .login-link { margin-top: 7px; }
}
@media (max-width: 760px) {
.header-inner { flex-wrap: wrap; padding: 17px 20px; gap: 0; }
.brand strong { font-size: 15px; }
.brand small { font-size: 9px; }
.menu-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--teal); background: white; font-size: 13px; font-weight: 650; }
.menu-toggle svg { width: 20px; }
.main-navigation { display: none; flex-direction: column; align-items: stretch; width: 100%; padding-top: 15px; gap: 3px; }
.main-navigation.is-open { display: flex; }
.main-navigation > a { padding: 12px 8px; border-radius: 6px; border-bottom: 0; }
.main-navigation > a[aria-current="page"]:not(.login-link) { color: #00664d; background: var(--mint); }
.main-navigation .login-link { margin-top: 7px; }
.home-main, .page-main { padding: 23px 20px 32px; }
.welcome-hero { display: block; min-height: 0; border-radius: 14px; background: #fff; }
.welcome-photo { position: relative; height: 235px; object-position: 67% center; display: block; z-index: 0; }
.welcome-hero::before { display: none; }
.hero-copy { padding: 28px 24px 31px; width: 100%; }
.hero-copy h1 { font-size: clamp(36px, 8.5vw, 52px); margin-bottom: 18px; }
.hero-description { font-size: 17px; margin-bottom: 23px; }
.hero-actions { gap: 10px; }
.hero-actions .button { padding: 13px; }
.shortcut-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
.shortcut-card { padding: 23px 61px 23px 23px; }
.shortcut-card .icon-box { float: left; margin: 0 17px 12px 0; }
.shortcut-card h2 { margin-top: 3px; }
.shortcut-card p { margin-left: 68px; }
.circle-arrow { bottom: auto; top: 42%; }
.emergency-strip { flex-wrap: wrap; gap: 14px; padding: 22px; }
.emergency-strip > div { flex: 1; }
.emergency-strip .button { width: 100%; margin-left: 0; }
.footer-inner { padding: 24px 20px 19px; gap: 23px; }
.footer-inner nav { gap: 19px; }
.footer-bottom { margin-inline: 20px; }
.page-heading { gap: 20px; margin-bottom: 24px; }
.page-heading h1 { font-size: 32px; }
.service-grid, .purpose-grid, .portrait-grid, .health-grid, .hotline-grid, .contact-grid, .community-values-grid { grid-template-columns: minmax(0, 1fr); }
.service-card { padding: 25px; }
.purpose-card { padding: 23px; gap: 17px; }
.portrait-image { height: 300px; }
.contact-information, .contact-form-card { padding: 24px; }
.help-strip { flex-direction: column; align-items: flex-start; padding: 23px; }
.announcement-card { align-items: flex-start; padding: 18px; gap: 15px; }
.announcement-thumbnail { width: 90px; height: 100px; }
.announcement-placeholder { display: none; }
.announcement-meta { align-items: flex-start; flex-wrap: wrap; gap: 7px; }
.announcement-copy h2 { font-size: 19px; }
.announcement-card > svg { display: none; }
.detail-article { padding: 24px; }
.auth-layout { padding: 25px; }
.modal { padding: 16px; }
.modal-content { padding: 24px; }
}
@media (max-width: 400px) {
.announcement-thumbnail { display: none; }
.auth-choices, .role-grid { grid-template-columns: 1fr; }
.hero-actions .button { width: 100%; }
.brand { gap: 8px; }
.site-header .brand img { width: 38px; height: 38px; }
.menu-toggle { width: 44px; min-height: 44px; padding: 10px; }
.menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
/* Shared, dependency-free theme for public pages and the existing PHP portals. */
:root {
color-scheme: light;
--glass-ink:#123d47; --glass-muted:#4b6570; --glass-page:#edf4f4;
--glass-surface:rgba(255,255,255,.91); --glass-solid:#f8fcfc;
--glass-border:#cfdfdf; --glass-field:#fff; --glass-accent:#00765f;
--glass-tint:#e0f3ed; --glass-blue:#e5f2fc; --glass-orange:#fff0df;
--glass-shadow:0 8px 28px rgba(12,47,52,.055);
}
:root[data-theme="dark"] {
color-scheme: dark;
--glass-ink:#e9f5f4; --glass-muted:#b3c9ce; --glass-page:#09191f;
--glass-surface:rgba(19,42,50,.92); --glass-solid:#132a32;
--glass-border:#34515a; --glass-field:#10252d; --glass-accent:#66e2be;
--glass-tint:#153e36; --glass-blue:#153b50; --glass-orange:#473622;
--glass-shadow:0 8px 28px rgba(0,0,0,.14);
}
:root {
--ink:var(--glass-ink); --muted:var(--glass-muted); --page:var(--glass-page);
--border:var(--glass-border); --mint:var(--glass-tint); --teal:var(--glass-accent); --emerald:var(--glass-accent);
background:var(--glass-page); color:var(--glass-ink);
font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
body, body.dark {
color:var(--glass-ink); background-color:var(--glass-page);
background-image:radial-gradient(ellipse at 0 0,rgba(20,148,127,.12),transparent 48%),radial-gradient(ellipse at 100% 65%,rgba(39,129,149,.08),transparent 50%);
}
body, input, button, textarea, select { font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
:focus-visible { outline:3px solid var(--glass-accent); outline-offset:3px; }
html [hidden]{display:none!important}
body .main>.container{width:100%;max-width:1440px;margin-inline:auto;min-width:0}
@media(max-width:960px){html body .main>.container{width:auto;max-width:calc(100% - 24px);margin:12px!important}}
body :is(.main,.container,.topbar,.topbar-actions,.admin-box,.table-panel,.card,.dialog-body){min-width:0}
html body:not([data-page]) .btn.delete:not(.x-button){width:auto!important;height:auto!important;min-width:44px;min-height:44px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.service-requirements summary{cursor:pointer;color:var(--glass-accent);font-weight:650;min-height:44px;padding-block:10px}
.service-requirements[open] summary{margin-bottom:12px}
.service-requirements h3{font-size:17px;margin-top:16px}
.service-requirements ol{padding-left:22px;font-size:15px;line-height:1.7}
.detail-article h2{margin-top:18px}
.portrait-copy,.health-card,.purpose-card>div,.contact-detail>div{min-width:0;overflow-wrap:anywhere}
input, textarea, select { accent-color:#0a9878; }
input, textarea, select, button { touch-action:manipulation; }
.site-header, .compact-footer, body .topbar, body.dark .topbar {
background:var(--glass-surface); color:var(--glass-ink);
border-color:var(--glass-border); box-shadow:var(--glass-shadow);
}
.header-inner { gap:20px; padding-block:19px; }
.header-actions { display:flex; align-items:center; gap:8px; order:3; }
.main-navigation { order:2; margin-left:auto; gap:23px; }
.theme-toggle { display:grid; place-items:center; width:44px; height:44px; padding:10px; flex-shrink:0; border:1px solid var(--glass-border); border-radius:50%; background:var(--glass-field); color:var(--glass-ink); cursor:pointer; }
.theme-toggle:hover { border-color:var(--glass-accent); }
.theme-toggle svg { width:22px; height:22px; }
.main-navigation > a { font-size:14px; }
.main-navigation > a[aria-current="page"]:not(.login-link) { color:var(--glass-accent); border-bottom-color:var(--glass-accent); }
.brand, .brand strong, .compact-footer .brand, .main-navigation > a:not(.login-link) { color:var(--glass-ink); }
.brand small, .footer-brand small, .footer-inner > p, .footer-bottom { color:var(--glass-muted); }
.footer-inner nav a { color:var(--glass-ink); }
.footer-bottom { border-color:var(--glass-border); }
.button-teal, .button-emerald, .modal-content .btn, .modal-content .btn-green { background:#087a66; color:#fff; border-color:#15977f; }
.button-teal:hover, .button-emerald:hover, .modal-content .btn:hover { background:#066553; }
.button-outline { background:var(--glass-field); border-color:var(--glass-border); color:var(--glass-accent); }
.button-outline:hover { background:var(--glass-tint); border-color:var(--glass-accent); }
.welcome-hero { background:var(--glass-solid); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); }
.welcome-hero::before { background:linear-gradient(90deg,#f4f9f9 0%,rgba(244,249,249,.98) 23%,rgba(244,249,249,.87) 40%,rgba(244,249,249,.18) 66%,transparent 82%); }
[data-theme="dark"] .welcome-hero::before { background:linear-gradient(90deg,#10272f 0%,rgba(16,39,47,.97) 23%,rgba(16,39,47,.84) 42%,rgba(16,39,47,.22) 69%,transparent 90%); }
.hero-copy { padding-block:49px; }
.hero-copy h1 { max-width:600px; }
.eyebrow, .text-link, .service-card .text-link, .portrait-role, .hotline-card a, .contact-detail > svg { color:var(--glass-accent); }
.shortcut-card, .card, .service-card, .announcement-card, .auth-choice, .role-card, .empty-state, dialog, .modal-content {
color:var(--glass-ink); background:var(--glass-surface); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow);
}
.shortcut-card:hover, .announcement-card:hover, .auth-choice:hover { border-color:var(--glass-accent); background:var(--glass-solid); }
.shortcut-card h2, .service-card h2 { letter-spacing:-.025em; }
.icon-box { border:1px solid rgba(30,140,120,.1); }
.mint, .circle-arrow, .announcement-placeholder { background:var(--glass-tint); color:var(--glass-accent); }
.blue { background:var(--glass-blue); color:#0075bc; }
.peach { background:var(--glass-orange); color:#a35410; }
[data-theme="dark"] .blue { color:#83d1ff; }
[data-theme="dark"] .peach { color:#ffc88c; }
.emergency-strip, .help-strip { border:1px solid var(--glass-border); background:var(--glass-tint); }
.emergency-strip p { color:var(--glass-muted); }
.emergency-strip .icon-box { background:var(--glass-surface); }
input, textarea, select { color:var(--glass-ink); background:var(--glass-field); border-color:var(--glass-border); }
input::placeholder, textarea::placeholder { color:var(--glass-muted); opacity:1; }
.filter-row a, .pagination a, .pagination span, .dialog-close, .menu-toggle { color:var(--glass-ink); background:var(--glass-field); border-color:var(--glass-border); }
.filter-row a[aria-current="true"], .pagination a[aria-current="page"] { background:#087a66; color:#fff; border-color:#15977f; }
.pagination span[aria-disabled="true"] { background:var(--glass-page); color:var(--glass-muted); }
.badge { background:var(--glass-tint); color:var(--glass-accent); }
[data-theme="dark"] .badge.advisories { background:#473b1d; color:#ffe39c; }
[data-theme="dark"] .badge.events { background:var(--glass-blue); color:#9cdbff; }
.portrait-image, .portrait-fallback, .detail-image { background:var(--glass-page); color:var(--glass-accent); }
.feedback { background:var(--glass-blue); border-color:var(--glass-border); color:var(--glass-ink); }
[data-theme="dark"] .feedback.error, [data-theme="dark"] .error { background:#3e242c; color:#ffc1c8; border-color:#885363; }
[data-theme="dark"] .feedback.success { background:var(--glass-tint); color:#9ff4cf; border-color:#3b7865; }
.modal, dialog::backdrop { background:rgba(3,13,18,.72); }
.modal-content .forgot-link { color:var(--glass-accent)!important; }
.modal-content .login-field input { background:var(--glass-field); color:var(--glass-ink); }
.password-toggle { color:var(--glass-accent); }
.skip-link { background:var(--glass-field); color:var(--glass-ink); }
.map-shell { margin-bottom:14px; padding:23px; min-height:180px; display:flex; align-items:flex-start; flex-direction:column; justify-content:center; gap:14px; border:1px solid var(--glass-border); border-radius:12px; background:var(--glass-tint); }
.map-shell p { margin:0; color:var(--glass-muted); font-size:14px; }
.office-map { background:var(--glass-page); margin:0; }
.data-retry { margin:12px 0 0; }
/* Keep prose aligned without stretching short labels, names or narrow columns. */
@media(min-width:640px) {
.purpose-card p, .community-value p, .detail-body, .information-card li, #dialog-content > p { text-align:justify; text-justify:inter-word; hyphens:auto; }
}
.detail-body { max-width:70ch; }
.information-card li, .purpose-card p, .community-value p { line-height:1.8; }
/* Existing administration and resident layouts retain their controls and structure. */
body:not([data-page]) * { font-family:inherit; }
body:not([data-page]) { font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; line-height:1.55; }
html body:not([data-page]) :is(.card,.box,.table-panel,.official-message-panel,.report-card,.reset-card),
html body:not([data-page]) :is(.modal-content,#modalContent) { background:var(--glass-surface); color:var(--glass-ink); border-color:var(--glass-border); border-radius:14px; box-shadow:var(--glass-shadow); }
html body:not([data-page]) #modalContent.dialog-frame { background:var(--glass-solid); }
html body:not([data-page]) :is(.sidebar,.sidebar-logout) { background:var(--glass-solid); border-right:1px solid var(--glass-border); color:var(--glass-ink); }
html body:not([data-page]) .sidebar-header { border-color:var(--glass-border); }
html body:not([data-page]) .menu :is(a,button) { color:var(--glass-ink); }
html body:not([data-page]) .menu :is(a,button):is(:hover,.active) { background:var(--glass-tint); color:var(--glass-accent); }
html body:not([data-page]) :is(.admin-icon-btn,.icon-btn,#themeToggle,.mobile-menu-toggle,.mobile-menu-close,.cancel-btn) { background:var(--glass-field); border-color:var(--glass-border); color:var(--glass-ink); }
html body:not([data-page]) :is(input,textarea,select,.search) { background:var(--glass-field); color:var(--glass-ink); border-color:var(--glass-border); }
html body:not([data-page]) input::placeholder, html body:not([data-page]) textarea::placeholder { color:var(--glass-muted); }
html body:not([data-page]) :is(h1,h2,h3,h4,.modal-title,.admin-box span,#adminNameText,#modalTitle) { color:var(--glass-ink)!important; }
html body:not([data-page]) :is(.header,.section-title) { background:var(--glass-tint); color:var(--glass-ink); border:1px solid var(--glass-border); }
html body:not([data-page]) :is(.header,.section-title) p { color:var(--glass-muted); }
html body:not([data-page]) table { color:var(--glass-ink); }
html body:not([data-page]) th { background:var(--glass-tint); color:var(--glass-ink); border-color:var(--glass-border); }
html body:not([data-page]) td { color:var(--glass-ink); border-color:var(--glass-border); }
html body:not([data-page]) tbody tr:hover { background:var(--glass-tint); }
html body:not([data-page]) .hint { color:var(--glass-muted); }
html body:not([data-page]) :is(.dashboard-summary-card > p,.dashboard-announcement-eyebrow,.dashboard-announcement-link) { color:var(--glass-accent); }
html body:not([data-page]) .reset-card a { color:var(--glass-accent); }
html body:not([data-page]) .settings-layout .card { background:var(--glass-surface); border-color:var(--glass-border); border-left-color:var(--glass-accent); }
html body:not([data-page]) .settings-layout :is(.settings-section-header,.account-settings-section summary) { background:var(--glass-solid); color:var(--glass-ink); }
html body:not([data-page]) .settings-layout .settings-section-header:is(:hover,.active) { background:var(--glass-tint); }
html body:not([data-page]) .settings-layout :is(.dropdown-icon,.official-editor) { background:var(--glass-field); color:var(--glass-ink); border-color:var(--glass-border); }
html body:not([data-page]) .settings-layout :is(label,#hotlineSettingsStatus) { color:var(--glass-muted); font-size:14px; }
html body:not([data-page]) .settings-layout .settings-section-header { font-size:14px; }
html body:not([data-page]) .site-footer { background:var(--glass-solid); color:var(--glass-ink); border-top:1px solid var(--glass-border); }
html body:not([data-page]) .site-footer :is(p,a,button,address,h4,strong) { color:var(--glass-muted); }
html body:not([data-page]) .site-footer :is(h2,h3) { color:var(--glass-ink); }
html body:not([data-page]) td :is(p,small), html body:not([data-page]) .empty-row { color:var(--glass-muted); }
html[data-theme="dark"] body:not([data-page]) :is([style*="color:#64748b"],[style*="color: #64748b"],[style*="color:#475569"],[style*="color: #475569"]) { color:var(--glass-muted)!important; }
[data-theme="dark"] #resetError { color:#ffc1c8; }
[data-theme="dark"] #resetStatus { color:#9ff4cf; }
/* Blur only on a few top-level surfaces; small cards remain cheap to render. */
/* Legacy pages contain light inline panels. Set both foreground and surface. */
html[data-theme="dark"] body:not([data-page]) :is(.appointment-filters,.user-detail-item,.report-filters,.filter-bar) {
background:var(--glass-solid)!important;color:var(--glass-ink)!important;border-color:var(--glass-border)!important;
}
html[data-theme="dark"] body:not([data-page]) :is(div,section,article,td)[style*="background:#f"],
html[data-theme="dark"] body:not([data-page]) :is(div,section,article,td)[style*="background: #f"],
html[data-theme="dark"] body:not([data-page]) :is(div,section,article,td)[style*="background:white"],
html[data-theme="dark"] body:not([data-page]) :is(div,section,article,td)[style*="background: white"] {
background:var(--glass-solid)!important;color:var(--glass-ink)!important;border-color:var(--glass-border)!important;
}
html[data-theme="dark"] body:not([data-page]) :is(.user-detail-item strong,.user-detail-item span,label,.appointment-filters label) {color:var(--glass-ink)!important;}
html[data-theme="dark"] body:not([data-page]) :is(p,span,small,strong,b,div)[style*="color:black"],
html[data-theme="dark"] body:not([data-page]) :is(p,span,small,strong,b,div)[style*="color: black"],
html[data-theme="dark"] body:not([data-page]) :is(p,span,small,strong,b,div)[style*="color:#0f172a"],
html[data-theme="dark"] body:not([data-page]) :is(p,span,small,strong,b,div)[style*="color:#333"] {color:var(--glass-ink)!important;}
html body:not([data-page]) :is(td,th) {font-size:14px;line-height:1.6;}
html body:not([data-page]) td :is(small,.hint) {font-size:13px;}
html[data-theme="dark"] body:not([data-page]) .btn {color:#f4fffc!important;background:#24515f!important;border:1px solid #577983;line-height:1.45;font-size:14px;}
html[data-theme="dark"] body:not([data-page]) .btn:is(.add,.btn-green) {background:#14633d!important;border-color:#398d61;}
html[data-theme="dark"] body:not([data-page]) .btn.edit {background:#165f91!important;border-color:#4c8eb7;}
html[data-theme="dark"] body:not([data-page]) .btn.delete {background:#9f2939!important;border-color:#dc7c88;}
html[data-theme="dark"] body:not([data-page]) button:disabled {opacity:.65;}
html[data-theme="dark"] body:not([data-page]) :is(.sms-contact-choice,.sms-alert-history,.communication-delivery,.sms-setup-tools) {color:var(--glass-ink);}
html[data-theme="dark"] body:not([data-page]) :is(.sms-contact-choice small,.communication-card-top,.communication-counts,.communications-list-intro) {color:#c1d8dd;}
html[data-theme="dark"] ::selection {background:#34726d;color:#fff;}
html[data-theme="dark"] body:not([data-page]) :is(div,section,article)[style*="background:#dcfce7"],
html[data-theme="dark"] body:not([data-page]) :is(div,section,article)[style*="background:#e"],
html[data-theme="dark"] body:not([data-page]) :is(div,section,article)[style*="background: #e"] {background:var(--glass-solid)!important;color:var(--glass-ink)!important;}
html[data-theme="dark"] body:not([data-page]) .btn:focus-visible {outline:3px solid #66e2be!important;outline-offset:3px;}
html body:not([data-page]) #userTable .user-row-actions > .btn {min-height:44px;height:auto;font-size:14px;line-height:1.4;padding:9px 12px;}
@supports (backdrop-filter:blur(10px)) {
.site-header, .compact-footer, body .topbar { backdrop-filter:blur(10px); }
dialog, .modal-content, body #modalContent { backdrop-filter:blur(12px); }
}
@media(max-width:960px) {
.header-inner { gap:0; }
.header-actions { order:2; margin-left:auto; }
.main-navigation { order:3; margin-left:0; }
.main-navigation > a[aria-current="page"]:not(.login-link) { color:var(--glass-accent); background:var(--glass-tint); }
.menu-toggle { min-width:44px; min-height:44px; }
}
@media(max-width:760px) {
.welcome-hero::before { display:none; }
.hero-copy { padding:28px 24px 31px; }
.shortcut-card, .service-card, .card { box-shadow:none; }
}
@media(max-width:400px) {
.header-inner { padding-inline:16px; }
.site-header .brand strong { font-size:13px; }
.site-header .brand small { font-size:8px; letter-spacing:.07em; }
.header-actions { gap:5px; }
.theme-toggle { width:40px; height:44px; padding:9px; border-radius:9px; }
}
.low-data .site-header, .low-data .compact-footer, .low-data .topbar, .low-data dialog, .low-data .modal-content, .low-data #modalContent { backdrop-filter:none; background:var(--glass-solid); }
@media(prefers-reduced-motion:reduce), (prefers-reduced-transparency:reduce) {
.site-header, .compact-footer, body .topbar, dialog, .modal-content, body #modalContent { backdrop-filter:none; background:var(--glass-solid); }
*, *::before, *::after { transition:none!important; animation:none!important; }
}
@media print {
:root, :root[data-theme="dark"] { color-scheme:light; --glass-ink:#111; --glass-muted:#333; --glass-page:#fff; --glass-surface:#fff; --glass-solid:#fff; --glass-border:#bbb; --glass-field:#fff; --glass-accent:#075c48; --glass-tint:#edf3f1; }
body, body.dark { background:#fff; color:#111; }
.theme-toggle { display:none; }
* { backdrop-filter:none!important; box-shadow:none!important; }
}