/* riktom Gas Finder — house green theme, patterned on the traffic/highwater apps */
:root{
  --green:#1b5e20; --green-d:#124116; --mint:#a5d6a7; --mint-l:#e8f5e9;
  --ink:#1f2a24; --muted:#5f7268; --line:#dfe8df; --card:#fff;
  --radius:14px; --shadow:0 2px 10px rgba(20,60,30,.08);
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:#f6f9f6;}
main{max-width:1060px;margin:0 auto;padding:0 1rem 2.5rem;}

.hero{text-align:center;padding:2rem 0 .6rem;}
.hero h1{margin:0;font-size:2rem;color:var(--green);letter-spacing:-.02em;}
.hero .subtitle{margin:.4rem 0 .6rem;color:var(--muted);font-size:1.02rem;}
.status-line{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;font-size:.9rem;color:var(--ink);box-shadow:var(--shadow);}

/* Fixed, not in-flow: confirmations fire from the map, which is usually scrolled
   past the top of the page on a phone — an in-flow banner would land off-screen. */
.flash{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:1200;width:min(92vw,720px);
  background:var(--mint-l);border:1px solid var(--mint);border-radius:10px;padding:.7rem 1rem;
  font-size:.95rem;color:var(--green-d);box-shadow:0 6px 22px rgba(20,60,30,.22);}

.band{margin:1.2rem 0 .4rem;}
.band-inner{background:linear-gradient(135deg,#1b5e20,#276b2c);color:#fff;border-radius:var(--radius);padding:1.3rem 1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;box-shadow:0 4px 18px rgba(20,60,30,.18);}
@media(max-width:760px){.band-inner{grid-template-columns:1fr;}}
.band-col h2{margin:0 0 .25rem;font-size:1.15rem;}
.band-sub{margin:0 0 .7rem;color:#dcefdd;font-size:.9rem;}
.band .row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem;}
.band select,.band input{padding:.65rem .8rem;border-radius:10px;border:1px solid #cfe6d1;font-size:16px;background:#fff;color:var(--ink);min-width:0;}
.band select{flex:0 1 auto;max-width:100%;}
#rp-station{width:100%;margin-bottom:.5rem;}
#rp-price{flex:1 1 90px;}
#rp-name{flex:2 1 150px;}
#sb-email{flex:2 1 180px;}
#sb-thresh{flex:1 1 140px;}
.band button{background:#fff;color:var(--green);font-weight:800;border:0;border-radius:10px;padding:.65rem 1.2rem;font-size:.95rem;cursor:pointer;}
.band button:hover{background:var(--mint-l);}
.band button:disabled{opacity:.6;cursor:default;}
.band .msg{margin:.45rem 0 0;font-size:.88rem;color:#eafce9;min-height:1.1em;}
.band .msg.err{color:#ffd9d2;}

.mapwrap{margin:1.2rem 0 .3rem;}
.near-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 .1rem .6rem;}
.near-bar button{background:var(--green);color:#fff;border:0;border-radius:10px;padding:.5rem .9rem;font-weight:700;font-size:.9rem;cursor:pointer;}
.near-bar button:hover{background:var(--green-d);}
.near-bar #near-clear{background:#fff;color:var(--green);border:1px solid var(--green);}
.near-bar select{border:1px solid var(--line);border-radius:10px;padding:.45rem .5rem;font-size:.9rem;background:#fff;}
.near-lbl{font-size:.9rem;color:var(--muted);}
#near-msg{font-size:.84rem;color:var(--muted);}
.st-dist{color:var(--green);font-weight:700;}

/* marker popup actions */
.pp-actions{display:flex;gap:.4rem;margin-top:.55rem;}
.pp-actions button{border:0;border-radius:8px;padding:.4rem .6rem;font-size:.8rem;font-weight:700;cursor:pointer;background:var(--green);color:#fff;}
.pp-actions button:hover{background:var(--green-d);}
.pp-actions .pp-ghost{background:#fff;color:var(--green);border:1px solid var(--green);}
.pp-nameform{display:flex;gap:.4rem;margin-top:.55rem;}
/* 16px minimum: anything smaller makes iOS Safari zoom the page in on focus. */
.pp-nameform input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:.45rem .5rem;font-size:16px;}
.pp-cancel{margin-top:.45rem;background:none;border:0;padding:.35rem .1rem;color:var(--muted);font-size:.82rem;text-decoration:underline;cursor:pointer;}
.pp-nameform button{border:0;border-radius:8px;padding:.4rem .7rem;font-weight:700;cursor:pointer;background:var(--green);color:#fff;}
.pp-fixed{color:var(--muted);font-style:italic;}
.pp-err{color:#c62828;display:block;margin-top:.3rem;}
#map{height:420px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);z-index:0;}
.legend{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:.6rem .2rem 0;font-size:.82rem;color:var(--muted);}
.lg{display:inline-flex;align-items:center;gap:.4rem;}
.lg::before{content:"";width:12px;height:12px;border-radius:50%;display:inline-block;}
.lg-fresh::before{background:#2e7d32;}
.lg-stale::before{background:#f5a623;}
.lg-none::before{background:#9e9e9e;}

.list-sec{margin-top:1.6rem;}
.sec-h{margin:.2rem 0;color:var(--green);font-size:1.25rem;}
.sec-note{margin:.2rem 0 .8rem;color:var(--muted);font-size:.9rem;}
.station-list{display:flex;flex-direction:column;gap:.5rem;}
.st-row{display:grid;grid-template-columns:2.2rem 5.5rem 1fr auto;gap:.7rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;cursor:pointer;box-shadow:var(--shadow);}
.st-row:hover{border-color:var(--mint);}
.st-row.stale{opacity:.7;}
.st-rank{font-weight:800;color:var(--muted);text-align:center;}
.st-price{font-size:1.25rem;font-weight:800;color:var(--green);}
.st-meta small{color:var(--muted);}
.st-ago{text-align:right;font-size:.82rem;color:var(--muted);}
.stale-tag{color:#b26a00;font-weight:700;}
.empty-note{background:var(--mint-l);border:1px solid var(--mint);border-radius:12px;padding:1rem 1.1rem;color:var(--green-d);}
.attrib{font-size:.78rem;color:var(--muted);margin-top:.9rem;}
.attrib a{color:var(--green);}

footer{background:#0f2413;color:#c8e6d2;margin-top:2.5rem;padding:1.6rem 1rem;text-align:center;font-size:.85rem;}
footer a{color:#a5d6a7;text-decoration:none;margin:0 .5rem;}
.footer-links{margin-bottom:.6rem;display:flex;flex-wrap:wrap;gap:.2rem .4rem;justify-content:center;}