/* Move Tracker — mobile first.
   Palette is the AA-verified set from the research artifact:
   --ink-mute #98B1B3 (5.47:1 on raised), --rose #E87BAC (5.57:1),
   --line-ui #5A8D99 for interactive borders (3.36:1). Do not darken these. */
:root{
  --ground:#101B1F;--surface:#182A2F;--raised:#20383E;
  --line:#2C4A51;--line-soft:#223C42;--line-ui:#5A8D99;
  --ink:#E8EDEB;--ink-dim:#A9BFC0;--ink-mute:#98B1B3;
  --lime:#C3E257;--lime-deep:#8FAB33;--mint:#5FC9A0;--ochre:#E3CB4B;--rose:#E87BAC;--violet:#9B8CE0;
  --tap:44px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);
  font-family:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
h1,h2,h3{margin:0;line-height:1.2;font-weight:600;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.mono,.num{font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
.muted{color:var(--ink-dim)}
.small{font-size:.82rem}
.err{color:var(--rose);font-size:.88rem}

/* ── login ── */
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px}
.gatebox{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);padding:30px 26px}
.gatebox h1{font-size:1.7rem;margin-bottom:6px}
.gatebox p{color:var(--ink-dim);margin:0 0 22px;font-size:.92rem}
.gatebox label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:7px}
.gatebox input{width:100%;min-height:var(--tap);padding:11px 13px;background:var(--ground);
  border:1px solid var(--line-ui);color:var(--ink)}
.gatebox button{width:100%;min-height:var(--tap);margin-top:14px;background:var(--lime);color:#101B1F;
  border:0;font-weight:600}
.gatebox button:disabled{opacity:.6}

/* ── chrome ── */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-weight:600;font-size:.95rem;white-space:nowrap}
.counts{flex:1;font-size:.76rem;color:var(--ink-mute);
  font-family:ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghost{min-height:36px;padding:7px 12px;background:transparent;border:1px solid var(--line-ui);
  color:var(--ink-dim);font-size:.78rem;white-space:nowrap}
.ghost:hover{border-color:var(--lime);color:var(--ink)}
.tabs{position:sticky;top:57px;z-index:39;display:flex;background:var(--raised);border-bottom:1px solid var(--line)}
.tab{flex:1;min-height:var(--tap);background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--ink-dim);font-size:.86rem;font-weight:500}
.tab.on{color:var(--lime);border-bottom-color:var(--lime)}
.badge{display:inline-block;min-width:19px;padding:1px 6px;background:var(--ochre);color:#101B1F;
  font-size:.7rem;font-weight:700;border-radius:9px;margin-left:4px}

/* ── filters ── */
.filters{background:var(--surface);border-bottom:1px solid var(--line);padding:11px 12px 13px;overflow-x:hidden}
.chiprow{display:flex;gap:7px;overflow-x:auto;max-width:100%;padding-bottom:9px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:34px;padding:6px 13px;background:transparent;border:1px solid var(--line-ui);
  color:var(--ink-dim);font-size:.78rem;white-space:nowrap}
.chip.on{background:var(--lime);border-color:var(--lime);color:#101B1F;font-weight:600}
.sliders{display:grid;grid-template-columns:1fr 1fr;gap:18px;min-width:0}
.hsl{min-width:0}
@media(max-width:430px){.sliders{grid-template-columns:1fr;gap:12px}}
.cap{display:flex;justify-content:space-between;align-items:baseline;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:5px}
.cap b{color:var(--lime);font-size:.82rem;text-transform:none;letter-spacing:0}
/* .hbar is a full-height track; the visible column <b> is absolutely positioned
   so its height can never be touched by flex cross-axis sizing. */
.hist{display:flex;align-items:stretch;gap:2px;height:30px;margin-bottom:3px;min-width:0;overflow:hidden}
.hbar{flex:1 1 0;min-width:0;align-self:stretch;position:relative;overflow:hidden;background:none;border:0;padding:0;margin:0}
.hbar>b{position:absolute;left:0;right:0;bottom:0;background:rgba(101,149,159,.30);box-shadow:inset 0 0 0 1px #65959F}
.hbar>b>i{position:absolute;left:0;right:0;bottom:0;background:var(--lime)}
.hbar.zero>b{background:rgba(101,149,159,.10);box-shadow:inset 0 0 0 1px rgba(101,149,159,.5)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--tap);background:transparent;display:block}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line-ui)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;background:var(--lime);
  border:0;border-radius:3px;margin-top:-9.5px}
