/* Approved City List ledger. Scoped to its dialog; map art stays lazy loaded. */
#modal.city-list-modal {
  --cll-paper:#f2e8cd; --cll-ink:#302c22; --cll-muted:#625b49; --cll-rule:#b8a684; --cll-moss:#485839;
  color-scheme:light; width:min(1040px,calc(100vw - 24px)); height:min(790px,calc(100dvh - 24px));
  max-width:none; max-height:none; min-height:0; padding:5px; inset:0; margin:auto; overflow:hidden;
  border:1px solid #766346!important; border-radius:2px!important; background:var(--cll-paper)!important; color:var(--cll-ink)!important;
  box-shadow:inset 0 0 0 3px #d6c49e,inset 0 0 0 4px #a99876,0 12px 36px #10180866!important;
}
#modal.city-list-modal::backdrop { background:#25291944!important; }
#modal.city-list-modal .modal-card {
  display:flex; flex-direction:column; width:100%; height:100%; min-height:0; max-height:none;
  margin:0; padding:0; overflow:hidden; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important;
}
#modal.city-list-modal #modalTitle { position:absolute; width:1px; height:1px; padding:0!important; margin:-1px!important; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0!important; }
#modal.city-list-modal #closeModalBtn { top:8px; right:7px; width:44px; height:44px; min-height:44px; padding:11px; border:0!important; border-radius:0!important; color:var(--cll-ink)!important; background:transparent!important; box-shadow:none!important; }
#modal.city-list-modal #modalBody { flex:1; display:flex; flex-direction:column; min-height:0; max-height:none; overflow:hidden; padding:0; margin:0; color:var(--cll-ink)!important; font:14px/1.4 "Segoe UI",Arial,sans-serif; }
#modal.city-list-modal .city-list-panel { container:city-ledger/inline-size; display:flex; flex:1; flex-direction:column; min-height:0; gap:0; overflow:hidden; }
#modal.city-list-modal .city-list-panel * { box-sizing:border-box; text-shadow:none!important; }
#modal.city-list-modal .city-list-panel button { min-height:44px; color:var(--cll-ink)!important; background:transparent!important; border:1px solid var(--cll-rule)!important; border-radius:2px!important; box-shadow:none!important; font:12px/1.3 "Segoe UI",Arial,sans-serif; letter-spacing:normal; text-transform:none; cursor:pointer; }
#modal.city-list-modal .city-list-panel button:hover:not(:disabled) { background:#dfcda1!important; }
#modal.city-list-modal .city-list-panel button:disabled { opacity:.55; cursor:default; }
#modal.city-list-modal :focus-visible { outline:2px solid #486b78; outline-offset:-2px; }
#modal.city-list-modal .cll-header { display:grid; grid-template-columns:1fr auto; flex:none; align-items:center; gap:12px; padding:20px 64px 14px 24px; border-bottom:1px solid var(--cll-rule); background:linear-gradient(100deg,#e4d4aa55,transparent); }
#modal.city-list-modal .cll-eyebrow { margin:0 0 3px; color:#806b43!important; font:10px Georgia,serif; text-transform:uppercase; letter-spacing:1.6px; }
#modal.city-list-modal .cll-header h3 { margin:0; font:30px/1.1 Georgia,serif; color:var(--cll-ink)!important; }
#modal.city-list-modal .cll-treasury { display:flex; align-items:center; gap:10px; }
#modal.city-list-modal .cll-treasury>.cd-icon { width:32px; height:32px; color:#806a3f; }
#modal.city-list-modal .cll-treasury>div { display:flex; flex-direction:column; }
#modal.city-list-modal .cll-treasury span { color:var(--cll-muted); font-size:11px; }
#modal.city-list-modal .cll-treasury strong { font:25px Georgia,serif; font-variant-numeric:tabular-nums; }
#modal.city-list-modal .cll-summary { grid-column:1/-1; margin:0; color:var(--cll-muted)!important; font-size:12px; }
#modal.city-list-modal .cll-summary strong { color:var(--cll-ink); font-weight:600; }
#modal.city-list-modal .cll-summary i { margin:0 9px; font-style:normal; }
#modal.city-list-modal .cll-toolbar { display:flex; align-items:center; flex:none; gap:8px; padding:8px 24px; }
#modal.city-list-modal .cll-toolbar button { display:flex; align-items:center; gap:10px; padding:0 12px; }
#modal.city-list-modal .cll-toolbar button[aria-pressed=true] { color:#fff8e5!important; background:var(--cll-moss)!important; border-color:var(--cll-moss)!important; }
#modal.city-list-modal .cll-toolbar button[aria-pressed=true]:hover { background:#3b492e!important; }
#modal.city-list-modal .cll-toolbar button :is(span,small) { color:inherit!important; }
#modal.city-list-modal .cll-sort-caption,#modal.city-list-modal .cll-page-caption { color:var(--cll-muted); font-size:11px; }
#modal.city-list-modal .cll-page-caption { margin-left:auto; }
#modal.city-list-modal .cll-columns,#modal.city-list-modal .city-list-row { display:grid; grid-template-columns:minmax(180px,1fr) 52px 106px 145px 222px; column-gap:14px; align-items:center; }
#modal.city-list-modal .cll-columns { flex:none; margin:0 24px; padding:8px 0; border-block:1px solid #c9b993; color:var(--cll-muted); font-size:10px; text-transform:uppercase; letter-spacing:.6px; }
#modal.city-list-modal .city-list-rows { flex:1; display:block; min-height:0; overflow:auto; padding:0 24px; scrollbar-width:thin; scrollbar-color:#a59470 transparent; overscroll-behavior:contain; }
#modal.city-list-modal .city-list-row { min-height:103px; padding:12px 0; margin:0; border:0!important; border-bottom:1px solid #c8b99799!important; border-radius:0!important; color:var(--cll-ink)!important; background:transparent!important; box-shadow:none!important; }
#modal.city-list-modal .city-list-row:last-child { border-bottom:0!important; }
#modal.city-list-modal .cll-identity { display:flex; align-items:center; gap:9px; min-width:0; }
#modal.city-list-modal .cll-identity img { width:67px; height:64px; flex:none; object-fit:contain; }
#modal.city-list-modal .cll-identity>div { min-width:0; }
#modal.city-list-modal .cll-identity .cll-name { display:block; width:auto; min-width:0; height:auto; padding:3px 0; border:0!important; text-align:left; font:18px/1.15 Georgia,serif; overflow-wrap:anywhere; }
#modal.city-list-modal .cll-name:hover { text-decoration:underline; text-underline-offset:3px; }
#modal.city-list-modal .cll-identity small { display:block; font-size:10px; color:var(--cll-muted); margin-top:1px; }
#modal.city-list-modal .cll-seal { color:var(--cll-moss); text-transform:uppercase; letter-spacing:.8px; font-size:9px; font-weight:700; }
#modal.city-list-modal .cll-seal .cd-icon { width:11px; height:11px; vertical-align:-2px; }
#modal.city-list-modal .cll-level { font:22px Georgia,serif; font-variant-numeric:tabular-nums; }
#modal.city-list-modal .cll-level small { display:none; }
#modal.city-list-modal .cll-garrison { min-width:0; font-size:14px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#modal.city-list-modal .cll-garrison small { display:block; margin-top:4px; color:var(--cll-muted); font-size:10px; }
#modal.city-list-modal .cll-production { display:flex; flex-direction:column; gap:6px; font-size:12px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#modal.city-list-modal .cll-production>span { display:flex; align-items:center; gap:7px; }
#modal.city-list-modal .cll-production .cd-icon { width:17px; height:17px; color:#736345; }
#modal.city-list-modal .cll-production small { font-size:10px; color:var(--cll-muted); }
#modal.city-list-modal .city-list-actions { display:block; grid-column:auto; grid-row:auto; min-width:0; width:auto; padding:0; }
#modal.city-list-modal .cll-upgrades { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 44px; gap:5px; }
#modal.city-list-modal .city-list-upgrade { width:auto; min-width:0; height:auto; padding:5px 2px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; background:#e7d9b44d!important; }
#modal.city-list-modal .city-list-upgrade strong { font-size:12px; font-weight:600; color:inherit!important; }
#modal.city-list-modal .city-list-upgrade small { font-size:10px; font-variant-numeric:tabular-nums; color:var(--cll-muted)!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#modal.city-list-modal .cll-upgrades .cll-locate { width:44px; padding:10px; background:transparent!important; border-color:transparent!important; }
#modal.city-list-modal .cll-locate svg { width:22px; height:22px; fill:none; stroke:var(--cll-moss); stroke-width:1.5; }
#modal.city-list-modal .city-list-upgrade-result { display:block; margin-top:5px; color:var(--cll-moss)!important; font-size:10px; white-space:normal; }
#modal.city-list-modal .upgrade-syncing .city-list-upgrade-result { color:#49666e!important; }
#modal.city-list-modal .cll-no-upgrade { grid-column:1/4; align-self:center; color:var(--cll-muted); font-size:11px; font-style:italic; }
#modal.city-list-modal .stronghold-city-row .cll-level { font-size:14px; color:var(--cll-muted); }
#modal.city-list-modal .cll-footer { flex:none; padding:8px 24px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--cll-rule); background:#e4d4aa44; }
#modal.city-list-modal .cll-footer p { margin:0; color:var(--cll-muted)!important; font-size:11px; }
#modal.city-list-modal .cll-pagination { display:flex; align-items:center; gap:12px; }
#modal.city-list-modal .cll-pagination button { width:44px; padding:10px; border-color:transparent!important; }
#modal.city-list-modal .cll-pagination span { font:14px Georgia,serif; }
#modal.city-list-modal .cll-notice { flex:none; margin:0 24px 8px; padding:8px 10px; background:#dfcca94d; border-left:2px solid #957343; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#665231; font-size:12px; }
#modal.city-list-modal .cll-notices { flex:none; }
#modal.city-list-modal .cll-notice button { padding:0 12px; }
#modal.city-list-modal .cll-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:180px; height:100%; text-align:center; color:var(--cll-muted); }
#modal.city-list-modal .cll-empty>.cd-icon { width:64px; height:64px; opacity:.65; }
#modal.city-list-modal .cll-empty h3 { font:23px Georgia,serif; color:var(--cll-ink); margin:18px 0 0; }
#modal.city-list-modal .cll-empty p { font-size:13px; max-width:260px; }
#modal.city-list-modal .cd-icon { display:inline-flex; flex:none; width:21px; height:21px; color:inherit; }
#modal.city-list-modal .cd-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#modal.city-list-modal .engraving-surface { fill:#c3ae73; }
#modal.city-list-modal .engraving-shadow { fill:#998348; stroke:none; }
#modal.city-list-modal .engraving-ink { fill:currentColor; stroke-width:.5; }
#modal.city-list-modal .engraving-detail { stroke-width:1.1; }
@container city-ledger (max-width:850px) {
  #modal.city-list-modal .cll-header { padding:16px 56px 12px 16px; gap:12px 8px; }
  #modal.city-list-modal .cll-header h3 { font-size:27px; }
  #modal.city-list-modal .cll-treasury strong { font-size:21px; }
  #modal.city-list-modal .cll-treasury>.cd-icon { display:none; }
  #modal.city-list-modal .cll-toolbar { padding:8px 16px; }
  #modal.city-list-modal .cll-sort-caption,#modal.city-list-modal .cll-page-caption,#modal.city-list-modal .cll-columns { display:none; }
  #modal.city-list-modal .cll-toolbar button { flex:1; justify-content:space-between; }
  #modal.city-list-modal .cll-summary { font-size:11px; line-height:1.6; }
  #modal.city-list-modal .cll-summary i { margin:0 4px; }
  #modal.city-list-modal .city-list-rows { padding:0 16px; border-top:1px solid #c9b993; }
  #modal.city-list-modal .city-list-row { grid-template-columns:minmax(0,1fr) 132px; gap:12px 14px; padding:16px 0; }
  #modal.city-list-modal .cll-identity { grid-column:1/-1; grid-row:1; padding-right:60px; min-height:66px; }
  #modal.city-list-modal .cll-level { grid-column:2; grid-row:1; justify-self:end; text-align:center; }
  #modal.city-list-modal .cll-level small { display:block; font:9px "Segoe UI",sans-serif; text-transform:uppercase; color:var(--cll-muted); margin-bottom:4px; }
  #modal.city-list-modal .cll-garrison { grid-column:1; grid-row:2; font-size:18px; }
  #modal.city-list-modal .cll-production { grid-column:2; grid-row:2; }
  #modal.city-list-modal .city-list-actions { grid-column:1/-1; grid-row:3; }
  #modal.city-list-modal .city-list-upgrade { min-height:48px; }
  #modal.city-list-modal .cll-footer { padding:8px 12px; }
  #modal.city-list-modal .cll-pagination { gap:5px; }
  #modal.city-list-modal .cll-notice { margin:0 16px 8px; }
}
@media (max-height:480px) {
  #modal.city-list-modal .cll-header { padding-block:8px; }
  #modal.city-list-modal .cll-eyebrow,#modal.city-list-modal .cll-summary { display:none; }
  #modal.city-list-modal .cll-header h3 { font-size:24px; }
  #modal.city-list-modal .cll-toolbar { padding-block:4px; }
  #modal.city-list-modal .cll-footer { padding-block:2px; }
}

