/* Phone layouts. The original tkavault.net stylesheet (styles.css) assumed a
   desktop window of at least 900px; these rules only apply below that and
   leave the desktop look untouched. */

@media (max-width: 700px) {
  /* Header: shrink the wordmark and menu so everything fits on one row. */
  body.frontend header { min-width: 0; }
  body.frontend header .logo { margin-left: 8px; margin-right: 10px; padding-right: 10px; }
  body.frontend header .logo img { max-width: 100px; margin-top: 12px; }
  body.frontend header nav { margin-top: 23px; white-space: nowrap; overflow-x: auto; max-width: calc(100vw - 130px); scrollbar-width: none; }
  body.frontend header nav::-webkit-scrollbar { display: none; }
  body.frontend header nav ul li { margin-right: 10px; }
  body.frontend header nav ul li a { font-size: 11px; line-height: 14px; }
  body.frontend header nav ul li.admin-seperator { display: none; }

  /* Browse: stack the search controls. */
  body.frontend .route.browse .search-bar .wrapper { min-width: 0; padding: 10px 12px; font-size: 13px; }
  body.frontend .route.browse .search-bar .wrapper .search-text,
  body.frontend .route.browse .search-bar .wrapper .timeline-slider,
  body.frontend .route.browse .search-bar .wrapper .search-media-type { float: none; width: 100%; display: table; }
  body.frontend .route.browse .search-bar .wrapper .search-text .field-label,
  body.frontend .route.browse .search-bar .wrapper .timeline-slider .field-label,
  body.frontend .route.browse .search-bar .wrapper .search-media-type .field-label { width: 88px; padding-left: 0; }
  body.frontend .route.browse .search-bar .wrapper .timeline-slider { margin-top: 10px; }
  body.frontend .route.browse .search-bar .wrapper .timeline-slider .control .ui .label { width: 40px; font-size: 12px; }
  body.frontend .route.browse .search-bar .wrapper .timeline-slider .control .ui .label.start { text-align: left; }
  body.frontend .route.browse .search-bar .wrapper .timeline-slider .control .ui .label.end { text-align: right; }
  /* Keep the slider handles clear of the year labels on either side. */
  body.frontend .route.browse .search-bar .wrapper .timeline-slider .control .ui .slider #slider { left: 16px; right: 16px; }
  body.frontend .route.browse .search-bar .wrapper .search-media-type { margin-top: 6px; height: auto; line-height: 28px; }
  body.frontend .route.browse .search-bar .wrapper .search-media-type .input { white-space: normal; }
  body.frontend .route.browse .search-bar .wrapper .search-media-type .input .icheckbox_square-grey { vertical-align: middle; }
  body.frontend .route.browse .search-bar .wrapper .search-media-type .input label { margin: 0 12px 0 6px; font-size: 11px; }

  /* Browse: three smaller cards per row. */
  body.frontend .route.browse .results .media .item { width: 33.33%; height: 120px; }
  body.frontend .route.browse .results .media .item .container .image { top: 4px; left: 4px; right: 4px; bottom: 4px; }
  body.frontend .route.browse .results .media .item .container .tooltip .text { left: 8px; right: 8px; font-size: 11px; line-height: 14px; }
  body.frontend .route.browse .results .media .item .container .tooltip .text .attachment-types img { max-height: 24px; }

  /* Quick preview: one scrolling column over the grid. */
  body.frontend .route.browse .preview { position: fixed; top: 60px; bottom: 30px; overflow-y: auto; background: rgba(0, 0, 0, 0.92); }
  body.frontend .route.browse .preview .content,
  body.frontend .route.browse .preview .related-media { position: relative; width: 100%; height: auto; display: block; }
  body.frontend .route.browse .preview .wrapper { position: relative; top: 0; bottom: auto; left: 0; right: 0; padding: 16px; }
  body.frontend .route.browse .preview .content .featured-preview,
  body.frontend .route.browse .preview .content .info { display: block; padding: 0; }
  body.frontend .route.browse .preview .content .featured-preview img { max-width: 100%; max-height: 50vh; display: block; margin: 0 auto 8px; }
  body.frontend .route.browse .preview .content .info { margin-top: 12px; }
  body.frontend .route.browse .preview .related-media .wrapper { border-left: 0; border-top: 1px solid #333; padding-top: 50px; }
  body.frontend .route.browse .preview .related-media .wrapper .close { position: fixed; top: 72px; right: 12px; z-index: 5; }
  body.frontend .route.browse .preview .related-media .wrapper .related { position: static; }
  body.frontend .route.browse .preview .related-media .wrapper .related .media .thumbnail .image { width: 100px; height: 100px; }

  /* About: narrower margins. */
  body.frontend .route.about-tka .wrapper { margin: 40px 10px; }
}