input[type=range]::-moz-range-track{height:3px;background:var(--line-ui)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--lime);border:0;border-radius:3px}

/* ── views ── */
.view{display:none}
.view.on{display:block}
#map{height:calc(100dvh - 250px);min-height:340px}
.leaflet-container{background:#0b1315;font-family:inherit}
.leaflet-tile-pane{filter:brightness(1.85) contrast(1.06) saturate(.88)}
.leaflet-popup-content-wrapper{background:var(--surface);color:var(--ink);border-radius:0;border:1px solid var(--line)}
.leaflet-popup-tip{background:var(--surface);border:1px solid var(--line)}
.leaflet-popup-content{margin:12px 14px;font-size:.85rem;max-width:230px}
.leaflet-control-attribution{background:rgba(16,27,31,.86)!important;color:var(--ink-mute)!important;font-size:11px!important}
.leaflet-control-attribution a{color:var(--ink-dim)!important}
.leaflet-bar a{background:var(--surface);color:var(--ink);border-color:var(--line);width:34px;height:34px;line-height:34px}

/* ── cards ── */
.card{padding:14px 15px;border-bottom:1px solid var(--line-soft);border-left:3px solid transparent}
.card:active{background:var(--raised)}
.card.star{border-left-color:var(--ochre);background:rgba(227,203,75,.05)}
.card .row1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card .price{font-size:1.06rem;font-weight:600;color:var(--lime);font-variant-numeric:tabular-nums}
.card .fit{font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums}
.card .ttl{font-size:.92rem;margin-top:3px}
.card .loc{font-size:.76rem;color:var(--ink-mute);margin-top:2px;
  font-family:ui-monospace,Menlo,monospace}
.card .quote{font-size:.82rem;color:var(--mint);font-style:italic;margin-top:7px;line-height:1.45}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.tag{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border:1px solid;
  font-family:ui-monospace,Menlo,monospace}
.t-g{color:var(--mint);border-color:rgba(95,201,160,.62)}
.t-b{color:var(--rose);border-color:rgba(232,123,172,.72)}
.t-n{color:var(--ochre);border-color:rgba(227,203,75,.52)}
.t-v{color:var(--violet);border-color:rgba(155,140,224,.72)}
.cardacts{display:flex;gap:8px;margin-top:11px}
.cardacts button{flex:1;min-height:38px;background:transparent;border:1px solid var(--line-ui);
  color:var(--ink-dim);font-size:.78rem}
.cardacts button.on{background:var(--ochre);border-color:var(--ochre);color:#101B1F;font-weight:600}
.empty{padding:44px 22px;text-align:center;color:var(--ink-mute)}

/* ── sheet ── */
.sheet{position:fixed;inset:0;z-index:2000;background:var(--ground);display:flex;flex-direction:column;
  height:100dvh;max-height:100dvh;overflow:hidden;animation:slideup .22s ease-out}
/* .sheet sets display:flex, which beats the browser's [hidden] rule — without this
   an invisible sheet still covers the page and swallows every tap. */
.sheet[hidden]{display:none}
@keyframes slideup{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.sheet{animation:none}}
.sheetbar{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;
  background:var(--raised);border-bottom:1px solid var(--line);position:sticky;top:0}
.sheetbody{flex:1;min-height:0;overflow-y:auto;padding:20px 18px 28px;-webkit-overflow-scrolling:touch}
.sheetbody h2{font-size:1.45rem;margin-bottom:3px}
.sheetbody label{display:block;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);margin:15px 0 6px}
.sheetbody input,.sheetbody select,.sheetbody textarea{width:100%;min-height:var(--tap);padding:10px 12px;
  background:var(--surface);border:1px solid var(--line-ui);color:var(--ink)}
.sheetbody textarea{min-height:96px;resize:vertical;line-height:1.5}
.sheetbody>button{width:100%;min-height:var(--tap);margin-top:18px;background:var(--lime);color:#101B1F;
  border:0;font-weight:600}
.addgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0 12px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:16px 0}
.dl dt{color:var(--ink-mute);font-size:.8rem;font-family:ui-monospace,Menlo,monospace}
.dl dd{margin:0;text-align:right;font-size:.86rem;font-variant-numeric:tabular-nums}
.sec{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.sec h4{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  font-weight:500;margin:0 0 9px}
.sunbar{display:flex;align-items:center;gap:9px;margin:5px 0;font-size:.8rem}
.sunbar .track{flex:1;height:7px;background:var(--line-soft)}
.sunbar .track i{display:block;height:100%}
/* grid, not flex — flex:1 1 auto with a min-width overflowed a 390px screen */
.statusrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px;margin-top:8px}
.statusrow button{min-height:40px;padding:7px 8px;background:transparent;
  border:1px solid var(--line-ui);color:var(--ink-dim);font-size:.76rem}
