/*
 * ==============================================================================
 * file_id: SOM-STY-PENDING-v1.0.0
 * name: city.css
 * description: Shared Says city template styles: dark hex/amber, hero map + filter panel + decoded-bits card (stamp pending: Witness assigns)
 * project_id: SAYS-HUB
 * category: sty
 * tags: [says, city, geohex, css]
 * created: 2026-10-27
 * modified: 2026-10-27
 * version: 1.0.0
 * agent_id: devin
 * execution: linked from public/says-city/<slug>/index.html
 * ==============================================================================
 */
:root{--bg:#07090d;--bg2:#0d1219;--ln:#1d2733;--tx:#d6dde6;--mu:#7d8a9b;--am:#e0a84e;--am2:#ffcf7a;--te:#6fd3d0;--ac:#e0a84e}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--tx);font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
a{color:var(--te)}.mu{color:var(--mu)}.sm{font-size:11px}.amber{color:var(--am)}.mono{font-family:inherit;word-break:break-all}
.top{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--ln);background:linear-gradient(#0b1017,#07090d)}
.brand{color:var(--tx);text-decoration:none;letter-spacing:3px}.brand b{color:var(--am)}.hx{color:var(--am);font-size:18px}.crumb{color:var(--mu)}.sp{flex:1}
.pill{border:1px solid var(--ln);border-radius:999px;padding:3px 10px;font-size:11px}.pill b{margin:0 2px}
.P{color:#7ad97a}.L{color:#e8c25a}.O{color:#ff8a6b}
.hero{position:relative;height:min(72vh,720px);min-height:460px;border-bottom:1px solid var(--ln);overflow:hidden;
 background:radial-gradient(ellipse at 50% 55%,#111a24 0%,#07090d 70%)}
#map{position:absolute;inset:0}#lattice{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.maplibregl-canvas{outline:none}.maplibregl-ctrl-attrib{background:#07090dcc!important;color:var(--mu)}.maplibregl-ctrl-attrib a{color:var(--mu)}
.title{position:absolute;left:22px;top:20px;max-width:380px;pointer-events:none;text-shadow:0 2px 12px #000}
.title .kick{font-size:10px;letter-spacing:3px;color:var(--mu);border:1px solid var(--ln);display:inline-block;padding:3px 9px;
 clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);background:#07090dcc}
.title h1{font-size:64px;line-height:1;margin:10px 0 4px;color:var(--ac);letter-spacing:-1px;font-weight:700}
.title .tag{color:var(--tx);opacity:.8;margin-bottom:10px}
.ids{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;background:#07090dcc;border:1px solid var(--ln);padding:8px 10px;pointer-events:auto}
.ids dt{color:var(--mu)}.ids dd{margin:0}
.panel{position:absolute;right:16px;top:16px;bottom:16px;width:340px;background:#07090de6;border:1px solid var(--ln);display:flex;flex-direction:column;
 clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.chips{display:flex;flex-wrap:wrap;gap:5px;padding:12px}
.chip{background:var(--bg2);border:1px solid var(--ln);color:var(--tx);padding:4px 9px;cursor:pointer;font:inherit;font-size:11px;
 clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%)}
.chip span{color:var(--mu);margin-left:4px}.chip.on{background:var(--am);color:#120c02;border-color:var(--am)}.chip.on span{color:#3a2a08}.chip:disabled{opacity:.35;cursor:default}
.timing{padding:0 12px 8px;color:var(--te);font-size:12px;border-bottom:1px solid var(--ln)}
.list{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.list li{padding:6px 12px;border-bottom:1px solid #121a23;cursor:pointer}.list li:hover,.list li.sel{background:#141d28}
.list .u{color:var(--mu);font-size:10.5px;display:block}.list .c{color:var(--am);font-size:10px;float:right}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 18px}
.card{background:var(--bg2);border:1px solid var(--ln);padding:14px 16px;min-width:0}
.card h2{margin:0 0 6px;font-size:13px;letter-spacing:2px;color:var(--am);font-weight:600;text-transform:uppercase}
.mk{max-height:320px;margin-top:8px;border-top:1px solid var(--ln)}
input{width:100%;background:var(--bg);color:var(--tx);border:1px solid var(--ln);padding:7px 9px;font:inherit}
.bitbar{display:flex;height:26px;margin:10px 0 6px;border:1px solid var(--ln)}
.bitbar div{display:flex;align-items:center;justify-content:center;font-size:9.5px;color:#07090d;overflow:hidden;white-space:nowrap;cursor:default}
.uhex{font-size:15px;letter-spacing:.5px;margin:6px 0;word-break:break-all}.uhex span{padding:0 0}
table{border-collapse:collapse;width:100%}td{border-bottom:1px solid var(--ln);padding:4px 6px;vertical-align:top}td:first-child{color:var(--mu);width:34%}
.links{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.btn{display:inline-block;padding:8px 12px;border:1px solid var(--te);color:var(--te);text-decoration:none;
 clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.amberbtn{border-color:var(--am);color:#120c02;background:var(--am)}.ghost{border-color:var(--ln);color:var(--mu)}
.st h3{font-size:11px;letter-spacing:2px;margin:8px 0 2px}.st ul{margin:0;padding-left:18px}
footer{padding:14px 18px 28px;color:var(--mu);font-size:11px;border-top:1px solid var(--ln)}footer a{color:var(--mu)}
@media (max-width:860px){.panel{position:relative;inset:auto;width:auto;height:360px;margin:0}.hero{height:auto;min-height:0;display:flex;flex-direction:column}
 #map,#lattice{position:relative;height:56vh}#lattice{position:absolute;top:0;height:56vh}.title h1{font-size:44px}.grid2{grid-template-columns:1fr}}