/* =============================================================
   SKIPPY SWAGS — responsive.css
   Narrow-screen and touch adjustments for the stacked layout.
   ============================================================= */

@media (max-width: 700px) {
  :root {
    --gap: 8px;
    --radius-lg: 16px;
  }

  .nav-row {
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  /* Too tight to share the row with the wordmark — give it its own. */
  .ticker {
    order: 3;
    flex-basis: 100%;
  }
  .socials-grid {
    grid-template-columns: 1fr;
  }

  .well--log {
    max-height: 420px;
  }

  .chat-msg__time {
    opacity: 1;
  }

}

@media (max-width: 420px) {
  .hotlink:has(.hotlinks-strip__item:not(.hotlinks-strip__item--buy)) {
    display: none;
  }
  .composer__counter {
    display: none;
  }
}

/* Touch: bigger targets, and no hover-only reveals. */
@media (pointer: coarse) {
  .icon-btn,
  .pill-btn,
  .roster-toggle {
    min-height: 36px;
  }
  .emoticon-btn {
    height: 34px;
    min-width: 40px;
  }
  .chat-msg__time {
    opacity: 1;
  }
}

/* ---- stacked layout (below the 1200px theater): the social links become
   a bare single-line row right under the nav; the posts feed keeps its own
   panel further down. The rail's wrappers are flattened with
   display: contents so both boxes become direct items of .app-body. ---- */
@media (max-width: 1199px) {
  .app-body {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }
  .app-body > .win {
    margin-bottom: 0;
  }

  .win--rail,
  .win--rail .rail__content,
  .win--rail .rail__inner,
  .win--rail .socials-grid {
    display: contents;
  }
  .win--rail .rail__handle {
    display: none;
  }
  .social-box--links .social-box__header {
    display: none;
  }

  .social-box--links {
    order: -1;
  }

  .social-box--feed {
    padding: var(--gap);
    background: var(--surface);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--line);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel), inset 0 1px 0 var(--line-hi);
  }
}