/* The site on phones.
/*
/* The original stylesheet has fixed widths made for a 1180px wide window.
/* On a screen narrower than 760px these rules put everything in one column
/* that fills the screen: the side boxes go above or below the page, posts
/* and comments shrink to fit, and the header gets a second row with the
/* feeds. Widths of the original are overridden with !important because it
/* sets them with long, very specific selectors (for example one per level
/* of nested comments). Keep the 760px in sync with MOBILE in app.js. */

/* the menu button and drawer only show on phones (see setupDrawer) */
#mobile-menu-button,
#mobile-drawer,
#mobile-drawer-mask {
  display: none;
}

@media (max-width: 760px) {
  html,
  body {
    min-width: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* ---------------------------------------------------------------- header */

  #header-space {
    height: 86px;
  }
  #header {
    min-width: 0;
    height: 86px;
    padding: 0 8px;
    position: relative;
  }
  #header a#logo {
    margin-right: 0;
  }
  #header a#logo img {
    height: 20px;
  }
  /* the feeds get their own row under the logo */
  #header .fll {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    margin: 0;
    height: 36px;
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  #header .fll a {
    flex: 1;
    margin: 0;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
  }
  #header .fll a.active {
    box-shadow: inset 0 -3px 0 #3098dc;
  }
  /* your profile and its menu are in the drawer */
  #header .flr a.profile {
    display: none;
  }
  /* the upload button only shows its icon */
  #header .flr a.button.upload-button {
    font-size: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
  #header .flr a.button.upload-button .upload-icon {
    margin-right: 0;
  }

  /* --------------------------------------------------------------- content */

  #content-container {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #content,
  #content.duo,
  #content.post,
  #content.center {
    width: auto !important;
    min-width: 0;
    max-width: none;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
  }
  #content .content-center,
  #content.duo .content-center,
  #content.post .content-center,
  #content.center .content-center {
    display: block;
    width: auto;
    min-width: 0;
  }
  /* side boxes go above the page (left) or below it (right) */
  #content .content-side,
  #content .content-side.left,
  #content .content-side.right {
    width: auto;
    float: none;
    margin: 0;
  }
  #content .content-side.left {
    order: -1;
  }
  #content .content-side .box,
  #content .content-center .box,
  #content.post .content-center .box {
    float: none;
    width: auto;
    box-sizing: border-box;
    margin-bottom: 8px;
  }
  #content .content-side .box .title {
    margin-left: -14px;
    margin-right: -14px;
  }
  #content .content-center .box .left,
  #content .content-center .box .right,
  #content .content-center .box .right .avatar-right {
    width: auto;
    float: none;
  }
  #content .content-center .box .left {
    margin-bottom: 6px;
  }
  #content .content-center .box .right textarea,
  #content .content-center .box .right .avatar-right input,
  #content .content-center .box input[type="text"],
  #content .content-center .box input[type="password"],
  #content .content-center .box input[type="email"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
  }
  #content .content-center #feed-loader .button.giant {
    width: auto;
    float: none;
    display: block;
  }
  /* profile box */
  #content .content-side .box.profile a.username,
  #content .content-side .box.profile .description {
    width: auto;
    float: none;
    display: block;
    margin-left: 70px;
  }
  /* phones have no keyboard */
  #content .content-side .box.shortcuts {
    display: none;
  }
  .next-posts {
    float: none;
    width: auto;
  }
  .next-posts .next_box {
    width: auto;
  }
  .next-posts .next_box .right {
    width: auto;
    float: none;
    margin-left: 140px;
  }

  /* user page tabs: "23 Posts · 3,449 Likes · ..." */
  #content .content-center .box.user-tabs {
    width: auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    line-height: 1.6;
  }
  .user-tabs .sep {
    display: none;
  }

  #content .content-center .box.user-comments {
    width: auto;
  }

  /* messages */
  #content .content-center .box.message-thread {
    width: auto;
  }
  #create-new-message {
    width: auto;
    height: auto;
  }
  #create-new-message-recipient {
    float: none;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    font-size: 16px;
  }
  .message-container .message.message-text {
    max-width: calc(100% - 70px);
  }

  /* ----------------------------------------------------------------- posts */

  .feed {
    width: auto;
  }
  .feed .post-container {
    margin-bottom: 8px;
  }
  .feed .post {
    float: none;
    width: auto;
    padding: 12px;
  }
  .post .title {
    float: none;
  }
  .post .source img,
  .post .source video,
  #content .content-center .box.post .source,
  #content .content-center .box.post .source img,
  #content .content-center .box.post .source video {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .post .post-info {
    font-size: 14px;
  }
  /* the vote, comment and share buttons fit in one row: the share
     buttons only show their icon */
  .post .post-action .action-container {
    padding-left: 11px;
    padding-right: 11px;
    margin-right: 6px;
  }
  .post .post-action .twitter-share,
  .post .post-action .facebook-share {
    padding-left: 11px;
    padding-right: 11px;
    margin-right: 0;
    margin-left: 6px;
  }
  .post .post-action .twitter-share .text,
  .post .post-action .facebook-share .text {
    display: none;
  }
  .post .post-action .twitter-share .icon,
  .post .post-action .facebook-share .icon {
    margin-right: 0;
  }
  /* When the time and poster do not fit next to the score, they go on a
     line of their own. That floated line used to hang into the buttons
     and push some of them down; now it stays above them. */
  .post .post-info {
    display: flow-root;
  }
  /* The buttons always stay in one row, the share buttons on the right.
     The floats only kept them in line while they all fit. */
  .post .post-action {
    display: flex;
    align-items: center;
  }
  .post .post-action > * {
    flex: none;
  }
  .post .post-action .facebook-share {
    order: 1;
    margin-left: auto;
  }
  .post .post-action .twitter-share {
    order: 2;
  }
  .feed .post-container .infeed-comment,
  .feed .post-container .infeed-comment .create-comment,
  #content .content-center .box.post .create-comment {
    float: none;
    width: auto;
    box-sizing: border-box;
  }

  /* -------------------------------------------------------------- comments */

  /* a comment form: avatar on the left, the box takes the rest */
  .feed .post-container .infeed-comment .create-comment .text,
  #content .content-center .box.post .create-comment .text,
  .comment .create-reply,
  .comment .create-reply .text {
    float: none;
    width: auto !important;
    display: flow-root;
  }
  .feed .post-container .infeed-comment .create-comment .avatar,
  #content .content-center .box.post .create-comment .avatar {
    width: 32px;
    margin-right: 8px;
  }
  .feed .post-container .infeed-comment .create-comment .avatar img,
  #content .content-center .box.post .create-comment .avatar img {
    width: 32px;
    height: 32px;
  }
  .feed .post-container .infeed-comment .create-comment .text textarea,
  #content .content-center .box.post .create-comment .text textarea,
  .comment .create-reply .text textarea {
    float: none;
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    /* 16px stops phones from zooming in when the box is tapped */
    font-size: 16px;
    /* Empty, the box holds one line and is as tall as the 32px avatar
       beside it: 20px line + 2 * 5px padding + 2 * 1px border. The desktop
       heights are for content-box, so with border-box the padding ate the
       line until autoGrow resized the box on the first keystroke. */
    line-height: 20px;
    padding: 5px;
    height: 32px;
    min-height: 32px;
  }
  /* a picture is attached: it sits left of the box */
  .feed .post-container .infeed-comment .create-comment .text .picture[style*="block"] + textarea,
  #content .content-center .box.post .create-comment .text .picture[style*="block"] + textarea,
  .comment .create-reply .text .picture[style*="block"] + textarea {
    width: calc(100% - 70px) !important;
    margin-left: 70px;
  }

  /* comments: replies are indented a little, not by a fixed width */
  .comment {
    float: none;
    width: auto !important;
    display: flow-root;
  }
  .comment .comment {
    margin-left: 16px;
  }
  .comment .avatar {
    width: 32px;
  }
  .comment .avatar img {
    width: 32px;
    height: 32px;
  }
  .comment .text {
    float: none;
    width: auto !important;
    display: flow-root;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  .comment .comment-hidden-hint {
    margin-left: 16px !important;
  }
  .comment .text img.full,
  .comment .text video.full {
    max-width: 100%;
    height: auto;
  }
  .comment .comment-edit-form textarea {
    font-size: 16px;
    box-sizing: border-box;
  }

  /* ---------------------------------------------------------------- drawer */

  #mobile-menu-button {
    display: block;
    float: left;
    width: 22px;
    padding: 16px 12px 16px 4px;
  }
  #mobile-menu-button span {
    display: block;
    height: 2px;
    margin: 4px 0;
    border-radius: 1px;
    background-color: #bbbbbb;
  }
  #mobile-menu-button:active span {
    background-color: #fff;
  }
  /* the feeds' left sidebar only has your profile (now in the drawer) and
     the keyboard shortcuts */
  html.page-front #content-side-left,
  html.page-rising #content-side-left,
  html.page-fresh #content-side-left {
    display: none;
  }

  #mobile-drawer-mask {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  html.drawer-open #mobile-drawer-mask {
    opacity: 1;
    pointer-events: auto;
  }
  #content #mobile-drawer {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 201;
    width: 300px;
    max-width: 86vw;
    box-sizing: border-box;
    padding: 0 8px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #ebeced;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
    transform: translateX(-110%);
    visibility: hidden;
    transition:
      transform 0.2s ease,
      visibility 0s 0.2s;
  }
  html.drawer-open #content #mobile-drawer {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease;
  }
  html.drawer-open,
  html.drawer-open body {
    overflow: hidden;
  }
  .mobile-drawer-header {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 50px;
    margin: 0 -8px 8px;
    padding: 0 8px 0 16px;
    background-color: #272b2b;
  }
  .mobile-drawer-header .mobile-drawer-logo {
    float: left;
    margin-top: 15px;
  }
  .mobile-drawer-header .mobile-drawer-close {
    float: right;
    padding: 0 10px;
    line-height: 50px;
    font-size: 18px;
    color: #bbbbbb;
  }
  /* the "You" menu of the header, as a list */
  .mobile-drawer-menu .profile-dropdown {
    display: block !important;
    margin: 0 -14px -14px;
  }
  .mobile-drawer-menu .profile-dropdown a {
    display: block;
    color: #333;
    font-size: 15px;
  }
  .mobile-drawer-menu .profile-dropdown a div {
    padding: 13px 14px;
    border-top: 1px solid #e1e1e1;
  }
  .mobile-drawer-menu .profile-dropdown a:active div {
    background-color: #f6f6f6;
  }
  /* the right sidebar, moved in */
  #mobile-drawer #sidebar-right {
    width: auto;
    margin: 0;
  }
  html.dark #content #mobile-drawer {
    background-color: #161618;
  }
  html.dark .mobile-drawer-header {
    background-color: #333333;
  }
  html.dark .mobile-drawer-menu .profile-dropdown a {
    color: #afafaf;
  }
  html.dark .mobile-drawer-menu .profile-dropdown a div {
    border-top-color: #444;
  }
  html.dark .mobile-drawer-menu .profile-dropdown a:active div {
    background-color: #2a2a2a;
  }

  /* ---------------------------------------------------------------- footer */

  #footer {
    width: auto;
    padding: 0 16px;
  }

  /* ---------------------------------------------------------------- popups */

  .upload-popup,
  .report-popup.post,
  .report-popup.user,
  .report-popup.comment,
  #signup-login-popup,
  #advanced-search-popup {
    box-sizing: border-box;
    width: auto !important;
    max-width: none;
    left: 8px !important;
    right: 8px !important;
    margin-left: 0 !important;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
  }
  .upload-popup input[type="text"],
  #signup-login-popup input,
  #advanced-search-popup input:not([type="checkbox"]) {
    box-sizing: border-box;
    width: 100% !important;
    font-size: 16px;
  }
  .upload-popup #upload-preview,
  .upload-popup #upload-video {
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  img#zoom-image {
    max-width: 100vw;
  }
}

/* the search bar under the header (see searchBar in app.js) */
@media (max-width: 760px) {
  #header-search-container {
    top: 86px;
  }
  #header-search-container #header-search {
    width: auto;
    padding: 0 12px;
  }
  /* the field on its own line, the three buttons under it */
  #header-search-container #header-search #header-search-q {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    float: none;
    /* 16px or more, or phones zoom in when it is focused */
    font-size: 16px;
  }
  #header-search-buttons {
    float: none;
    margin-top: 8px;
    text-align: right;
  }
  #header-search-buttons .button {
    margin-left: 6px;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}