/* Phone layout. base.html loads this file with media="(max-width: 700px)", so there is
   no media-query wrapper here: everything in it applies to narrow screens only, on top of
   style.css. The track table turns into a list of cards. */
.page { padding: 0.75rem 0.75rem 2rem; }
.site-header { position: static; flex-wrap: wrap; gap: 0.3rem 0.6rem; padding: 0.5rem 0.75rem; }
.brand { font-size: 1.05rem; }
.site-nav { order: 3; width: 100%; gap: 0.1rem; font-size: 0.92rem; overflow-x: auto; }
.site-nav a { padding: 0.3rem 0.55rem; white-space: nowrap; }
.user-menu { font-size: 0.85rem; }
h1 { font-size: 1.3rem; }

#map { height: 50vh; min-height: 240px; margin-bottom: 0.8rem; }
.toolbar { padding: 0.7rem 0.75rem; gap: 0.6rem; }
.filters { flex-direction: column; gap: 0.6rem; }
.range-slider input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }
.range-slider input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; }
.bulk-bar { flex-direction: column; align-items: stretch; }
.bulk-bar select, .bulk-bar button { width: 100%; }

/* One card per track: tick box, name and buttons on the first line, the numbers below. */
#tracks thead { display: none; }
#tracks tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.5rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); }
#tracks tbody tr:hover td { background: none; }
#tracks tbody td { display: block; padding: 0; border: none; font-size: 0.95rem; }
#tracks td.checkbox-col { order: 0; width: auto; }
#tracks td[data-col="name"] { order: 1; flex: 1 1 0; min-width: 0; max-width: none; white-space: normal; }
#tracks td[data-col="edit"] { order: 2; }
#tracks td.select-col { order: 3; width: auto; }
#tracks tbody tr::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
#tracks td[data-col="distance"], #tracks td[data-col="gain"], #tracks td[data-col="date"], #tracks td[data-col="dl"] {
    order: 5;
    font-size: 0.85rem;
    color: var(--muted);
    text-align: left;
}
#tracks td[data-col="distance"] { margin-left: 2.1rem; }
#tracks td[data-col="distance"]::after { content: " km"; }
#tracks td[data-col="gain"]::before { content: "\2191 "; }
#tracks td[data-col="gain"]::after { content: " m"; }
#tracks td[data-col="date"]::before { content: "\00b7 "; }
#tracks td[data-col="dl"] { margin-left: auto; }
#tracks td[data-col="duration"], #tracks td[data-col="komoot"] { display: none; }
.track-name .desc, .track-name .tags { white-space: normal; }

.inline-form { flex-direction: column; align-items: stretch; }
.inline-form label, .inline-form input, .inline-form button, .inline-form select { width: 100%; min-width: 0; box-sizing: border-box; }
.edit-form input { width: 100%; box-sizing: border-box; font-size: 1rem; }
.card { padding: 0.8rem 0.9rem; }
.project-head { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.share-url { width: 100%; }
table.plain { display: block; overflow-x: auto; }
.login-box { margin: 1.5rem auto; }
.account-facts { grid-template-columns: 1fr; gap: 0.1rem; }
.account-facts dt { margin-top: 0.5rem; }
.bar-col { min-width: 4rem; }
.longest { max-width: 8rem; }
.track-facts { gap: 0.2rem 1rem; font-size: 0.9rem; }