.statusrow button.on{background:var(--mint);border-color:var(--mint);color:#101B1F;font-weight:600}
.flag{margin-bottom:10px;line-height:1.5;font-size:.85rem;color:var(--ink-dim)}
.flag .lab{font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;
  margin-right:7px;border:1px solid;font-family:ui-monospace,Menlo,monospace}
/* A sibling of .sheetbody, not a sticky child of it — as a sticky child it sat on
   top of the notes field and swallowed taps near the bottom of the sheet. */
.sheetfoot{flex:none;background:var(--raised);border-top:1px solid var(--line);
  padding:11px 14px calc(11px + var(--safe-b));display:flex;gap:10px;align-items:center}
.sheetfoot[hidden]{display:none}
.sheetfoot .state{flex:1;font-size:.78rem;color:var(--ink-mute)}
.sheetfoot button{min-height:40px}

/* ── desktop: side by side ── */
@media(min-width:900px){
  .tabs{display:none}
  main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:0;align-items:start}
  .view{display:block!important}
  #view-map{order:1;position:sticky;top:118px}
  #view-list{order:2;max-height:calc(100dvh - 118px);overflow-y:auto;border-left:1px solid var(--line)}
  #view-short{display:none!important}
  #map{height:calc(100dvh - 118px)}
  .sheet{left:auto;width:460px;border-left:1px solid var(--line)}
  .filters{padding:12px 16px}
}

/* ── stage: map leads, list beside it on desktop, tabs on mobile ── */
.stage{min-width:0}
#map{height:calc(100dvh - 250px);min-height:340px}
/* The brightness lift exists to rescue CARTO's dim labels on the dark basemap.
   Over satellite imagery it blows out the highlights, so it's scoped off. */
body.sat .leaflet-tile-pane{filter:none}
.leaflet-control-layers{background:var(--surface);color:var(--ink);border:1px solid var(--line-ui);border-radius:0}
.leaflet-control-layers-toggle{background-color:var(--surface)}
.leaflet-control-layers-expanded{padding:10px 12px;font-size:.82rem}
.leaflet-control-layers label{display:flex;align-items:center;gap:7px;min-height:28px}
.leaflet-control-layers-separator{border-top:1px solid var(--line)}

@media(min-width:900px){
  .tabs .tab[data-view="map"]{display:none}
  .stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .stage .mapcol{display:block;position:sticky;top:101px}
  .stage .mapcol #map{height:calc(100dvh - 130px)}
  .stage .listcol{border-left:1px solid var(--line);max-height:calc(100dvh - 130px);overflow-y:auto}
  .stage .listcol.on{display:block}
}

/* ── master / detail ──
   The sheet is a fixed 460px right rail, so on desktop it sat directly on top of
   the list column: to look at the next listing you had to close it first. Given
   enough width, reserve the rail instead of overlaying it, and the list stays
   visible and clickable while the detail follows your selection. Below 1200px
   there isn't room for three columns, so it keeps overlaying as before. */
@media(min-width:1200px){
  body.sheet-open .stage{padding-right:460px}
  body.sheet-open .stage .mapcol #map{height:calc(100dvh - 130px)}
  body.sheet-open #list .card.sel{background:var(--raised)}
}

