/* City portal v1 · clean mobile-first city dashboard */
.city-gate-page { min-height: 100vh; background: #f4f8fa; }
.city-gate-header { padding-bottom: 0; }
.city-gate-brand { color: #174c68; font-weight: 900; text-decoration: none; }
.city-gate-main { min-height: calc(100vh - 210px); display: grid; place-items: center; padding-top: 26px; padding-bottom: 36px; }
.city-gate-hero { width: min(860px, 100%); padding: 30px; border: 1px solid #d8e8ef; border-radius: 26px; background: #fff; box-shadow: 0 18px 50px rgba(25,88,120,.08); }
.city-gate-hero h1 { margin: 5px 0 8px; color: #123e5b; font-size: clamp(30px, 5vw, 48px); line-height: 1.03; }
.city-gate-hero > p { max-width: 670px; color: #5d7584; line-height: 1.55; }
.city-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.city-choice-card { display: grid; min-height: 150px; grid-template-rows: auto 1fr auto; padding: 18px; border: 1px solid #d7e7ee; border-radius: 20px; background: linear-gradient(145deg,#fff,#f8fcfe); color: #173f58; text-decoration: none; box-shadow: 0 8px 24px rgba(25,88,120,.05); transition: .16s ease; }
.city-choice-card:hover { transform: translateY(-2px); border-color: #b9dbe9; box-shadow: 0 12px 28px rgba(25,88,120,.09); }
.city-choice-card span { font-size: 25px; }
.city-choice-card strong { align-self: center; font-size: 22px; }
.city-choice-card small { color: #1780ad; font-weight: 850; }
.city-gate-note { margin: 18px 0 0 !important; font-size: 12px; color: #7b909c !important; }
.city-gate-footer { margin-top: 0; }

.city-context-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 7px 10px; border: 1px solid #d5e6ed; border-radius: 999px; background: #fff; color: #20506b; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; white-space: nowrap; }
.city-context-chip:hover { background: #f6fbfd; border-color: #bad9e5; }
.city-picker-backdrop[hidden] { display: none; }
.city-picker-backdrop { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 18px; background: rgba(11,37,52,.48); backdrop-filter: blur(5px); }
.city-picker-panel { width: min(520px,100%); padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.2); }
.city-picker-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.city-picker-head h2 { margin: 3px 0 0; color: #133f5b; font-size: 24px; }
.city-picker-close { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; background: #eef5f8; color: #315a70; font-size: 20px; cursor: pointer; }
.city-picker-list { display: grid; gap: 8px; }
.city-picker-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #d9e8ef; border-radius: 15px; color: #173f58; text-decoration: none; font-weight: 850; }
.city-picker-option:hover { background: #f6fbfd; border-color: #b9dbe8; }
.city-picker-open { overflow: hidden; }

.city-portal { display: grid; gap: 16px; }
.city-portal-overview { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; padding: 22px; border: 1px solid #d8e8ef; border-radius: 22px; background: linear-gradient(145deg,#fff 0%,#f6fbfe 100%); box-shadow: 0 9px 28px rgba(25,88,120,.055); }
.city-portal-overview h2 { margin: 3px 0 0; color: #123e5b; font-size: clamp(24px,4vw,34px); }
.city-portal-overview p { max-width: 620px; margin: 6px 0 0; color: #607a89; line-height: 1.5; }
.city-portal-overview .city-context-chip { flex: 0 0 auto; }

.city-service-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.city-service-card { position: relative; display: flex; min-height: 176px; flex-direction: column; padding: 17px; border: 1px solid #d8e8ef; border-radius: 19px; background: #fff; color: #173e56; text-decoration: none; box-shadow: 0 7px 22px rgba(25,88,120,.05); overflow: hidden; }
.city-service-card.is-live:hover { transform: translateY(-1px); border-color: #b7d8e5; box-shadow: 0 11px 28px rgba(25,88,120,.085); }
.city-service-card.is-unavailable { background: #f8fafb; color: #708591; box-shadow: none; }
.city-service-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 12px; border-radius: 13px; background: #f1f7fa; font-size: 23px; }
.city-service-card[data-service="electricity"] .city-service-icon { background: #fff7d9; }
.city-service-card[data-service="water"] .city-service-icon { background: #eaf8ff; }
.city-service-card[data-service="weather"] .city-service-icon { background: #f3f5ff; }
.city-service-card strong { color: inherit; font-size: 19px; line-height: 1.15; }
.city-service-card p { margin: 7px 0 12px; color: #667f8d; font-size: 12px; line-height: 1.45; }
.city-service-status { display: inline-flex; width: fit-content; align-items: center; gap: 5px; margin-top: auto; padding: 6px 9px; border-radius: 999px; background: #eef7fb; color: #26799f; font-size: 11px; font-weight: 850; }
.city-service-status.is-alert { background: #fff0ef; color: #b1433b; }
.city-service-status.is-ok { background: #edf8f1; color: #278055; }
.city-service-status.is-off { background: #edf1f3; color: #748894; }
.city-service-arrow { position: absolute; right: 15px; top: 15px; color: #2d86aa; font-size: 18px; font-weight: 900; }

.city-groups-compact { padding: 19px; }
.city-groups-compact h2 { margin: 0 0 6px; color: #19445d; font-size: 18px; }
.city-groups-compact p { margin: 0 0 13px; color: #687f8d; font-size: 13px; }
.city-news-shell { padding: 20px; }
.city-news-head { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 13px; }
.city-news-head h2 { margin: 3px 0 0; color: #173f58; font-size: 21px; }
.city-news-head p { margin: 0; color: #718794; font-size: 12px; }
.city-news-placeholder { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 13px; align-items: center; padding: 15px; border: 1px dashed #cddde4; border-radius: 16px; background: #fafcfd; }
.city-news-placeholder-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: #edf5f8; font-size: 25px; }
.city-news-placeholder strong { color: #244b61; font-size: 15px; }
.city-news-placeholder p { margin: 4px 0 0; color: #728894; font-size: 12px; line-height: 1.45; }
.city-news-badge { display: inline-flex; margin-top: 7px; padding: 4px 7px; border-radius: 999px; background: #eef2f4; color: #718590; font-size: 10px; font-weight: 850; }

@media (max-width: 900px) {
  .city-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .city-gate-main { align-items: start; padding-top: 14px; }
  .city-gate-hero { padding: 20px 16px; border-radius: 20px; }
  .city-choice-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  .city-choice-card { min-height: 0; grid-template-columns: 38px 1fr auto; grid-template-rows: 1fr; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; }
  .city-choice-card span { font-size: 22px; }
  .city-choice-card strong { font-size: 18px; }
  .city-choice-card small { font-size: 0; }
  .city-choice-card small::after { content: '→'; font-size: 20px; }
  .city-portal-overview { align-items: flex-start; padding: 17px; border-radius: 18px; }
  .city-portal-overview .city-context-chip { display: none; }
  .city-service-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .city-service-card { min-height: 142px; padding: 13px; border-radius: 16px; }
  .city-service-icon { width: 38px; height: 38px; margin-bottom: 9px; border-radius: 11px; font-size: 21px; }
  .city-service-card strong { font-size: 16px; }
  .city-service-card p { font-size: 11px; }
  .city-service-arrow { top: 12px; right: 12px; }
  .city-news-shell, .city-groups-compact { padding: 16px; }
  .city-news-head { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* === Automatic official city news === */
.city-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.city-news-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #e4edf3;border-radius:16px;background:#fff;color:inherit;text-decoration:none;min-width:0;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.city-news-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(23,68,95,.10);border-color:#cbdde8}.city-news-card-media{aspect-ratio:16/9;background:linear-gradient(135deg,#eaf7fc,#fff8dc);display:flex;align-items:center;justify-content:center;overflow:hidden}.city-news-card-media img{width:100%;height:100%;object-fit:cover;display:block}.city-news-card-fallback{font-size:40px}.city-news-card-body{padding:13px 14px 15px}.city-news-card-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;color:#667b88;margin-bottom:7px}.city-news-card-meta span{font-weight:800;color:#217da8}.city-news-card h3{font-size:16px;line-height:1.28;margin:0 0 10px}.city-news-card small{color:#71828d}.city-news-article-page{padding-top:12px;padding-bottom:34px}.city-news-article{max-width:860px;margin:0 auto}.city-news-article-media{margin:-1px -1px 18px;overflow:hidden;border-radius:16px 16px 12px 12px;aspect-ratio:16/8;background:#edf5f8}.city-news-article-media img{display:block;width:100%;height:100%;object-fit:cover}.city-news-cover-fallback{min-height:220px;margin:-1px -1px 18px;border-radius:16px 16px 12px 12px;background:linear-gradient(135deg,#e7f7fd,#fff7d7);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.city-news-cover-fallback span{font-size:60px}.city-news-article-meta{display:flex;gap:12px;flex-wrap:wrap;color:#56717e;font-size:13px;font-weight:700}.city-news-article h1{font-size:clamp(26px,4vw,42px);line-height:1.1;margin:10px 0 14px}.city-news-generated-note{padding:12px 14px;border-radius:12px;background:#f5f9fb;color:#516772}.city-news-facts{margin-top:20px}.city-news-facts ul{margin:10px 0 0;padding-left:20px}.city-news-facts li{margin:7px 0}.city-news-source-box{margin-top:22px;padding:15px;border:1px solid #e0ebf0;border-radius:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.city-news-source-box .btn{margin-left:auto}
@media(max-width:760px){.city-news-grid{grid-template-columns:1fr 1fr;gap:10px}.city-news-card-body{padding:11px 12px 13px}.city-news-card h3{font-size:14px}.city-news-card-meta{display:block}.city-news-card-meta time{display:block;margin-top:2px}.city-news-article h1{font-size:28px}.city-news-source-box .btn{width:100%;margin-left:0;text-align:center}}
@media(max-width:440px){.city-news-grid{grid-template-columns:1fr}.city-news-card{display:grid;grid-template-columns:112px 1fr}.city-news-card-media{aspect-ratio:auto;min-height:110px}.city-news-card-body{display:flex;flex-direction:column;justify-content:center}.city-news-card h3{font-size:15px}}
.city-news-card-lead{margin:0 0 10px;color:#657b87;font-size:12px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.city-news-article-lead{font-size:18px;line-height:1.55;color:#35576a;margin:0 0 18px}.city-news-facts-primary{padding:15px;border-radius:14px;background:#f6fafc}.city-news-fact-chips{display:flex;flex-wrap:wrap;gap:8px}.city-news-fact-chips span{display:inline-flex;padding:7px 10px;border:1px solid #dbe8ee;border-radius:999px;background:#fff;color:#37596b;font-weight:750;font-size:13px}.city-news-places{padding-left:0!important;list-style:none}.city-news-places li{padding:9px 11px;margin:7px 0!important;border-left:3px solid #2d8fbd;background:#f7fafc;border-radius:0 9px 9px 0}.city-news-source-summary p{color:#516b79;line-height:1.55}.city-news-source-original{font-size:13px;color:#70848f!important}