/*
Main.css
Mobile-first responsive layout
*/

:root{
    --header-h:56px;
    --accent: #990000;
    --muted:#6b7280;
    --card-bg: #edebeb;
    --glass: rgba(255,255,255,0.85);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
html,body,#app{height:100%;margin:0;padding:0;background:#f7fafc}

header{
    height:var(--header-h);
    display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #e6e9ef;background:var(--card-bg);
    position:relative;z-index:1000;
}
.logo{font-weight:700;color:var(--accent);letter-spacing:0.5px}
.search-wrap{flex:1;display:flex;align-items:center;gap:6px}
input[type="search"]{flex:1;padding:10px;border-radius:8px;border:1px solid #e2e8f0;font-size:15px}
button{background:var(--accent);color:white;border:none;padding:8px 12px;border-radius:8px;font-weight:600}

main{display:flex;flex-direction:column;height:calc(100% - var(--header-h));}
#map{flex:1;min-height:200px}

/* accessibility focus */
input:focus, button:focus{outline:3px solid rgba(59,130,246,0.25)}

/* Small screens: panel stretches */
@media(min-width:720px){
    main{flex-direction:row}
    #map{flex:1}
    .panel{width:360px;left:auto;right:12px;bottom:12px}
}