/* REVL ARTIFACT SHELL: locations page round 1, concept A, Atlas.
   One working tool on one screen: a 480px panel at the gutter, the map filling the rest edge to
   edge. The list follows the map. Open rows, no boxes; the picked row is the one fill. */

/* ---------- the app: fills the screen under the header ---------- */
.atlas{
  --panel-w:480px;
  --hdr:120px;
  display:grid;
  grid-template-columns:var(--panel-w) minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr);
  margin-top:var(--hdr);
  height:calc(100vh - var(--hdr));
  height:calc(100svh - var(--hdr));
  min-height:600px;
}
.a-top,.a-status,.a-list{grid-column:1;padding-left:var(--g);padding-right:36px}
.a-map{grid-column:2;grid-row:1 / -1;position:relative;min-width:0;min-height:0;background:var(--ground)}

/* ---------- panel top ---------- */
.a-top{padding-top:22px}
.a-title{margin:0;font-size:40px;line-height:1;color:var(--white);text-wrap:balance;max-width:400px}

.a-search{margin-top:26px}
.a-search input{font-size:17px}
.a-go{flex:none;width:52px;height:100%;display:grid;place-items:center;color:var(--dim);transition:color .15s ease}
.a-go:hover{color:var(--white)}
.a-go svg{width:15px;height:13px}
.a-go .g-clear{display:none;width:12px;height:12px}
.a-search.is-set .g-arrow{display:none}
.a-search.is-set .g-clear{display:block}

.a-loc{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;min-height:34px}
.a-loc .btn-text{margin-left:-2px}
.a-loc .btn-text svg{width:14px;height:14px;flex:none}
.a-loc .btn-text[aria-pressed="true"]{color:var(--white)}
.a-msg{margin:0;font-size:12px;color:var(--dim);text-align:right;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.a-filters{display:flex;gap:20px;margin-top:12px;white-space:nowrap}
.a-filters .filt{flex:none}

/* ---------- the live line ---------- */
.a-status{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:8px;min-height:64px}
.a-status .k{margin:0}
.a-status .k b{font-weight:400;color:var(--white)}
.a-reset svg{width:13px;height:11px}

/* ---------- the list: scrolls on its own ---------- */
.a-list{overflow-y:auto;overscroll-behavior:contain;padding-bottom:56px;-webkit-mask-image:linear-gradient(to bottom,var(--ground) calc(100% - 44px),transparent);mask-image:linear-gradient(to bottom,var(--ground) calc(100% - 44px),transparent);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.a-list::-webkit-scrollbar{width:6px}
.a-list::-webkit-scrollbar-track{background:transparent}
.a-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}

.a-rows{list-style:none;margin:0 -20px;padding:0}
.a-row{position:relative;padding:20px;border-radius:6px;border:1px solid transparent;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}
.a-row + .a-row::before{content:"";position:absolute;left:19px;right:19px;top:-1px;height:1px;background:var(--line2);transition:opacity .18s ease}
.a-row.is-hover{border-color:var(--line2)}
.a-row.is-on{background:var(--panel);border-color:transparent}
.a-row.is-on::before,.a-row.is-on + .a-row::before,
.a-row.is-hover::before,.a-row.is-hover + .a-row::before{opacity:0}
.a-row.is-new{animation:a-in .32s ease both}
@keyframes a-in{from{opacity:0}to{opacity:1}}

.r-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.r-name{font-size:24px;line-height:1.05;color:var(--white);text-align:left;padding:0}
.r-km{flex:none;font-size:13px;color:var(--grey)}
.r-soon{margin:9px 0 0}
.r-addr{margin:10px 0 0;font-size:16px;line-height:1.4;color:var(--grey)}
.r-tel{display:inline-block;margin-top:3px;font-size:16px;line-height:1.4;color:var(--dim);text-decoration:none;transition:color .15s ease}
.r-tel:hover{color:var(--white)}
.r-line{margin:10px 0 0;font-size:16px;line-height:1.4;color:var(--grey);max-width:340px}
.r-btns{display:flex;gap:10px;margin-top:18px}
.a-row.is-intl{cursor:default}

/* ---------- the map's own marks ---------- */
.a-origin{width:22px;height:22px;color:var(--white);pointer-events:none}
.a-origin svg{display:block;width:100%;height:100%}

/* ---------- footer ---------- */
.foot{padding-top:36px}

/* ---------- laptop heights ---------- */
@media (min-width:861px) and (max-height:820px){
  .a-top{padding-top:18px}
  .a-title{font-size:38px}
  .a-search{margin-top:20px}
  .a-filters{margin-top:8px}
  .a-status{padding-top:16px;min-height:54px}
}

/* ---------- narrower desktops and tablets ---------- */
@media (max-width:1180px){ .atlas{--panel-w:420px} .a-top,.a-status,.a-list{padding-right:28px} }
@media (max-width:1024px){ .atlas{--hdr:93px} }

/* ---------- phone ---------- */
@media (max-width:860px){
  .atlas{display:block;height:auto;min-height:0}
  .a-top,.a-status,.a-list{padding-left:var(--g);padding-right:var(--g)}
  .a-top{padding-top:10px}
  .a-title{font-size:30px;max-width:330px}
  .a-search{margin-top:20px}
  .a-filters{overflow-x:auto;margin:6px calc(var(--g) * -1) 0;padding:0 var(--g);gap:22px;scrollbar-width:none}
  .a-filters::-webkit-scrollbar{display:none}
  .a-map{height:52vh;height:52svh;margin-top:14px}
  .a-status{padding-top:18px;min-height:0}
  .a-list{overflow:visible;padding-bottom:40px;-webkit-mask-image:none;mask-image:none}
  .a-map .maplibregl-ctrl-bottom-right{display:none}
  .a-map .maplibregl-ctrl-attrib{max-width:calc(100vw - 32px)}
  .a-rows{margin:0 -12px}
  .a-row{padding:18px 12px}
  .a-row + .a-row::before{left:11px;right:11px}
  .r-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .r-btns .btn{height:44px;padding:0 8px}
  .r-btns .btn:only-child{grid-column:1 / -1}
}

/* touch: no hover states that stick */
@media (hover:none){
  .a-row.is-hover{border-color:transparent}
  .a-row.is-hover::before,.a-row.is-hover + .a-row::before{opacity:1}
  .a-row.is-on::before,.a-row.is-on + .a-row::before{opacity:0}
  .a-go:hover{color:var(--dim)}
}