/* v29B The Regional Affairs Office (src/ui/region_ui.js). Same plates and enamel as the rest of City Hall. */
.region-panel { width: min(1060px, 100%); max-height: 90vh; }
.rg-body { padding: 14px 16px 16px; }
.rg-wrap { display: grid; grid-template-columns: minmax(330px, 420px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .rg-wrap { grid-template-columns: 1fr; } }

/* the region map: 3 x 3 tiles with border crossings between Bossburg and its neighbors */
.rg-map { display: grid; grid-template-columns: 1fr 46px 1fr 46px 1fr; grid-template-rows: 1fr 46px 1fr 46px 1fr; aspect-ratio: 1; background: #5f6f52; padding: 6px; border-radius: 3px; border: 1px solid var(--rim); box-shadow: inset 0 0 0 2px rgba(238,240,234,0.25), 0 2px 0 var(--rim); }
.rg-gap { min-width: 0; }
.rg-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; min-width: 0; padding: 7px 8px; border: 1px solid rgba(16,23,29,0.7); border-radius: 2px; color: var(--enamel); text-align: left; font: 600 12px/1.25 var(--font); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(238,240,234,0.25); }
.rg-tile b { font-family: var(--sign); font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.rg-tile small { display: flex; align-items: center; gap: 4px; opacity: 0.85; text-transform: capitalize; }
.rg-tile small svg.i { width: 14px; height: 14px; }
.rg-tile .rg-pop { font-family: var(--signtext); font-weight: 700; font-size: 13px; }
.rg-tile.home { background: var(--cobalt); border-color: var(--cobalt-lo); box-shadow: inset 0 0 0 2px var(--cobalt), inset 0 0 0 3px rgba(238,240,234,0.5), 0 0 0 3px #f5c518; }
.rg-tile.city { cursor: pointer; }
.rg-tile.city:hover { filter: brightness(1.08); }
.rg-tile.city.sel { outline: 3px solid #f5c518; outline-offset: -1px; }
.rg-tile.commerce { background: linear-gradient(160deg, #3d6fa8, #2a507f); }
.rg-tile.industry { background: linear-gradient(160deg, #8b6b2f, #5f4a22); }
.rg-tile.residential { background: linear-gradient(160deg, #4f8c4c, #356334); }
.rg-tile.wild { color: rgba(238,240,234,0.85); }
.rg-tile.wild.forest { background: repeating-linear-gradient(135deg, #3e5a35 0 7px, #46653c 7px 14px); }
.rg-tile.wild.hills { background: repeating-radial-gradient(circle at 30% 120%, #7d7a62 0 9px, #8a876d 9px 18px); }
.rg-tile.wild.marsh { background: repeating-linear-gradient(0deg, #4f6b62 0 5px, #5d7c70 5px 9px, #4b6d78 9px 12px); }
.rg-tile.wild.farmland { background: repeating-linear-gradient(90deg, #9a8c52 0 10px, #a8995c 10px 20px, #7f8c46 20px 24px); }
.rg-mood { display: block; height: 5px; margin-top: auto; background: rgba(16,23,29,0.45); border-radius: 3px; overflow: hidden; }
.rg-mood i { display: block; height: 100%; background: #9fd36f; }
.rg-mood.ok i { background: #d9d36a; } .rg-mood.warn i { background: #f0a24a; } .rg-mood.bad i { background: #ff6a4a; }
.rg-mood-w { font-style: normal; font-size: 11px; opacity: 0.85; }
.rg-dot { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--stamp); box-shadow: 0 0 0 2px rgba(238,240,234,0.8); }
.rg-conn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; color: var(--enamel); font: 700 10px/1.1 var(--signtext); text-align: center; }
.rg-conn.h { background: linear-gradient(transparent 46%, rgba(238,240,234,0.35) 46% 54%, transparent 54%); }
.rg-conn.v { flex-direction: row; flex-wrap: wrap; background: linear-gradient(90deg, transparent 46%, rgba(238,240,234,0.35) 46% 54%, transparent 54%); }
.rg-conn.quiet { opacity: 0.6; }
.rg-conn .lks { display: grid; grid-template-columns: repeat(2, 18px); gap: 2px; padding: 2px; background: rgba(16,23,29,0.55); border-radius: 3px; }
.rg-conn.v .lks { grid-template-columns: repeat(4, 18px); }
.rg-conn .lk { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 2px; color: rgba(238,240,234,0.35); }
.rg-conn .lk.on { color: #1b242c; background: #f5c518; }
.rg-conn .lk svg.i { width: 14px; height: 14px; }
.rg-conn .cm { padding: 1px 4px; background: rgba(16,23,29,0.6); border-radius: 2px; white-space: nowrap; }
.rg-conn .tag { margin: 0; }
.rg-conn .tag.bad, .rg-goal .tag.bad { background: var(--stamp); }
.rg-legend { margin: 10px 2px 0; font-size: 12.5px; color: var(--ink-soft); }

/* the right side */
.rg-tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 2px solid var(--ink); }
.rg-tab { padding: 6px 12px 5px; border: 1px solid var(--ink); border-bottom: 0; border-radius: 3px 3px 0 0; background: transparent; color: var(--ink); font: 800 15px/1 var(--signtext); letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; }
.rg-tab.on { background: var(--ink); color: var(--enamel); }
.rg-tab i { display: inline-block; min-width: 16px; padding: 1px 4px; border-radius: 8px; background: var(--stamp); color: #fff; font-style: normal; font-size: 11px; }
.rg-nb h3 { margin: 0 0 2px; font-family: var(--sign); font-size: 26px; text-transform: uppercase; }
.rg-nb h4 { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 2px solid var(--ink); font: 800 15px/1.1 var(--signtext); letter-spacing: 0.04em; text-transform: uppercase; }
.rg-nb h4 small { font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.rg-nb-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rg-spark { margin: 0; color: var(--cobalt); text-align: right; }
.rg-spark figcaption { font-size: 10.5px; color: var(--ink-soft); }
.rg-stats { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 10px 0 0; font-size: 13.5px; }
.rg-stats dt { color: var(--ink-soft); font-weight: 700; }
.rg-stats dd { margin: 0; }
.need { color: var(--stamp); font-weight: 700; }
.spare { color: var(--green); font-weight: 700; }
.mt.good { color: var(--green); font-weight: 800; } .mt.ok { color: #8a7a12; font-weight: 800; } .mt.warn { color: #b8631b; font-weight: 800; } .mt.bad { color: var(--stamp); font-weight: 800; }
.rg-card { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; margin: 8px 0; padding: 9px 11px; background: var(--card); border: 1px solid var(--form-rule); border-left: 5px solid var(--cobalt); border-radius: 2px; font-size: 13.5px; }
.rg-card.affair { border-left-color: var(--stamp); }
.rg-card p { margin: 3px 0; }
.rg-card .acts { display: flex; gap: 6px; flex-shrink: 0; }
.rg-card .acts.col { flex-direction: column; align-items: stretch; min-width: 190px; }
.btn.small { padding: 5px 10px 6px; font-size: 14px; }
.rg-deal { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--form-rule); font-size: 13.5px; }
.rg-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.rg-offer { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; background: var(--card); border: 1px solid var(--form-rule); border-radius: 3px; color: var(--ink); text-align: left; font: 600 12.5px/1.25 var(--font); }
button.rg-offer { cursor: pointer; border-color: var(--cobalt); box-shadow: 0 2px 0 var(--cobalt-lo); }
button.rg-offer:hover { background: #fff; }
.rg-offer b { font: 800 13.5px/1.1 var(--signtext); text-transform: uppercase; letter-spacing: 0.03em; }
.rg-offer em { color: var(--stamp); font-style: normal; font-size: 11.5px; }
.rg-offer.off { opacity: 0.6; }
.rg-log { margin: 0; padding: 0; list-style: none; font-size: 12.5px; max-height: 160px; overflow: auto; }
.rg-log li { padding: 2px 0; }
.rg-log li span { display: inline-block; min-width: 40px; color: var(--ink-soft); font-weight: 700; }
.rg-goal { margin: 8px 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--form-rule); border-left: 5px solid var(--green); border-radius: 2px; font-size: 13.5px; }
.rg-goal .gh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.rg-goal .gh b { font: 800 16px/1.1 var(--signtext); text-transform: uppercase; }
.rg-goal p { margin: 4px 0; }
.rg-goal .rw { color: var(--ink-soft); }
.rg-goal .bar { height: 8px; margin: 6px 0 2px; background: var(--form-rule); border-radius: 4px; overflow: hidden; }
.rg-goal .bar i { display: block; height: 100%; background: var(--green); }
.rg-opts { margin: 8px 0; padding-left: 18px; }
.rg-opts li { margin: 3px 0; }

/* Owner-selected living terrain map. Scoped to the regional window. */
@font-face { font-family: 'Region Place'; src: url('../../assets/fonts/region-place-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Region Sign'; src: url('../../assets/fonts/region-sign-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
.region-panel { width: min(1360px, 97vw); max-height: 94vh; background:#eef1e8; }
.region-panel .panel-head { background:#345b4e; border-color:#244438; }
.region-panel #rg-title { font:800 36px/1.05 'Region Sign',var(--stencil); text-transform:none; letter-spacing:.015em; }
.region-panel .rg-body { padding:0; }
.region-panel .rg-wrap { grid-template-columns:minmax(0,1fr) 340px; gap:0; align-items:stretch; }
.region-panel .rg-left { min-width:0; background:#a8b98c; }
.region-panel .rg-right { padding:20px 24px 28px; min-width:0; background:#eef1e8; border-left:1px solid #819a7d; }
.rg-landscape { position:relative; width:100%; aspect-ratio:1000/820; isolation:isolate; }
.rg-landscape>svg { width:100%; height:100%; display:block; }
.rg-place-terrain-label { fill:#4c6953; font:700 23px 'Region Place',serif; text-anchor:middle; }
.rg-place { position:absolute; z-index:1; transform:translate(-50%,-4px); display:flex; flex-direction:column; align-items:center; padding:5px 7px; background:#eef1e8ee; border:1px solid #809576; border-radius:3px; color:#203c37; cursor:pointer; box-shadow:0 2px 2px #3a503126; line-height:1.1; }
.rg-place b { font:700 clamp(12px,1.45vw,21px)/1.05 'Region Place',serif; overflow-wrap:anywhere; }
.rg-place span { font:500 clamp(9px,.86vw,12px)/1.25 var(--font); }
.rg-place.selected { background:#fff0b4; border-color:#a27b27; box-shadow:0 0 0 2px #e9bc4b; }
.rg-place.home { border:2px solid #496e59; }
.rg-place:hover { background:#fff8d8; }
.rg-place:focus-visible { outline:3px solid #234b93; outline-offset:4px; }
.rg-place-links { display:flex; gap:3px; margin-top:4px; }
.rg-place-links i { font-style:normal; color:#6a7868; background:#d4dbcd; padding:2px 4px; border-radius:2px; font-size:9px; }
.rg-place-links i.connected { background:#345b4e; color:#fff; }
.rg-home-boundary { position:absolute; left:35%; top:34.5%; padding:2px 5px; background:#f5edc9; color:#3c5b45; font:600 10px var(--font); pointer-events:none; }
.region-panel .rg-legend { font:400 11px/1.5 var(--font); color:#324d37; padding:8px 18px 12px; margin:0; background:#c4cfac; }
.region-panel .rg-tabs { border-bottom:1px solid #a9b9a1; margin-bottom:26px; gap:16px; }
.region-panel .rg-tab { font:600 12px/1.2 var(--font); text-transform:none; letter-spacing:0; border:0; border-radius:0; padding:10px 0; background:transparent; color:#405d4a; }
.region-panel .rg-tab.on { color:#203c37; box-shadow:0 2px 0 #345b4e; }
.region-panel .rg-nb h3 { font:700 36px/1.02 'Region Place',serif; text-transform:none; letter-spacing:-.025em; margin:6px 0 12px; color:#203c37; overflow-wrap:anywhere; }
.rg-kicker { font:600 12px/1.3 var(--font); color:#526c59; }
.rg-census { display:flex; align-items:baseline; gap:9px; margin:22px 0 15px; }
.rg-census b { font:700 30px/1 var(--signtext); color:#203c37; }
.rg-census span { font-size:12px; color:#536c58; }
.region-panel .rg-stats { font-size:12px; gap:9px 12px; grid-template-columns:minmax(0,85px) minmax(0,1fr); }
.region-panel .rg-stats dd { overflow-wrap:anywhere; }
.region-panel .rg-services { border-block:1px solid #bdc9b5; padding:17px 0; }
.region-panel .rg-nb h4 { font:700 15px/1.2 var(--font); text-transform:none; letter-spacing:0; border-bottom:1px solid #bdc9b5; }
.rg-review-trades,.rg-city-details { margin-top:22px; }
.region-panel summary { font:600 13px/1.3 var(--font); cursor:pointer; padding:10px 0; }
.region-panel .rg-review-trades>summary { list-style:inside; padding:13px 16px; background:#345b4e; color:white; border-radius:3px; }
.region-panel .rg-trade-terms { font:400 11px/1.5 var(--font); }
.region-panel .rg-offers { grid-template-columns:1fr; }
.region-panel .rg-offer { font-size:12px; }
.region-panel .rg-offer b { font:700 13px/1.2 var(--font); text-transform:none; letter-spacing:0; }
.region-panel .rg-spark { margin:15px 0; text-align:left; }
.region-panel .rg-card { flex-direction:column; font-size:12px; }
.region-panel .rg-card .acts.col { min-width:0; width:100%; }
.rg-place-note { font-size:13px; line-height:1.6; color:#526c59; }
@media(max-width:900px) { .region-panel .rg-wrap { grid-template-columns:minmax(0,1fr) 285px; } .region-panel .rg-right { padding:18px; } .region-panel .rg-nb h3 { font-size:30px; } }
@media(max-width:680px) { .region-panel { width:98vw; max-height:94vh; } .region-panel .rg-wrap { grid-template-columns:1fr; } .region-panel .rg-right { border-left:0; border-top:1px solid #819a7d; } .rg-place b { font-size:clamp(12px,3.4vw,20px); } .rg-place span { font-size:clamp(9px,2.2vw,12px); } .rg-place-links { gap:2px; } .rg-place-links i { padding:1px 2px; font-size:8px; } .rg-home-boundary { font-size:8px; } .rg-place-terrain-label { font-size:25px; } }
.rg-waiting { display:block; margin-bottom:4px; padding:3px 6px; border-radius:3px; background:#b8352b; color:#fff; font:600 10px/1.2 var(--font); font-style:normal; }
@media(max-width:680px) {
  .rg-landscape { aspect-ratio:1000/1040; }
  .rg-landscape>svg { position:absolute; inset:0; height:auto; }
  .rg-place[data-region-place="fernwood"] { top:24%!important; }
  .rg-place[data-region-place="home"],.rg-place[data-region-place="crane"],.rg-place[data-region-place="pettibone"] { top:49%!important; }
  .rg-place[data-region-place="bottomland"] { top:76%!important; width:38%!important; }
  .rg-home-boundary { top:27%; }
}