/* Site-wide polish (7 Oct 2026). Loaded last; refines shared layout without changing content.
   Utilities replace inline style attributes, which the content security policy blocks. */
.u-fs-1-35{font-size:1.35rem!important}.u-fs-1-4{font-size:1.4rem!important}.u-fs-1-5{font-size:1.5rem!important}.u-fs-display{font-size:clamp(1.8rem,3vw,2.8rem)!important}
.u-mt-6{margin-top:6px!important}.u-mt-8{margin-top:8px!important}.u-mt-10{margin-top:10px!important}.u-mt-12{margin-top:12px!important}.u-mt-14{margin-top:14px!important}.u-mt-15{margin-top:15px!important}.u-mt-16{margin-top:16px!important}.u-mt-18{margin-top:18px!important}.u-mt-20{margin-top:20px!important}.u-mt-22{margin-top:22px!important}.u-mt-24{margin-top:24px!important}.u-mt-36{margin-top:36px!important}.u-mt-48{margin-top:48px!important}
.u-mb-22{margin-bottom:22px!important}.u-p-0{padding:0!important}
.u-pre-ink{white-space:pre-wrap;color:var(--ink)}.u-row-divider{padding:10px 0;border-top:1px solid var(--line)}.u-dash-logout{margin:14px 12px 0;text-align:left;color:#8ce6db}

/* The page area is focused after each navigation for screen readers; it is not a control, so no ring. */
#main-content:focus{outline:none}

/* Fields keep their quiet fill but gain a visible edge, so they read as fields on any surface. */
:is(#main-content,.jh-card) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=reset]):not([type=button]):not([type=image]),textarea,select){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink,#082635) 22%,transparent);transition:box-shadow .15s}
:is(#main-content,.jh-card) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=reset]):not([type=button]):not([type=image]),textarea,select):hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink,#082635) 38%,transparent)}
@media (prefers-reduced-motion:reduce){:is(#main-content,.jh-card) :where(input,textarea,select){transition:none}}

/* Header: tighter rows; the service links sit together in the middle instead of spreading edge to edge. */
@media (min-width:1000px){
  .site-header .nav-wrap{min-height:0;padding-block:8px 0;row-gap:2px}
  .site-header .primary-nav{justify-content:center;gap:0 34px}
  .site-header .primary-nav a{min-height:40px;padding-block:6px}
}
@media (max-width:600px){
  .platform-ribbon{gap:2px 10px;padding:5px 12px;font-size:.68rem;line-height:1.4}
  .platform-emergency-call{display:inline}
  .site-header .nav-wrap{padding-block:8px}
  .site-header .header-auth{height:54px;gap:3px}
}

/* Site chat: a pill with a soft lift on wide screens; a round button on phones, so it never hides text. */
.host-chat-entry{box-shadow:0 8px 22px rgba(8,121,111,.32)}
@media (max-width:700px){
  .host-chat-entry{width:52px;height:52px;min-height:52px;padding:0;justify-content:center;border-radius:50%}
  .host-chat-entry span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

/* "Issues around us" entry on Explore, Know My Area, Report and Track: a compact card with a map glyph. */
#main-content .im-home-entry{position:relative;box-sizing:border-box;width:min(1180px,calc(100% - 48px));max-width:none;margin:18px auto 4px;padding:12px 14px 12px 70px;border:1px solid color-mix(in srgb,var(--theme-accent,#087f75) 24%,transparent);border-radius:16px;background:linear-gradient(100deg,color-mix(in srgb,var(--theme-accent,#087f75) 12%,var(--theme-surface,#fff)),var(--theme-surface,#fff) 62%);box-shadow:0 6px 18px rgba(9,47,69,.06)}
#main-content .im-home-entry::before{content:'';position:absolute;left:16px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:12px;background:var(--theme-accent,#087f75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 6-3 6 3 6-3v13l-6 3-6-3-6 3Z'/%3E%3Cpath d='M9 4v13m6-10v13'/%3E%3C/svg%3E") center/22px no-repeat}
#main-content .im-home-entry strong{font-size:.98rem}
#main-content .im-home-entry p{margin:2px 0 0;font-size:.8rem}
#main-content .im-home-entry .button{flex:0 0 auto;white-space:nowrap}
.app-shell.with-sidebar #main-content .im-home-entry{width:min(1000px,calc(100% - 48px))}
@media (max-width:640px){#main-content .im-home-entry{width:calc(100% - 28px);padding:12px 12px 12px 62px;flex-wrap:wrap}#main-content .im-home-entry::before{left:12px;top:22px;margin-top:0}#main-content .im-home-entry .button{min-height:40px;padding:6px 0}}

/* Representative directory: denser cards, four across on wide screens, a gentle lift on hover. */
.representative-card{transition:transform .18s,box-shadow .18s}
.representative-card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(9,47,69,.12)}
.representative-card-cover{height:82px}
.representative-card-photo{width:80px;height:80px;margin:-44px 0 0 20px;border-width:4px}
.representative-card-body{padding:12px 20px 18px}
.representative-card h3{font-size:1.3rem}
.representative-headline{min-height:0}
.representative-card-body>p:not(.representative-headline):not(.representative-party){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.representative-card-meta{margin:12px 0}
@media (min-width:1280px){.representative-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
@media (prefers-reduced-motion:reduce){.representative-card{transition:none}.representative-card:hover{transform:none}}

/* Charts: proportional bars (sized by script) and a quiet "Show all" for long lists. */
.chart-more summary{margin-top:10px;cursor:pointer;color:var(--theme-accent,#087f75);font-size:.82rem;font-weight:700;min-height:36px;display:flex;align-items:center}
.chart-more[open] summary{margin-bottom:8px}
.chart-bar{transition:width .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.chart-bar{transition:none}}

/* Public issue page: the category glyph, then Reported → In progress → Resolved. */
.ci-issue-heading{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:start}
.ci-issue-heading>div{min-width:0}
.ci-issue-icon{display:grid;place-items:center;width:64px;height:64px;margin-top:4px;border-radius:20px;background:var(--im-color,#087f75);color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--im-color,#087f75) 35%,transparent)}
.ci-issue-icon svg{width:34px;height:34px}
.ci-steps{grid-column:1/-1;display:flex;max-width:640px;margin:18px 0 6px;padding:0;list-style:none;counter-reset:none}
.ci-steps li{position:relative;flex:1 1 0;display:grid;justify-items:start;gap:8px;font-size:.82rem;font-weight:700;color:var(--muted)}
.ci-steps li::before{content:'';position:absolute;top:15px;left:32px;right:4px;height:3px;border-radius:2px;background:var(--line,#dfe7e4)}
.ci-steps li:last-child::before{display:none}
.ci-steps li.is-done::before{background:#2f9a5f}
.ci-steps span{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--theme-surface,#fff);border:2px solid var(--line,#dfe7e4);color:var(--muted);font-size:.85rem;font-weight:800}
.ci-steps li.is-done span{background:#2f9a5f;border-color:#2f9a5f;color:#fff}
.ci-steps li.is-current{color:var(--ink)}
.ci-steps li.is-current span{background:#f08a3c;border-color:#f08a3c;color:#2a1200;box-shadow:0 0 0 6px color-mix(in srgb,#f08a3c 22%,transparent)}
.ci-steps li.is-current:last-child span{background:#2f9a5f;border-color:#2f9a5f;color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,#2f9a5f 22%,transparent)}
@media (max-width:560px){.ci-issue-icon{width:52px;height:52px;border-radius:16px}.ci-issue-icon svg{width:28px;height:28px}.ci-steps li{font-size:.74rem}}

/* How it works: four connected steps with a numbered disc and a balanced card. */
.how-steps{counter-reset:how;gap:18px}
.how-steps .card{position:relative;padding:26px 26px 24px 92px;border-top:4px solid var(--theme-accent,#087f75)}
.how-steps .card .feature-number{position:absolute;left:24px;top:24px;display:grid;place-items:center;width:48px;height:48px;margin:0;border-radius:50%;background:color-mix(in srgb,var(--theme-accent,#087f75) 14%,transparent);color:var(--theme-accent,#087f75);font-size:1rem;letter-spacing:0}
.how-steps .card h2{margin:4px 0 8px;line-height:1.2}
.how-steps .card p{margin:0;font-size:.95rem;line-height:1.65}
.how-steps .card:nth-child(2){border-top-color:#f08a3c}.how-steps .card:nth-child(2) .feature-number{background:color-mix(in srgb,#f08a3c 16%,transparent);color:#b85a0c}
.how-steps .card:nth-child(3){border-top-color:#276cb0}.how-steps .card:nth-child(3) .feature-number{background:color-mix(in srgb,#276cb0 14%,transparent);color:#276cb0}
.how-steps .card:nth-child(4){border-top-color:#2f9a5f}.how-steps .card:nth-child(4) .feature-number{background:color-mix(in srgb,#2f9a5f 16%,transparent);color:#1b7444}
@media (max-width:560px){.how-steps .card{padding:22px 20px 20px 80px}.how-steps .card .feature-number{left:18px;top:20px;width:44px;height:44px}}
/* Report form: the note under Locality that says it was picked from the issue pin. */
.form-grid .locality-pin-note{display:block;margin:-6px 0 4px;padding:9px 12px;border-radius:10px;border-left:3px solid var(--theme-accent,#087f75);background:var(--theme-soft,#eaf3f1);color:var(--ink);font-size:.82rem;line-height:1.45}
.form-grid .locality-pin-note[hidden]{display:none}