/* ── the brief ── */
.brief{border-top:1px solid var(--line);background:var(--surface);padding:44px 18px 64px}
.briefinner{max-width:62ch;margin:0 auto}
.kicker{font-family:ui-monospace,Menlo,monospace;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);margin:0 0 14px}
.btitle{font-size:clamp(1.6rem,5vw,2.3rem);letter-spacing:-.02em;margin:0 0 26px;max-width:20ch}
.brief h2.sec{font-size:1.12rem;margin:36px 0 10px;letter-spacing:-.01em}
.brief p{margin:0 0 12px;color:var(--ink-dim);font-size:.95rem}
.brief p.lede{color:var(--ink)}
.brief p.note{font-size:.86rem;color:var(--ink-mute);border-left:2px solid var(--line-ui);padding-left:12px}
.brief em{color:var(--ink)}
.brief code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;color:var(--mint)}
.callout{border:1px solid var(--line);border-left:3px solid var(--rose);background:var(--raised);padding:20px 20px 8px}
.callout h2{font-size:1.15rem;margin:0 0 12px}
.tradelist{margin:0 0 12px;padding-left:20px;color:var(--ink-dim);font-size:.95rem}
.tradelist li{margin-bottom:9px}
.tradelist strong{color:var(--ink)}
.pill{display:inline-block;padding:1px 7px;border:1px solid var(--mint);color:var(--mint);
  font-family:ui-monospace,Menlo,monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.srcs{margin:0;display:grid;grid-template-columns:minmax(88px,auto) 1fr;gap:7px 16px;font-size:.89rem}
.srcs dt{color:var(--lime);font-family:ui-monospace,Menlo,monospace;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.07em;padding-top:3px}
.srcs dd{margin:0;color:var(--ink-dim)}
.foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--ink-mute)}

