/* Vista PC (schermo grande con mouse o trackpad). Si somma agli altri stili e non tocca telefono e tablet:
   vale solo da 1000px in su e solo con un puntatore preciso. Per toglierlo basta togliere il <link> da index.html.
   Lavora insieme a desktop.js, che dà un nome ai pulsanti della barra in alto per il fumetto e per gli screen reader. */

@media (width >= 1000px) and (hover: hover) and (pointer: fine) {

  /* ---------- Barra in alto: sempre su una riga, mai pulsanti fuori schermo ---------- */
  .map-topbar { container: barra / inline-size; gap: 10px; }
  .map-actions { gap: 6px; align-items: center; min-width: 0; }
  .map-topbar .button, .map-topbar .icon-button { white-space: nowrap; flex-shrink: 0; min-height: 40px; }
  .map-actions .button { padding: 9px 12px; font-size: 12px; gap: 7px; }
  .map-actions .button > svg, .map-topbar .sidebar-toggle > svg { flex-shrink: 0; }
  .map-actions .button > em { font-style: normal; opacity: .7; }

  /* Fumetto con il nome del pulsante quando il testo è nascosto */
  .map-actions [data-dk-tip] { position: relative; }
  .map-actions [data-dk-tip]::after {
    content: attr(data-dk-tip);
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px);
    padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
    background: rgba(14, 10, 26, .94); border: 1px solid rgba(255, 80, 197, .45); color: #fff;
    font: 600 12px/1.2 Montserrat, Inter, system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    opacity: 0; transition: opacity .15s .25s, transform .15s .25s; z-index: 5;
  }

  /* Spazio medio: le funzioni secondarie diventano solo icona (il nome compare passandoci sopra) */
  @container barra (width < 1560px) {
    .map-actions [data-dk-sec] > span { display: none; }
    .map-actions [data-dk-sec] { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
    .map-actions [data-dk-sec]:hover::after, .map-actions [data-dk-sec]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
  }
  /* Poco spazio (pannello e scheda aperti insieme): resta col testo solo il contatore dei visitati */
  @container barra (width < 1120px) {
    .map-actions .button:not(.xf-chip) > span { display: none; }
    .map-actions .button:not(.xf-chip) { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
    .map-actions .button:not(.xf-chip) > em { display: none; }
    .map-actions .button:hover::after, .map-actions .button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
  }
  @container barra (width < 820px) {
    .map-actions .xf-chip > span { display: none; }
    .map-actions .xf-chip { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
    .map-actions .xf-chip:hover::after { opacity: 1; transform: translate(-50%, 0); }
  }
  .map-actions .map-about:hover::after { opacity: 1; }
  /* L'ultimo pulsante a destra: il fumetto non deve uscire dallo schermo */
  .map-actions > [data-dk-tip]:nth-last-child(-n+2)::after { left: auto; right: 0; transform: translate(0, -4px); }
  .map-actions > [data-dk-tip]:nth-last-child(-n+2):hover::after { transform: translate(0, 0); }

  /* ---------- Pannello Esplora: più spazio all'elenco dei luoghi ---------- */
  .brand-header { padding: 18px 18px 14px; }
  .brand-header h1 { font-size: 30px; line-height: 1.05; }
  .brand-header p { font-size: 10px; margin-top: 4px; }
  .search-field { margin-left: 14px; margin-right: 14px; }
  .sidebar-content { scrollbar-gutter: stable; }
  .place-result { padding-top: 10px; padding-bottom: 10px; min-height: 0; }
  .place-result:hover { background: rgba(255, 80, 197, 0.1); }
  .sidebar-footer { padding-top: 10px; padding-bottom: 12px; gap: 8px; }
  .sidebar-footer .button { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
  .sidebar-footer .save-status small { font-size: 11px; }

  /* ---------- Scheda del luogo: testo più leggibile ---------- */
  .detail-panel .description { font-size: 14px; line-height: 1.6; }
  .detail-panel .place-meta { font-size: 13px; }
  .detail-panel .tp-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .detail-panel .tp-presets .button { padding-left: 4px; padding-right: 4px; white-space: nowrap; justify-content: center; }

  /* ---------- Barre di scorrimento sottili, in tinta ---------- */
  .sidebar *, .detail-panel *, .xf-panel, .xf-panel * { scrollbar-width: thin; scrollbar-color: rgba(255, 80, 197, .45) transparent; }
  .sidebar ::-webkit-scrollbar, .detail-panel ::-webkit-scrollbar, .xf-panel::-webkit-scrollbar { width: 8px; height: 8px; }
  .sidebar ::-webkit-scrollbar-thumb, .detail-panel ::-webkit-scrollbar-thumb, .xf-panel::-webkit-scrollbar-thumb { background: rgba(255, 80, 197, .4); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
  .sidebar ::-webkit-scrollbar-track, .detail-panel ::-webkit-scrollbar-track { background: transparent; }

  /* ---------- Il puntatore dice cosa è cliccabile ---------- */
  .place-result, .sidebar-tabs button, .atlas-map-navigation button, .button, .icon-button { cursor: pointer; }
}

/* Schermi grandi: pannelli un po' più larghi, la mappa resta comunque protagonista */
@media (width >= 1440px) and (hover: hover) and (pointer: fine) {
  .sidebar { width: 350px; }
  .detail-panel { width: 360px; }
  .map-topbar { left: 20px; right: 20px; }
}
@media (width >= 1920px) and (hover: hover) and (pointer: fine) {
  .sidebar { width: 380px; }
  .detail-panel { width: 400px; }
  .place-result { font-size: 15px; }
}