#area-dialog { position:fixed;inset:76px auto auto max(26px,calc((100vw - 1220px)/2 + 243px));width:min(600px,calc(100vw - 52px));height:min(790px,calc(100dvh - 96px));max-width:none;max-height:none;margin:0;padding:0;border:1px solid var(--gg-border);border-radius:var(--gg-radius);background:var(--gg-surface);color:var(--gg-text-1);box-shadow:var(--gg-shadow-pop);overflow:hidden; }
#area-dialog::backdrop { background:rgba(0,0,0,.25); }
#area-form { height:100%;display:flex;flex-direction:column;padding:0 12px;min-height:0; }
.area-dialog-head { display:flex;align-items:center;gap:8px;padding:12px 0;flex:none; }
.area-dialog-head h2 { font-size:20px;margin:0 auto 0 0; }
.area-dialog-head button { min-height:36px;padding:6px 12px; }
.area-dialog-head [data-area-close] { width:36px;padding:0; }
#area-query { height:36px;min-height:36px;padding:0 12px;background:var(--gg-bg-hero);flex:none;font-size:14px; }
.area-selection { display:flex;align-items:center;gap:6px;height:36px;min-height:36px;padding:4px 0;font-size:12.5px;color:var(--gg-text-3); }
.area-selection span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.area-selection button { min-height:28px;padding:0 6px;background:transparent;border:0;color:var(--gg-link);font-size:12.5px; }
.area-status { height:36px;min-height:36px;font-size:12px;line-height:18px;margin:0 0 6px; }
.area-options { overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0;flex:1; }
.area-columns { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.area-columns h3 { font:500 10px/1.5 var(--gg-font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--gg-text-3);padding:10px 8px 4px;margin:0; }
.area-grid { display:grid;grid-template-columns:1fr 1fr;gap:2px; }
.area-option { display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;text-align:left;padding:8px 10px;border:0;background:transparent;gap:2px;min-height:44px;font-size:13.5px;line-height:1.25;overflow-wrap:anywhere; }
.area-option small { font-size:10px;font-weight:400; }
.area-option[aria-pressed=true] { background:var(--gg-surface-3);box-shadow:inset 3px 0 var(--gg-success); }
.area-option[aria-pressed=true]>span:before { content:'✓ ';color:var(--gg-success); }
.area-regions { border-left:1px solid var(--gg-border);padding-left:8px;min-width:0; }
.area-state-tabs { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:0 6px 8px; }
.area-state-tabs button { min-height:28px;padding:0 6px;font-size:11.5px; }
.area-state-tabs [aria-pressed=true] { color:var(--gg-bg);background:var(--gg-text-1); }
.area-dialog-foot { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0;border-top:1px solid var(--gg-border);flex:none;font-size:13px; }
.area-dialog-foot a { text-decoration:none; }
.location-field:has(.area-browse-trigger:not([hidden])) input { padding-right:62px; }
body:has(#area-dialog[open]) { overflow:hidden; }
body:has(#area-dialog[open]) .mobile-nav { visibility:hidden; }
@media(max-width:999px) { #area-dialog { left:26px;right:26px;width:auto; } .area-state-tabs button,.area-dialog-head button,.area-selection button { min-height:44px; } .area-selection { height:48px;min-height:48px; } #area-query { min-height:44px; } }
@media(max-width:559px) { #area-dialog { inset:0;width:100%;height:100dvh;border-radius:0;border:0; } #area-form { padding:0 16px env(safe-area-inset-bottom); } .area-columns { grid-template-columns:1fr; } .area-regions { padding-left:0;border-left:0;border-top:1px solid var(--gg-border); } .area-status { height:42px;min-height:42px; } .area-dialog-foot { min-height:56px; } }

.area-dialog-head button:disabled { opacity:.45;cursor:default; }

.area-dialog-foot .area-done { flex:none;min-width:76px;min-height:44px;background:var(--gg-primary);border-color:var(--gg-primary);color:var(--gg-on-light); }
@media(hover:hover) and (pointer:fine) {
 .area-dialog-foot .area-done:hover { background:var(--gg-primary-hover); }
}


/* Both entry points share the same responsive area chooser. */

.area-selection [data-area-clear] { flex:none;white-space:nowrap;margin-left:auto; }
.area-selection [data-area-clear]:disabled { opacity:.45;cursor:default; }
.area-draft-help { flex:none;margin:4px 0 8px;font-size:12px;line-height:1.4;color:var(--gg-text-3); }

/* Keep independent desktop lists within the chooser; phones have one scroll surface. */
.area-options:has(.area-columns) { overflow:hidden;scrollbar-gutter:auto; }
.area-columns { height:100%;min-height:0; }
.area-primary-list,.area-region-list { overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0; }
.area-regions { display:flex;flex-direction:column;min-height:0; }
.area-region-head { flex:none;background:var(--gg-surface);z-index:1; }
.area-region-list { flex:1; }
.area-status { height:32px;min-height:32px;margin:0;line-height:16px;flex:none; }
.area-draft-help { margin:0;font-size:12px; }
@media(max-width:699px) {
    .area-options:has(.area-columns) { overflow:auto;scrollbar-gutter:stable; }
    .area-columns { display:block;height:auto; }
    .area-primary-list,.area-region-list { overflow:visible;scrollbar-gutter:auto; }
    .area-regions { display:block;padding-left:0;border-left:0;border-top:1px solid var(--gg-border); }
    .area-region-head { position:sticky;top:0; }
    .area-state-tabs { grid-template-columns:repeat(5,minmax(0,1fr));padding-left:0;padding-right:0; }
    .area-dialog-head { padding:8px 0; }
    .area-dialog-foot { padding:8px 0;min-height:44px; }
}

/* A compact canonical-place combobox beside the multi-area chooser. */
.location-suggestions { position:fixed;inset:auto;margin:0;padding:0;background:var(--gg-bg-hero);color:var(--gg-text-1);border:1px solid var(--gg-border);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow-pop);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable; }
.location-suggestion-status { margin:0;padding:12px 14px;font-size:13px;line-height:1.4;color:var(--gg-text-2);border-bottom:1px solid var(--gg-border); }
.location-suggestion { display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:56px;padding:10px 14px;border:0;border-radius:0;background:transparent;text-align:left;color:var(--gg-text-1);overflow-wrap:anywhere; }
.location-suggestion strong { font-size:15px;line-height:1.35; }
.location-suggestion span { font-size:12px;line-height:1.35;color:var(--gg-text-2); }
.location-suggestion[aria-selected=true] { background:var(--gg-surface-3);box-shadow:inset 3px 0 var(--gg-link); }
.location-suggestion-browse,.location-suggestion-retry { position:static;display:block;width:100%;min-height:44px;padding:10px 14px;border:0;border-top:1px solid var(--gg-border);border-radius:0;background:var(--gg-surface);color:var(--gg-link);text-align:left;font-size:13px; }
.location-suggestion-retry[hidden] { display:none; }
@media(hover:hover) and (pointer:fine) { .location-suggestion:hover,.location-suggestion-browse:hover,.location-suggestion-retry:hover { background:var(--gg-surface-3); } }
.location-suggestions:popover-open { display:flex;flex-direction:column;overflow:hidden; }
.location-suggestions #location-options { min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable; }
.location-suggestion-status,.location-suggestion-browse,.location-suggestion-retry { flex:none; }
.location-suggestion:disabled { opacity:.55;cursor:wait; }
@media(max-width:759px) {
 #area-dialog { inset:var(--gg-visual-top,0px) 0 auto;width:100%;height:var(--gg-visual-height,100dvh);border:0;border-radius:0; }
 #area-form { padding-inline:16px; }
 #area-query { font-size:16px;min-height:48px; }
 .area-dialog-head [data-area-close] { width:44px;min-height:44px; }
 .area-option { font-size:16px;min-height:56px; }
 .area-option small { font-size:12px; }
 .area-state-tabs button { min-height:44px;font-size:12px; }
 .area-dialog-foot { padding-bottom:max(8px,env(safe-area-inset-bottom)); }
 .area-status { height:auto;min-height:36px;font-size:13px;line-height:18px;padding-block:4px; }
}