/* Approved compact City List arrangement. */
/* Tighten the existing desktop row without removing any fields. */
#modal.city-list-modal .city-list-row { min-height:78px; padding:7px 0; }
#modal.city-list-modal .cll-identity { gap:7px; }
#modal.city-list-modal .cll-identity img { width:52px; height:50px; }
#modal.city-list-modal .cll-identity .cll-name { grid-area:1/1/3/-1; display:flex; align-items:flex-start; width:100%; padding:3px 0 18px; font-size:17px; }
/* The compact row also fits a landscape phone without its former three tiers. */
@media (min-width:701px) and (max-width:900px) {
 #modal.city-list-modal .city-list-row { grid-template-columns:minmax(150px,1fr) 35px 82px 125px 192px; gap:9px; }
 #modal.city-list-modal .cll-identity { display:flex; grid-column:auto; grid-row:auto; padding:0; min-height:0; }
 #modal.city-list-modal :is(.cll-level,.cll-garrison,.cll-production,.city-list-actions) { grid-column:auto; grid-row:auto; }
 #modal.city-list-modal .cll-garrison { font-size:13px; }
 #modal.city-list-modal .cll-identity .cll-name { font-size:15px; }
 #modal.city-list-modal .cll-identity img { width:42px; height:44px; }
 #modal.city-list-modal .city-list-upgrade { min-height:44px; }
}
@media (max-width:700px) {
 #modal.city-list-modal .city-list-rows { padding:0 12px; }
 #modal.city-list-modal .city-list-row { grid-template-columns:78px 78px minmax(0,1fr); gap:6px 8px; padding:8px 0; }
 #modal.city-list-modal .cll-identity { display:contents; }
 #modal.city-list-modal .cll-identity>div { grid-column:1/-1; grid-row:1; min-width:0; }
 #modal.city-list-modal .cll-identity img { grid-column:1; grid-row:2; width:43px; height:46px; align-self:center; }
 #modal.city-list-modal .cll-level { grid-column:1; grid-row:2; justify-self:end; align-self:center; font-size:20px; text-align:center; }
 #modal.city-list-modal .cll-level small { display:block; font:9px "Segoe UI",sans-serif; margin-bottom:3px; }
 #modal.city-list-modal .cll-garrison { grid-column:2; grid-row:2; padding:0; font-size:14px; }
 #modal.city-list-modal .cll-garrison small { font-size:10px; line-height:1.3; }
 #modal.city-list-modal .cll-production { grid-column:3; grid-row:2; font-size:12px; gap:5px; }
 #modal.city-list-modal .cll-production>span { gap:4px; }
 #modal.city-list-modal .cll-production .cd-icon { width:15px; height:15px; }
 #modal.city-list-modal .city-list-actions { grid-column:1/-1; grid-row:3; }
 #modal.city-list-modal .city-list-panel .city-list-upgrade { min-height:44px; padding:4px 2px; }
}

/* Share the name button's lower band with the existing location and seal.
   The button keeps its full touch area; metadata stays in the original DOM. */
#modal.city-list-modal .cll-identity>div { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:minmax(26px,auto) auto; column-gap:7px; flex:1; }
#modal.city-list-modal .cll-identity>div>small { grid-area:2/1; align-self:end; z-index:1; pointer-events:none; margin:0; font:10px/1.5 "Segoe UI",Arial,sans-serif; }
#modal.city-list-modal .cll-identity>div>.cll-seal { grid-area:2/2; align-self:end; z-index:1; pointer-events:none; font-size:9px; }
@media (max-width:350px) {
 #modal.city-list-modal .city-list-row { grid-template-columns:70px 67px minmax(0,1fr); gap:6px; }
}