/* ============================================================
   Mobile app shell — loaded last in base.html (after page CSS),
   so phone rules here win over the desktop-first sheets above.
   Breakpoint 860px matches the header/drawer switch in style.css.
   ============================================================ */

:root {
  --tabbar-h: 58px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgba(42, 95, 58, 0.12);
}

img, video, iframe { max-width: 100%; }

.mobile-tabbar { display: none; }

@media (max-width: 860px) {
  /* `clip` (unlike `hidden`) doesn't create a scroll container, so the
     sticky header keeps working. */
  html, body { overflow-x: clip; }

  /* ---------- Header: one compact row + search row ---------- */
  body.chesshome-zine .site-header-primary {
    column-gap: 6px;
    row-gap: 6px;
    padding: 6px max(12px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
  }
  body.chesshome-zine .brand {
    font-size: 19px;
    gap: 6px;
    min-width: 0;
  }
  body.chesshome-zine .brand-mark {
    width: 28px;
    height: 28px;
    font-size: 24px;
  }
  .site-header-utils { gap: 2px; }
  .nav-util,
  .nav-account-trigger { min-width: 44px; height: 44px; }
  /* Messages lives in the bottom tab bar on phones. */
  .site-header-utils .nav-util-messages { display: none; }

  .site-search { margin: 0; }
  .site-search input[type="search"] {
    height: 40px;
    padding-left: 34px;
  }
  .site-search .site-search-icon { left: 12px; }

  /* ---------- Bottom tab bar ---------- */
  body.chesshome-zine > .mobile-tabbar,
  .mobile-tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding: 0 env(safe-area-inset-right) var(--safe-bottom) env(safe-area-inset-left);
    background: rgba(251, 247, 239, 0.97);
    -webkit-backdrop-filter: saturate(1.1) blur(8px);
    backdrop-filter: saturate(1.1) blur(8px);
    border-top: 1px solid var(--rule, #d8ceb6);
    box-shadow: 0 -4px 16px rgba(70, 50, 30, 0.06);
  }
  .mobile-tabbar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    color: var(--ink-mute, #6a5d52);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
  }
  .mobile-tabbar a:hover { text-decoration: none; color: var(--ink, #1a1512); }
  .mobile-tabbar svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-tabbar a.active { color: var(--forest, #2a5f3a); }
  .mobile-tabbar a.active svg { stroke-width: 2.1; }
  .mobile-tabbar a.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28%;
    right: 28%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--wood-a, #8b5a2b);
  }

  body { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }

  /* ---------- Page frame ---------- */
  body.chesshome-zine .site-main {
    margin: 16px auto 32px;
    padding: 0 max(12px, env(safe-area-inset-left));
  }
  body.chesshome-zine h1 { font-size: 28px; }
  body.chesshome-zine h2 { font-size: 21px; }
  .site-footer { padding: 16px 16px 20px; }

  /* ---------- Touch: tap targets + no iOS focus zoom ---------- */
  .btn { min-height: 44px; padding-inline: 16px; }
  .btn.btn-sm { min-height: 38px; padding-inline: 12px; }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ---------- Feed + group pages: content before side widgets ---------- */
  .insta-page-wrapper { padding: 0; }
  .insta-page { order: 1; }
  .insta-sidebar { order: 2; }

  .insta-page .zine-masthead { padding: 8px 0 14px; margin-bottom: 12px; }
  body.chesshome-zine .insta-page .zine-masthead-title { font-size: 28px; margin: 4px 0; }
  .insta-page .zine-masthead-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin: 14px -12px 0;
    padding: 2px 12px 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .insta-page .zine-masthead-nav::-webkit-scrollbar { display: none; }
  .insta-page .zine-masthead-nav a {
    flex: 0 0 auto;
    min-height: 36px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .insta-feed { gap: 12px; }
  .insta-card { border-radius: 10px; }

  /* ---------- Messages: list OR thread, never both ---------- */
  .dm-wrap,
  .dm-wrap.dm-wrap-thread,
  .dm-wrap.dm-wrap-list { grid-template-columns: minmax(0, 1fr); }
  .dm-wrap-thread .dm-list { display: none; }
  .dm-wrap-list:has(.dm-item) { min-height: 0; }
  .dm-wrap-list .dm-list { max-height: none; border-bottom: 0; }
  .dm-wrap-list:has(.dm-item) .dm-thread { display: none; }
  .dm-wrap-list .dm-list-head { display: none; }
  .dm-item { min-height: 64px; }

  .dm-wrap-thread {
    margin: -16px calc(-1 * max(12px, env(safe-area-inset-left))) -32px;
    border-radius: 0;
    border-inline: 0;
    height: calc(100dvh - 104px - var(--tabbar-h) - var(--safe-bottom));
    min-height: 360px;
  }
  .dm-wrap-thread .dm-thread { height: 100%; }
  .dm-thread-head { padding: 8px 12px; gap: 8px; }
  .dm-thread-who { min-width: 0; }
  .dm-thread-head .status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dm-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-left: -6px;
    border-radius: 999px;
    color: var(--ink, #1a1512);
    font-size: 22px;
    text-decoration: none;
  }
  .dm-back:hover { background: rgba(0, 0, 0, 0.05); text-decoration: none; }
  .dm-msg { max-width: 86%; }
  .dm-msg .when { white-space: nowrap; }
  .dm-compose { padding: 8px 10px; }
  .dm-compose input { min-width: 0; }

  /* ---------- Small fixes for components that overflow ---------- */
  .cross-banner { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .cross-banner-flags { font-size: 18px; white-space: normal; }
  .notif-head { flex-wrap: wrap; align-items: flex-start; }
  .notif-page { margin-top: 8px; padding: 0; }

  /* Modal-ish layers should sit above the tab bar. */
  dialog { max-width: calc(100vw - 24px); }
}

@media (min-width: 861px) {
  .dm-back { display: none; }
}

@media (max-width: 359px) {
  body.chesshome-zine .brand-text { display: none; }
}