/*
 * responsive.css — layout mobile (≤ 760px). Va caricato per ultimo:
 * sovrascrive regole di chrome.css e content.css a parità di specificità.
 * Sul telefono la finestra è "ingrandita": niente cornice né angoli, schede
 * scorrevoli, ricerca in cima all'indice, indice aperto dal pulsante Indice.
 */

/* finestre medie: schede più strette, indice un po' più stretto */
@media (max-width: 1020px) {
  .win {
    --side: 220px;
  }
  .menubar a {
    padding: 0 10px;
  }
  .content {
    padding: 22px 26px 40px;
  }
}

@media (max-width: 760px) {
  .trip-row {
    grid-template-columns: 1fr;
  }
  .idxbtn {
    display: inline-flex;
  }
  .win {
    margin: 0;
    height: auto;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .title {
    margin: 0;
    border-radius: 0;
    min-height: 36px;
  }
  .title small {
    display: none;
  }
  .toolbar {
    flex-wrap: nowrap;
    padding: 3px 4px;
  }
  .toolbar .tbtn {
    min-height: 40px;
    padding: 3px 8px 3px 4px;
  }
  .menubar {
    margin-left: 0;
    padding: 0 28px 0 6px;
    scroll-padding: 0 28px;
    -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image: linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
  .menubar a {
    height: 36px;
    padding: 0 12px;
  }
  .menubar a[aria-current="page"] {
    height: 39px;
  }
  .body {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .body::before {
    display: none;
  }
  .index {
    padding: 8px;
    border-bottom: 1px solid var(--face-lo);
  }
  .index input {
    position: static;
    width: 100%;
    height: 40px;
    margin: 0;
    font-size: 16px;
  }
  .index ul {
    flex: none;
    max-height: 60vh;
    display: none;
    margin-top: 8px;
  }
  .index.open ul {
    display: block;
  }
  .index li a {
    padding: 10px;
  }
  .content {
    overflow: visible;
    padding: 18px 16px 32px;
  }
  h1 {
    font-size: 1.7rem;
  }
  .hero-slide {
    float: none;
    margin: 0 0 12px;
  }
  .slide {
    width: 140px;
  }
  .title .tbtn.hide-m {
    display: none;
  }
  .status div+div {
    max-width: 55%;
  }
  /* grafo: scheda sotto il canvas, campi a tutta larghezza */
  .gwrap {
    grid-template-columns: 1fr;
  }
  .gstage {
    height: 62vh;
    min-height: 320px;
  }
  .gpanel {
    height: auto;
  }
  .gtools > div {
    width: 100%;
  }
  .gtools label {
    flex: 0 0 88px;
  }
  .gac {
    flex: 1 1 calc(100% - 96px);
  }
  .gac input {
    width: 100%;
    height: 40px;
    font-size: 16px;
  }
}

/* Tools & TODO: le bozze dei post su una colonna */
@media (max-width: 760px) {
  .pbody {
    grid-template-columns: 1fr;
  }
  .pfoto {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* telefoni stretti: Avanti solo con l'icona, come in Esplora risorse */
@media (max-width: 420px) {
  #fwd {
    font-size: 0;
    gap: 0;
    padding-right: 5px;
  }
  .toolbar .tbtn {
    padding-right: 7px;
  }
}