/* City Pulse owns its dialog, navigation and map legend. Theme colors come from shared tokens. */
#living-city-overlay {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--material-scrim,rgb(0 0 0 / 38%));
}
#living-city-overlay.hidden { display: none; }
.lc-shell {
  box-sizing: border-box;
  width: min(1160px, 100%);
  height: min(800px, calc(100dvh - 40px));
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  background: var(--material-panel,var(--ui-surface));
  -webkit-backdrop-filter: var(--material-blur,none);
  backdrop-filter: var(--material-blur,none);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-optical-sizing: auto;
}
.lc-side { padding: 28px 16px 20px; display: flex; flex-direction: column; border-right: 1px solid var(--ui-line); background: var(--ui-canvas); min-width: 0; }
.lc-side h1 { margin: 0 12px 30px; font-size: 22px; font-weight: 650; letter-spacing: -.025em; }
.lc-tabs { display: flex; flex-direction: column; gap: 6px; }
#living-city-overlay button, #living-city-overlay input { box-sizing: border-box; font: inherit; }
#living-city-overlay button { cursor: pointer; min-height: 44px; touch-action: manipulation; }
#living-city-overlay .lc-tab { border: 0; border-radius: 10px; padding: 10px 12px; text-align: left; background: transparent; color: var(--ui-muted); white-space: nowrap; }
#living-city-overlay .lc-tab[aria-selected="true"] { background: var(--ui-selection-fill, var(--ui-field)); color: var(--ui-text); font-weight: 650; }
#living-city-overlay button:disabled { opacity: .48; cursor: default; }
@media (hover: hover) and (pointer: fine) {
#living-city-overlay button:not(:disabled):hover { background: var(--ui-hover); }
}
#living-city-overlay :focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.lc-model-note { margin: auto 12px 0; padding-top: 32px; font-size: 11px; color: var(--ui-muted); }
.lc-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.lc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 28px; border-bottom: 1px solid var(--ui-line); }
.lc-head h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.lc-head-actions { display: flex; align-items: center; gap: 8px; }
#living-city-overlay .lc-action, #living-city-overlay .lc-close {
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--ui-text);
  background: var(--ui-field);
  box-shadow: none;
}
#living-city-overlay .lc-close { width: 44px; padding: 0; font-size: 22px; border-radius: 50%; }
.lc-content { box-sizing: border-box; width: 100%; min-width: 0; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 26px 28px; overscroll-behavior: contain; }
.lc-content h3 { font-size: 16px; font-weight: 650; margin: 0 0 18px; letter-spacing: -.01em; }
.lc-content p { margin: 0; color: var(--ui-muted); }
.lc-feedback { margin: 0; padding: 10px 28px; border-top: 1px solid var(--ui-line); color: var(--ui-muted); font-size: 12px; }
.lc-feedback:empty { display: none; }
.lc-intro { margin-bottom: 24px; font-size: 12px; }
.lc-content .lc-intro { margin-bottom: 24px; }
.lc-status { margin-bottom: 26px; }
.lc-status > span { display: block; color: var(--ui-muted); font-size: 12px; }
.lc-status strong { font-size: 30px; font-weight: 650; letter-spacing: -.025em; }
.lc-status p { margin-top: 4px; }
.lc-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.lc-metrics span { display: block; font-size: 12px; color: var(--ui-muted); }
.lc-metrics b { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lc-metrics small, .lc-campaign strong small { font-size: 12px; font-weight: 400; color: var(--ui-muted); margin-left: 4px; }
.lc-totals { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 24px; color: var(--ui-muted); }
.lc-totals b { color: var(--ui-text); font-weight: 600; margin-left: 6px; }
.lc-section + .lc-section, .lc-overview + .lc-section, .lc-campaigns + .lc-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ui-line); }
.lc-line { display: grid; grid-template-columns: minmax(0,1fr) minmax(100px,1fr); align-items: center; gap: 24px; padding: 12px 0; }
.lc-line b { font-weight: 600; overflow-wrap: anywhere; }
.lc-line small { display: block; color: var(--ui-muted); font-size: 12px; margin-top: 4px; }
.lc-line > div:last-child small { text-align: right; }
.lc-meter { height: 6px; border-radius: 5px; overflow: hidden; background: var(--ui-line); }
.lc-meter i { display: block; height: 100%; border-radius: inherit; }
.lc-event { display: flex; gap: 12px; padding: 10px 0; font-size: 12px; }
.lc-event time { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.lc-search { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.lc-search label { font-weight: 600; white-space: nowrap; }
#living-city-overlay .lc-search input { min-width: 0; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-field); color: var(--ui-text); }
.lc-growth-row { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 156px; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--ui-line); align-items: center; }
.lc-station-name h3 { margin: 0 0 4px; }
.lc-station-name p { font-size: 12px; overflow-wrap: anywhere; }
.lc-growth-values { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; color: var(--ui-muted); }
.lc-growth-values b { color: var(--ui-text); font-weight: 600; }
.lc-growth-values .lc-meter { flex-basis: 100%; }
.lc-growth-action { display: grid; gap: 6px; text-align: center; font-size: 12px; color: var(--ui-muted); }
.lc-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 18px; }
.lc-pagination span { margin-right: auto; color: var(--ui-muted); font-size: 12px; }
.lc-empty { padding: 32px 0; }
.lc-people-head, .lc-persona { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.lc-people-head { color: var(--ui-muted); font-size: 12px; padding-bottom: 12px; }
.lc-persona { padding: 20px 0; border-top: 1px solid var(--ui-line); }
.lc-persona b { font-weight: 600; }
.lc-persona span { display: block; font-size: 12px; color: var(--ui-muted); margin: 6px 0 12px; }
.lc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.lc-segments { display: flex; height: 12px; border-radius: 5px; overflow: hidden; background: var(--ui-line); }
.lc-segments i { display: block; height: 100%; }
.lc-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; color: var(--ui-muted); font-size: 12px; padding-top: 16px; }
.lc-recommendation { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--ui-line); }
.lc-recommendation h4 { margin: 0 0 6px; font-size: 14px; font-weight: 650; }
.lc-recommendation p { font-size: 12px; }
.lc-recommendation button { flex-shrink: 0; max-width: 40%; }
.lc-campaigns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.lc-campaign { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--ui-line); border-radius: 16px; min-width: 0; }
.lc-campaign h3 { margin: 0; }
.lc-campaign strong { font-size: 30px; font-weight: 600; }
.lc-campaign p, .lc-campaign > span { font-size: 12px; color: var(--ui-muted); }
.lc-campaign .lc-action { margin-top: auto; }
#cityrail-living-growth-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 645; pointer-events: none; }
#cityrail-living-map-legend { position: fixed; right: 18px; bottom: 60px; z-index: 1600; box-sizing: border-box; width: min(320px,calc(100vw - 36px)); border: 1px solid var(--ui-line); border-radius: 16px; padding: 16px; background: var(--material-panel,var(--ui-surface)); -webkit-backdrop-filter: var(--material-blur,none); backdrop-filter: var(--material-blur,none); color: var(--ui-text); box-shadow: var(--ui-shadow); font: 12px/1.5 system-ui,sans-serif; }
#cityrail-living-map-legend.hidden { display: none; }
.lc-map-title { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.lc-map-title button { min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: var(--ui-field); color: var(--ui-text); cursor: pointer; }
.lc-map-key { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.lc-map-key div { display: flex; align-items: center; gap: 7px; }
.lc-map-key i { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--key-color); }
.lc-map-note { margin-top: 12px; color: var(--ui-muted); }
@media (max-width: 760px) {
  #living-city-overlay { padding: 8px; }
  .lc-shell { height: calc(100dvh - 16px); grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); border-radius: 18px; }
  .lc-side { padding: 18px 14px 10px; border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .lc-side h1 { margin: 0 4px 12px; font-size: 20px; }
  .lc-tabs { flex-direction: row; overflow-x: auto; padding: 2px; }
  #living-city-overlay .lc-tab { flex: 0 0 auto; padding-inline: 12px; }
  .lc-model-note { display: none; }
  .lc-head { padding: 14px 16px; gap: 6px; }
  .lc-head h2 { font-size: 17px; }
  .lc-head-actions { gap: 6px; }
  .lc-content { padding: 20px 16px; }
  .lc-feedback { padding: 10px 16px; }
  .lc-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .lc-growth-row { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .lc-growth-action { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .lc-growth-action button { max-width:70%; }
  .lc-station-name { grid-column: 1/-1; }
  .lc-people-head, .lc-persona { gap: 16px; }
  .lc-campaigns { grid-template-columns: minmax(0,1fr); }
  .lc-campaign { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; }
  .lc-campaign h3, .lc-campaign p, .lc-campaign .lc-meter, .lc-campaign > span { grid-column: 1/-1; }
  #living-city-overlay .lc-search input { font-size: 16px; }
}