/**
 * O cartão de um anúncio acompanhado, e o acordeão que os agrupa.
 *
 * Partilhado pela Garagem (painel "Acompanhados") e pela página dos
 * Acompanhados. O markup sai todo do `GarageView.trackedCardHtml`; se o estilo
 * vivesse dentro do CSS de uma página, a outra desenhava o mesmo HTML sem
 * forma nenhuma.
 *
 * Depende de `--garage-line` e `--text-muted`, definidos pelas páginas que o
 * carregam; o fallback aqui evita um cartão sem contornos se uma página nova se
 * esquecer da variável.
 */
:root{--garage-line:rgba(255,255,255,.09)}

.tracked-groups{padding:2px 14px 14px;border-top:1px solid rgba(117,201,255,.16)}
.tracked-group{margin-top:10px;border:1px solid rgba(117,201,255,.16);border-radius:13px;background:rgba(0,0,0,.16);overflow:hidden}
.tracked-group>summary{list-style:none}.tracked-group>summary::-webkit-details-marker{display:none}
.tracked-group-head{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;cursor:pointer;user-select:none}
.tracked-group-head:hover{background:rgba(117,201,255,.05)}.tracked-group-head:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.tracked-group-label{font-size:11.5px;font-weight:900;letter-spacing:.2px;color:#fff}
.tracked-group-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border:1px solid rgba(117,201,255,.42);border-radius:999px;background:rgba(117,201,255,.12);color:#a9ddff;font-size:9.5px;font-weight:900}
.tracked-group-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid rgba(117,201,255,.3);border-radius:999px;color:#75c9ff;font-size:15px;line-height:1;transition:transform .2s}
.tracked-group[open] .tracked-group-toggle{transform:rotate(180deg)}
.tracked-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));gap:10px;padding:2px 10px 10px;border-top:1px solid rgba(117,201,255,.12)}
.tracked-card{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--garage-line);border-left:3px solid var(--brand-color,#32ade6);border-radius:14px;background:rgba(255,255,255,.03)}
.tracked-card-head{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.tracked-badge{padding:2px 7px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-size:9px;font-weight:900;letter-spacing:.3px;white-space:nowrap}
.tracked-origin{padding:2px 7px;border:1px solid rgba(255,255,255,.14);border-radius:99px;font-size:9.5px;font-weight:800;white-space:nowrap}
.tracked-origin.origin-pt{color:#67e884;border-color:rgba(48,209,88,.36);background:rgba(48,209,88,.1)}
.tracked-origin.origin-import{color:#ffd60a;border-color:rgba(255,214,10,.32);background:rgba(255,214,10,.09)}
.tracked-origin.origin-manual{color:var(--text-muted);background:rgba(255,255,255,.05)}
/* O botão de marcar para as Próximas Visitas — ortogonal ao selo e à origem,
   por isso fica encostado à direita do cabeçalho em vez de ao pé deles. */
.tracked-visit-toggle{margin-left:auto;padding:2px 8px;border:1px solid rgba(255,255,255,.16);border-radius:99px;background:rgba(255,255,255,.05);color:var(--text-muted);font:inherit;font-size:9.5px;font-weight:800;white-space:nowrap;cursor:pointer}
.tracked-visit-toggle:hover{background:rgba(255,255,255,.1);color:#fff}
.tracked-visit-toggle:focus-visible{outline:2px solid #fff;outline-offset:1px}
.tracked-visit-toggle.is-planned{color:#ffd60a;border-color:rgba(255,214,10,.4);background:rgba(255,214,10,.12)}
.tracked-visit-toggle.is-planned:hover{background:rgba(255,214,10,.2)}
.tracked-name{margin:0;font-size:14.5px;font-weight:900;line-height:1.15}
.tracked-specs{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.tracked-spec{padding:2px 7px;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:rgba(255,255,255,.05);font-size:9.5px;font-weight:800;color:rgba(255,255,255,.86);cursor:default}
.tracked-spec.spec-range{color:#75c9ff;border-color:rgba(117,201,255,.42);background:rgba(117,201,255,.12)}
.tracked-spec.spec-motor{color:#edc8ff;border-color:rgba(191,90,242,.44);background:rgba(191,90,242,.15)}
.tracked-spec.spec-battery{color:var(--text-muted)}
.tracked-spec.spec-unknown,.tracked-spec.spec-none{color:var(--text-muted);font-weight:700;font-style:italic}
.tracked-spec.pack-confirmed{color:#67e884;border-color:rgba(48,209,88,.42);background:rgba(48,209,88,.13)}
.tracked-spec.pack-probable{color:#ffd60a;border-color:rgba(255,214,10,.34);background:rgba(255,214,10,.1)}
.tracked-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:6px 8px;margin:0;padding:9px 0;border-top:1px solid var(--garage-line);border-bottom:1px solid var(--garage-line)}
.tracked-facts>div{min-width:0}
.tracked-facts dt{color:var(--text-muted);font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.45px}
.tracked-facts dd{margin:2px 0 0;font-size:13.5px;font-weight:900;line-height:1.15;white-space:nowrap}
.tracked-facts dd i{font-style:normal;font-size:8.5px;font-weight:800;color:var(--text-muted)}
.tracked-facts dd .fact-drop{display:block;margin-top:1px;font-size:9px;font-weight:800;color:#67e884}
.tracked-facts .fact-cost dd{color:#ffd60a}
.tracked-age{margin:0;font-size:10px;line-height:1.4;color:var(--text-muted)}.tracked-age b{color:#fff;font-weight:800}
.tracked-peers{padding:8px 9px;border:1px solid var(--garage-line);border-radius:11px;background:rgba(0,0,0,.24)}
.tracked-peers h4{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 5px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.45px;color:var(--text-muted)}
.tracked-peers h4 small{flex-shrink:0;font-size:8.5px;font-weight:700;text-transform:none;letter-spacing:0;opacity:.8}
.tracked-peer{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:baseline;gap:2px 8px;padding:4px 0;font-size:10.5px}
.tracked-peer+.tracked-peer{border-top:1px dashed rgba(255,255,255,.09)}
.tracked-peer.is-own{background:linear-gradient(90deg,rgba(117,201,255,.12),transparent);border-radius:6px;padding-left:5px;margin-left:-5px}
.peer-market{font-weight:800;white-space:nowrap}.peer-market[title]{cursor:help}.peer-market b{color:#75c9ff}.peer-market b.thin{color:#ff9f0a;cursor:help}.peer-market b.thin:after{content:'⚠';margin-left:2px;font-size:8px}
.peer-median{color:var(--text-muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peer-delta{grid-column:2;text-align:right;font-weight:900;white-space:nowrap}
.peer-delta.good{color:#67e884}.peer-delta.bad{color:#ff6b63}
.peer-empty{color:var(--text-muted);text-align:right;font-style:italic}
.peer-note{grid-column:1/-1;font-size:8.5px;color:var(--text-muted);opacity:.85}
.peer-orphans{margin:5px 0 0;padding-top:5px;border-top:1px dashed rgba(255,255,255,.09);font-size:8.5px;line-height:1.35;color:var(--text-muted);opacity:.85}
.tracked-headline{margin:0;font-size:11.5px;font-weight:800;line-height:1.35;color:#fff}
.tracked-card-actions{display:flex;gap:6px;margin-top:auto}
.tracked-card-actions button,.tracked-card-actions a{flex:1;min-height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid rgba(117,201,255,.28);background:rgba(0,122,255,.12);color:#75c9ff;font:inherit;font-size:10.5px;font-weight:900;text-align:center;text-decoration:none;cursor:pointer}
.tracked-card-actions button:hover,.tracked-card-actions a:hover{background:rgba(0,122,255,.22)}
.tracked-card-actions button:focus-visible,.tracked-card-actions a:focus-visible{outline:2px solid #fff;outline-offset:1px}
/* O link para a prova do "Há melhores" veste-se de aviso, não de ação neutra:
   é a única das três que diz que alguma coisa está mal com este anúncio. */
.tracked-card-actions .tracked-alternatives{border-color:rgba(255,159,10,.4);background:rgba(255,159,10,.12);color:#ff9f0a}
.tracked-card-actions .tracked-alternatives:hover{background:rgba(255,159,10,.22)}
.tracked-gone .tracked-badge{border-color:rgba(255,69,58,.5);background:rgba(255,69,58,.16);color:#ff6b63}
.tracked-cut .tracked-badge{border-color:rgba(48,209,88,.5);background:rgba(48,209,88,.16);color:#67e884}
.tracked-ripe .tracked-badge{border-color:rgba(255,214,10,.5);background:rgba(255,214,10,.14);color:#ffd60a}
.tracked-dominated .tracked-badge{border-color:rgba(255,159,10,.5);background:rgba(255,159,10,.14);color:#ff9f0a}

/* A morada publicada no anúncio. Só a página dos Acompanhados a mostra: na
   Garagem, onde não há agrupamento por localidade, a etiqueta de distância já
   diz o que é preciso. */
.tracked-locality{margin:-2px 0 0;font-size:10px;font-weight:700;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:help}

/* --- Galeria ------------------------------------------------------------
   O carrossel rola por scroll-snap, sem estado em JS: arrastar com o dedo e
   carregar nas setas acabam no mesmo sítio. As setas só aparecem no hover (ou
   sempre, no toque, onde não há hover) para não taparem a foto. */
.photo-gallery{position:relative;margin:-12px -12px 2px;border-radius:11px 11px 0 0;overflow:hidden;background:#05070b;aspect-ratio:16/10}
.photo-track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.photo-track::-webkit-scrollbar{display:none}
.photo-track:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.photo-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;background:#05070b}
.photo-track img.photo-broken{object-fit:contain;opacity:.35;padding:18%}
.photo-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:rgba(0,0,0,.5);color:#fff;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .18s}
.photo-nav.prev{left:0;border-radius:0 9px 9px 0}
.photo-nav.next{right:0;border-radius:9px 0 0 9px}
.photo-gallery:hover .photo-nav,.photo-nav:focus-visible{opacity:1}
.photo-nav:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.photo-count{position:absolute;right:7px;bottom:7px;padding:2px 7px;border-radius:99px;background:rgba(0,0,0,.62);color:rgba(255,255,255,.86);font-size:9px;font-weight:800;pointer-events:none}
@media (hover:none){.photo-nav{opacity:.85}}

/* --- Anotações -----------------------------------------------------------
   Escritas pelo utilizador no drawer dos Acompanhados e guardadas no blob da
   garagem (ver `setGarageOfferNotes`), portanto sincronizadas entre
   dispositivos. Uma linha do textarea é um ponto desta lista. */
.tracked-notes{padding:8px 9px;border:1px solid rgba(255,214,10,.26);border-radius:11px;background:rgba(255,214,10,.06)}
.tracked-notes h4{margin:0 0 5px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.45px;color:#ffd60a}
.tracked-notes ul{margin:0;padding-left:14px;display:grid;gap:3px}
.tracked-notes li{font-size:10.5px;line-height:1.4;color:rgba(255,255,255,.88);overflow-wrap:anywhere}

@media (max-width:768px){
  .tracked-groups{padding:2px 10px 10px}
  .tracked-cards{grid-template-columns:1fr;padding:2px 8px 8px}
  .tracked-card{padding:11px}
  .tracked-name{font-size:14px}
  .photo-gallery{margin:-11px -11px 2px}
}