/* ── sun provenance + manual override ── */
.pill2{display:inline-block;padding:2px 8px;border:1px solid;font-family:ui-monospace,Menlo,monospace;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}
.orifix{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.orifix label{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:6px}
.orifix select{width:100%;min-height:var(--tap);padding:9px 11px;background:var(--ground);
  border:1px solid var(--line-ui);color:var(--ink)}

/* ── refresh feedback + sources panel ── */
.alertbar{position:fixed;left:50%;bottom:calc(16px + var(--safe-b));transform:translateX(-50%);
  z-index:2100;max-width:min(92vw,560px);padding:12px 16px;background:var(--raised);
  border:1px solid var(--line-ui);font-size:.86rem;line-height:1.45;box-shadow:0 6px 26px rgba(0,0,0,.55)}
.alertbar[hidden]{display:none}
.alertbar.good{border-color:var(--mint)}
.alertbar.bad{border-color:var(--rose)}
.srcrow{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.srcrow .pill2{flex:none;margin-top:2px}
.runs{width:100%;border-collapse:collapse;font-family:ui-monospace,Menlo,monospace;font-size:.74rem}
.runs th{text-align:left;color:var(--ink-mute);font-weight:500;padding:4px 8px 6px 0;border-bottom:1px solid var(--line)}
.runs td{padding:5px 8px 5px 0;color:var(--ink-dim);border-bottom:1px solid var(--line-soft)}
@media(max-width:520px){
  .topbar{flex-wrap:wrap}
  .counts{order:99;flex:1 0 100%;margin-top:2px}
}

/* ── photos ── */
.cardmain{display:flex;gap:11px;align-items:flex-start;margin-top:4px}
.cardtext{min-width:0;flex:1}
.thumb{flex:none;width:74px;height:74px;object-fit:cover;background:var(--raised);
  border:1px solid var(--line)}
.gal{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.galitem{flex:none;padding:0;border:1px solid var(--line-ui);background:var(--raised);
  scroll-snap-align:start;line-height:0;cursor:zoom-in}
.galitem img{width:196px;height:147px;object-fit:cover;display:block}
.galitem:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.lightbox{position:fixed;inset:0;z-index:2200;background:rgba(8,14,16,.96);
  display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.lbclose{position:absolute;top:14px;right:14px;min-width:var(--tap);min-height:var(--tap);
  background:var(--raised);border:1px solid var(--line-ui);color:var(--ink);font-size:1.1rem}
.lbnav{position:absolute;top:50%;transform:translateY(-50%);min-width:var(--tap);
  min-height:64px;background:rgba(32,56,62,.9);border:1px solid var(--line-ui);
  color:var(--ink);font-size:1.7rem;line-height:1}
.lbprev{left:12px}.lbnext{right:12px}
.lbcount{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--ink-dim);
  background:rgba(16,27,31,.85);padding:4px 10px;border:1px solid var(--line)}
@media(max-width:430px){.galitem img{width:164px;height:123px}}

/* Leaflet gives its own controls z-index values up to 1000. Once the map became
   the default view it was no longer display:none behind an open sheet, so the
   zoom buttons and layer switcher painted straight through it. Panels that cover
   the page therefore sit above 1000, and the map's own stack is capped below it. */
/* FIXED 8 Sept 2026. The previous line here was
       .leaflet-pane,.leaflet-top,.leaflet-bottom{z-index:auto}
   which flattened Leaflet's entire internal stacking order. Leaflet's own
   stylesheet still puts z-index:200 on the <svg> holding the circle markers, so
   with every pane at auto the dots outranked the popup and painted straight
   through it — unreadable text, and a "Full details" button with pins on top.
   isolation:isolate on the container is what actually stops the map painting
   through the app's own panels, so the panes can keep their real order. */
.leaflet-tile-pane   {z-index:200}
.leaflet-overlay-pane{z-index:400}
.leaflet-shadow-pane {z-index:500}
.leaflet-marker-pane {z-index:600}
.leaflet-tooltip-pane{z-index:650}
.leaflet-popup-pane  {z-index:700}
.leaflet-overlay-pane svg{z-index:auto}   /* the stray that outranked the popup */
.leaflet-top,.leaflet-bottom{z-index:800}
.leaflet-container{z-index:0;isolation:isolate}

/* ── finding a listing on the map ──
   Selecting a card pings its dot, so a row in the list and a pin in the city
   are obviously the same place. */
@keyframes mtping{
  0%  {stroke-width:2;  stroke-opacity:1}
  70% {stroke-width:16; stroke-opacity:0}
  100%{stroke-width:2;  stroke-opacity:0}
}
path.pingdot{animation:mtping .8s ease-out 2}
path.seldot{stroke-width:5}
.card.sel{box-shadow:inset 3px 0 0 var(--lime)}
@media (prefers-reduced-motion: reduce){
  path.pingdot{animation:none}
  path.seldot{stroke-width:6}
}

/* ── expiring a listing ──
   A third button in .cardacts would squeeze the other two, so this one sizes to
   its text instead of taking an equal share. Quiet by default, rose on hover:
   it removes something from the list, so it should not look like Shortlist. */
.cardacts .gonebtn{flex:0 0 auto;padding:0 12px;white-space:nowrap}
.gonebtn{color:var(--ink-dim)}
.gonebtn:hover,.gonebtn:focus-visible{border-color:var(--rose);color:var(--rose)}

/* Undo toast. Above 1000 for the same reason the sheets are — see the note on
   Leaflet's stacking at the top of this block. */
#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);
  display:flex;align-items:center;gap:14px;max-width:min(92vw,520px);
  background:var(--surface);border:1px solid var(--line-ui);
  padding:12px 16px;font-size:.92rem;color:var(--ink);
  box-shadow:0 8px 28px rgba(0,0,0,.5);z-index:1200;
  opacity:0;pointer-events:none;transition:transform .22s ease,opacity .22s ease}
#toast.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#toast button{flex:0 0 auto;min-height:38px;padding:0 14px;background:transparent;
  border:1px solid var(--lime);color:var(--lime);font:inherit;font-weight:600;cursor:pointer}
#toast button:hover{background:var(--lime);color:#101B1F}

@media (max-width:640px){
  #toast{left:12px;right:12px;bottom:14px;max-width:none;transform:translateY(140%)}
  #toast.on{transform:translateY(0)}
  .cardacts{flex-wrap:wrap}
  .cardacts .gonebtn{flex:1 1 auto}
}

/* Active / Expired / All. Separated from the bedroom and feature chips because
   it answers a different question — which set of listings am I looking at. */
.chipsep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.chip.scope.on{background:var(--ink-dim);border-color:var(--ink-dim);color:#101B1F}

/* An expired card must LOOK expired wherever it appears, not just live in a
   separate tab. Dimmed, desaturated, with a badge that survives at any width. */
.card.isgone{opacity:.72}
.card.isgone .thumb{filter:grayscale(1)}
.card.isgone .price{color:var(--ink-dim)}
.expbadge{margin-left:8px;padding:2px 7px;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;color:var(--ochre);
  border:1px solid var(--ochre);border-radius:2px}

/* Why a listing is in the Expired view: "you marked it" reads very differently
   from "Craigslist says the post is gone", and only the second is trustworthy. */
.gonewhy{margin-top:9px;font-size:.82rem;color:var(--ink-mute);
  border-left:2px solid var(--line-ui);padding-left:9px}

/* The detail panel showed price, address and hood but never the listing's own
   title — fine when you opened one at a time, useless once you can cycle
   through them, because nothing named the thing you were looking at. */
.sheettitle{font-size:1.02rem;line-height:1.45;color:var(--ink);margin:6px 0 2px}