`public/geo-search.css`

48 lines
/* geo-search.css — universal location search (pairs with geo-search.js).
 * Two modes: .geo-pill (fixed top-center, on map/content pages) and
 * .geo-inline (sits inside the grid's .cg-top bar). Inherits host --bg/--line/--fg/--muted/--gold. */

/* shared box */
.geo-box{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;
  background:rgba(17,21,29,.96);border:1px solid var(--line,#222936);border-radius:22px;}
.geo-box:focus-within{border-color:var(--gold,#c8a24b);}
.geo-ic{color:var(--gold,#c8a24b);font-size:16px;line-height:1;}
.geo-input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg,#e8ecf2);
  font:14px/1.4 -apple-system,Segoe UI,Roboto,sans-serif;}
.geo-input::placeholder{color:var(--muted,#8a93a3);}
.geo-clear{background:none;border:0;color:var(--muted,#8a93a3);cursor:pointer;font-size:13px;padding:2px 4px;}
.geo-clear:hover{color:var(--fg,#e8ecf2);}

/* results dropdown */
.geo-results{display:none;max-height:60vh;overflow-y:auto;z-index:1200;
  background:rgba(17,21,29,.98);border:1px solid var(--line,#222936);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.55);}
.geo-results.open{display:block;}
.geo-item{display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;
  color:var(--fg,#e8ecf2);border-bottom:1px solid var(--line,#222936);}
.geo-item:last-child{border-bottom:0;}
.geo-item:hover,.geo-item.active{background:rgba(200,162,75,.12);}
.geo-name{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.geo-subline{display:block;font-size:11px;color:var(--muted,#8a93a3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.geo-state{font-size:11px;color:var(--muted,#8a93a3);font-weight:700;font-variant-numeric:tabular-nums;}
.geo-badge{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--gold,#c8a24b);
  border:1px solid var(--line,#222936);border-radius:10px;padding:2px 7px;white-space:nowrap;}
.geo-empty{padding:12px 14px;color:var(--muted,#8a93a3);font-size:13px;line-height:1.5;}
.geo-rechdr{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;
  font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted,#8a93a3);
  border-bottom:1px solid var(--line,#222936);}
.geo-recclr{cursor:pointer;text-transform:none;letter-spacing:0;text-decoration:underline;}
.geo-recclr:hover{color:var(--gold,#c8a24b);}

/* ── pill mode: fixed top-center (map + content pages) ── */
.geo-pill{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:1100;width:min(440px,86vw);}
.geo-pill .geo-box{height:44px;backdrop-filter:blur(6px);box-shadow:0 2px 14px rgba(0,0,0,.5);}
.geo-pill .geo-results{margin-top:6px;}
@media(max-width:820px){.geo-pill{left:64px;right:12px;width:auto;transform:none;}} /* clear the hamburger */

/* ── inline mode: first control inside the grid's .cg-top bar ── */
.geo-inline{position:relative;flex:0 0 auto;}
.geo-inline .geo-box{width:260px;max-width:42vw;background:var(--cg-card,#161b22);}
.geo-inline .geo-results{position:absolute;top:calc(100% + 6px);left:0;min-width:340px;max-width:80vw;}
@media(max-width:820px){.geo-inline .geo-box{width:180px;}}