/* Compact play chrome. Loaded last so both renderer skins use one geometry. */
:root { --indicator-h: 104px; }
body, body.renderer-3d { grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px 56px minmax(0, 1fr); height: 100dvh; }
body::before { height: var(--indicator-h); border-radius: 0; }
#indicator-text, #indicator-build-icons { display: none !important; }
#indicator-menu { grid-column: 1; grid-row: 1; padding: 0 10px; padding-right: 490px; gap: 2px; }
.indicator-menu-item { min-height: 36px; padding: 10px !important; font-size: 12px; border-radius: 8px; }
#compact-status { position: fixed; z-index: 5; top: 0; left: auto; right: 0; width: 470px; height: 48px; display: grid; grid-template-columns: 1fr 1fr 1.2fr auto auto; align-items: center; gap: 12px; padding: 4px 12px; box-sizing: border-box; background: var(--ui-surface); border-bottom: 0; font-variant-numeric: tabular-nums; }
#compact-status small { display: block; font-size: 8px; letter-spacing: 1px; margin-bottom: 4px; color: var(--ui-muted); }
#compact-status strong { display: block; color: var(--ui-ink); font: 650 13px/1.1 system-ui,sans-serif; white-space: nowrap; }
#compact-status button { min-height: 36px; padding: 0 12px; background: var(--ui-ink); color: var(--ui-surface); border: 0; border-radius: 8px; font-weight: 650; cursor: pointer; }
#tool-dock { grid-row: 2; grid-column: 1; z-index: 5; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 12px; background: var(--ui-surface); border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); }
#quick-tools { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#tool-dock button, #build-palette button { font: 600 12px/1.2 system-ui,sans-serif; color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 9px; background: transparent; cursor: pointer; }
#quick-tools button { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; min-height: 44px; }
#quick-tools small { display: none; }
.tool-glyph { display: block; flex: none; width: 32px; height: 32px; border-radius: 7px; background-color: #213b39; background-image: url('../assets/govern-icons.svg'); background-repeat: no-repeat; }
#tool-dock button[aria-pressed="true"], #build-palette button[aria-pressed="true"] { background: #def1e9; color: #125b42; border-color: #2f8f6b; }
#tool-dock button:hover, #build-palette button:hover { border-color: #2f8f6b; }
#tool-dock button:focus-visible, #build-palette button:focus-visible { outline: 2px solid #2f8f6b; outline-offset: 2px; }
#build-palette-toggle { padding: 0 16px; min-height: 44px; flex: none; }
#active-tool { margin-left: auto; color: var(--ui-muted); font: 600 12px/1.2 system-ui,sans-serif; white-space: nowrap; }
#build-palette { position: fixed; top: calc(var(--indicator-h) + 8px); left: 12px; z-index: 20; width: min(580px, calc(100vw - 24px)); box-sizing: border-box; padding: 16px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 16px; box-shadow: 0 14px 40px rgba(12,35,30,.22); max-height: calc(100dvh - var(--indicator-h) - 24px); overflow-y: auto; overscroll-behavior: contain; }
#build-palette[hidden] { display: none; }
#build-palette header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#build-palette strong { display: block; font: 700 18px/1.3 system-ui,sans-serif; }
#build-palette header small { display: block; margin-top: 5px; font: 12px/1.4 system-ui,sans-serif; color: var(--ui-muted); }
#build-palette-close { min-width: 44px; height: 44px; font-size: 22px !important; }
#build-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#build-tool-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; min-height: 96px; text-align: left; overflow-wrap: anywhere; }
#build-tool-grid button small { color: var(--ui-muted); font-size: 10px; }
#build-tool-grid button:disabled { opacity: .5; cursor: default; }
#main-view-wrapper { grid-row: 3; }
@media (max-width: 1100px) {
    :root { --indicator-h: 140px; }
    body, body.renderer-3d { grid-template-rows: 84px 56px minmax(0, 1fr); }
    #compact-status { top: 0; width: 100%; height: 44px; border-bottom: 1px solid var(--ui-line); }
    #indicator-menu { align-self: end; height: 40px; padding: 0 8px; }
    #active-tool { display: none; }
}
@media (max-width: 600px) {
    #tool-dock { padding: 4px 8px; gap: 6px; }
    #quick-tools button { width: 44px; justify-content: center; padding: 4px; }
    #quick-tools button > span:not(.tool-glyph) { display: none; }
    #build-palette-toggle { padding: 0 12px; }
    #build-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #compact-status { gap: 6px; padding: 4px 8px; }
    #compact-status strong { font-size: 12px; }
    #nigeria-context { max-height: calc(100dvh - var(--indicator-h) - 110px); }
}
#tool-dock button.is-recommended, #build-palette button.is-recommended { box-shadow: inset 0 -3px #d6a13c; }
.tool-glyph { text-align: center; font-size: 22px; line-height: 32px; color: #eef6f1; }
body::before, #popup-window-back { grid-column: 1 / -1; }

#tool-dock #indicator-demands-wrapper { display: block !important; position: static; width: 78px; height: 44px; flex: none; font-size: 18px; }
@media (max-width: 600px) { #tool-dock #indicator-demands-wrapper { width: 60px; } #indicator-demands { width: 60px; } }

/* -- place names over the map (js/place-labels.js) ----------------------------------- */
/* One canvas, drawn by the script; pins are hit-tested there, not here. */
#place-labels { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
#place-labels[hidden] { display: none; }
#place-card { position: absolute; left: 0; top: 0; z-index: 6; width: min(280px, calc(100% - 16px)); box-sizing: border-box; padding: 14px 16px 16px;
    border: 1px solid #E3DDD0; border-radius: 14px; background: #FFFDF8; box-shadow: 0 14px 40px -16px rgba(18,35,63,.45); color: #12233F;
    font: 13px/1.45 "SF Pro Text", system-ui, sans-serif; }
#place-card[hidden] { display: none; }
#place-card h3 { margin: 2px 28px 6px 0; font: 700 16px/1.25 "SF Pro Text", system-ui, sans-serif; }
#place-card .place-card-area { margin: 0; color: #6B7280; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
#place-card .place-card-note { margin: 0; color: #2B3442; }
#place-card .place-card-actions:not(:empty) { margin-top: 12px; }
#place-card .place-card-actions button { width: 100%; min-height: 40px; border: 0; border-radius: 9px; background: #12233F; color: #FFFDF8;
    font: 650 13px/1.2 "SF Pro Text", system-ui, sans-serif; cursor: pointer; }
#place-card .place-card-actions button:disabled { background: #EDE8DC; color: #6B7280; cursor: default; }
#place-card .place-card-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent;
    color: #12233F; font-size: 20px; line-height: 1; cursor: pointer; }
#place-card .place-card-close:hover, #place-card .place-card-close:focus-visible { background: #EDE8DC; outline: none; }