/* Gather Device-Fit v2 — load AFTER the page's other stylesheets.
   Targets horizontal overflow, narrow phones, tablets, desktops and TV displays. */

:root {
  --gather-fit-edge: clamp(12px, 2.4vw, 38px);
  --gather-fit-wide: 1680px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Root-level clipping matters on mobile browsers; body-only clipping may not
   stop the document itself from being horizontally scrollable. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  scroll-padding-top: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  overflow-x: hidden !important;
  position: relative;
}

/* Prevent oversized media and long pasted links from expanding the viewport. */
img,
video,
canvas,
iframe,
svg,
picture {
  max-width: 100%;
}
img,
video {
  height: auto;
}
pre,
code,
p,
li,
a,
h1,
h2,
h3,
h4,
small,
strong,
span,
time {
  overflow-wrap: anywhere;
}
button,
input,
select,
textarea {
  max-width: 100%;
  min-width: 0;
  font: inherit;
}
textarea,
input {
  box-sizing: border-box;
}

/* HOMEPAGE: wide containers remain centered; cards must shrink beside avatars. */
body.gather-home {
  max-width: 100%;
  overflow-x: hidden !important;
}
.gather-home .gh-topbar,
.gather-home .gh-main,
.gather-home .gh-footer {
  width: 100%;
  max-width: var(--gather-fit-wide);
  min-width: 0;
  margin-inline: auto;
}
.gather-home .gh-topbar {
  padding-left: var(--gather-fit-edge);
  padding-right: var(--gather-fit-edge);
  flex-wrap: wrap;
}
.gather-home .gh-brand,
.gather-home .gh-nav,
.gather-home .gh-current-user,
.gather-home .gh-current-user-link,
.gather-home .gh-logout-form {
  min-width: 0;
  max-width: 100%;
}
.gather-home .gh-nav {
  flex-wrap: wrap;
  gap: clamp(8px, 1.4vw, 22px);
}
.gather-home .gh-main {
  padding-left: var(--gather-fit-edge);
  padding-right: var(--gather-fit-edge);
}
.gather-home .gh-hero {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .9fr);
  min-width: 0;
  gap: clamp(20px, 4vw, 78px);
}
.gather-home .gh-hero-copy,
.gather-home .gh-hero-scene,
.gather-home .gh-values,
.gather-home .gh-value-item,
.gather-home .gh-community-section,
.gather-home .gh-section-heading,
.gather-home .gh-composer-card,
.gather-home .gh-composer-form,
.gather-home .gh-post-list,
.gather-home .gh-post-card,
.gather-home .gh-post-content,
.gather-home .gh-replies,
.gather-home .gh-reply-body {
  min-width: 0;
  max-width: 100%;
}
.gather-home .gh-post-card {
  width: 100%;
  align-items: flex-start;
}
/* Important: an older rule sets this to width:100% while the avatar sits beside
   it in a flex row. That can make each post wider than a phone. */
.gather-home .gh-post-card > .gh-post-content {
  flex: 1 1 0%;
  width: auto !important;
  min-width: 0;
  max-width: 100%;
}
.gather-home .gh-post-text,
.gather-home .gh-reply-body > p,
.gather-home .gh-current-name,
.gather-home .gh-post-meta,
.gather-home .gh-reply-meta {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.gather-home .gh-post-media-display,
.gather-home .gh-post-image-link,
.gather-home .gh-post-media-tools,
.gather-home .gh-post-upload-status,
.gather-home .gh-post-media-preview {
  min-width: 0;
  max-width: 100%;
}
.gather-home .gh-post-image,
.gather-home .gh-post-video,
.gather-home .gh-composer-media-preview img,
.gather-home .gh-composer-media-preview video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(76vh, 900px);
  object-fit: contain;
}
.gather-home .gh-hero-actions,
.gather-home .gh-composer-bottom,
.gather-home .gh-post-media-tools,
.gather-home .gh-footer,
.gather-home .gh-section-heading,
.gather-home .gh-hero-note {
  min-width: 0;
  flex-wrap: wrap;
}
.gather-home .gh-page-glow {
  max-width: 100vw;
  pointer-events: none;
}
.gather-home .gh-footer {
  padding-left: var(--gather-fit-edge);
  padding-right: var(--gather-fit-edge);
  flex-wrap: wrap;
}

/* PROFILE + SETTINGS: keep both columns shrinkable and content bounded. */
body.account-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}
.account-page .account-shell {
  width: calc(100% - 2 * var(--gather-fit-edge));
  max-width: 1480px;
  min-width: 0;
  margin-inline: auto;
}
.account-page .account-card,
.account-page .account-grid,
.account-page .account-panel,
.account-page .account-posts,
.account-page .account-post,
.account-page .account-post-content,
.account-page .account-post-media,
.account-page .account-bio {
  min-width: 0;
  max-width: 100%;
}
.account-page .account-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
.account-page .account-nav,
.account-page .account-nav-links,
.account-page .profile-hero,
.account-page .profile-action-row,
.account-page .account-stats {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}
.account-page .account-nav-links a,
.account-page .account-button {
  min-width: 0;
  overflow-wrap: anywhere;
}
.account-page .account-field,
.account-page .account-field input,
.account-page .account-field textarea,
.account-page .account-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.account-page .account-post-media img,
.account-page .account-post-media video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(78vh, 1000px);
  object-fit: contain;
}

/* LOGIN + REGISTER: avoid min-content widths creating horizontal page overflow. */
body.gather-register-page,
.gather-register-page .register-shell,
.gather-register-page .topbar,
.gather-register-page .register-layout,
.gather-register-page .story-panel,
.gather-register-page .story-content,
.gather-register-page .form-panel,
.gather-register-page .form-card,
.gather-register-page .register-form,
.gather-register-page .field-group,
.gather-register-page .input-shell,
.gather-register-page .social-auth-buttons {
  min-width: 0;
  max-width: 100%;
}
.gather-register-page .register-shell,
.gather-register-page .topbar,
.gather-register-page .register-layout {
  width: 100%;
}
.gather-register-page .register-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 530px);
}
.gather-register-page .register-form input,
.gather-register-page .input-shell input,
.gather-register-page .social-auth-button,
.gather-register-page .submit-button {
  min-width: 0;
  max-width: 100%;
}
.gather-register-page .register-form input,
.gather-register-page .input-shell input {
  width: 100%;
}
.gather-register-page .social-auth-buttons,
.gather-register-page .topbar-action {
  flex-wrap: wrap;
}

/* PHONES + SMALL TABLETS: one-column layout, compact padding, no sideways scroll. */
@media (max-width: 920px) {
  .gather-home .gh-topbar {
    align-items: flex-start;
    gap: 12px;
  }
  .gather-home .gh-nav {
    width: 100%;
    justify-content: flex-start;
    gap: 8px 12px;
  }
  .gather-home .gh-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 20px;
  }
  .gather-home .gh-hero-scene {
    width: 100%;
    min-width: 0;
    min-height: clamp(240px, 42vw, 420px);
  }
  .gather-home .gh-values {
    grid-template-columns: minmax(0, 1fr);
  }
  .gather-home .gh-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .account-page .account-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .gather-register-page .register-layout {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    gap: 18px;
  }
  .gather-register-page .story-panel {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  :root { --gather-fit-edge: 12px; }
  .gather-home .gh-topbar { padding: 13px var(--gather-fit-edge); }
  .gather-home .gh-nav { gap: 8px; }
  .gather-home .gh-nav-link { min-height: 42px; display: inline-flex; align-items: center; }
  .gather-home .gh-nav-divider { display: none; }
  .gather-home .gh-current-user-link { flex-wrap: wrap; max-width: 100%; }
  .gather-home .gh-main { padding: 18px var(--gather-fit-edge) 0; }
  .gather-home .gh-hero h1 { font-size: clamp(29px, 8.8vw, 44px); line-height: 1.12; letter-spacing: -.8px; }
  .gather-home .gh-hero-description { font-size: 14px; line-height: 1.7; }
  .gather-home .gh-hero-scene { min-height: 265px; padding: 14px; border-radius: 18px; }
  .gather-home .gh-scene-card { width: 100%; max-width: 310px; padding: 17px; }
  .gather-home .gh-scene-card h2 { font-size: clamp(20px, 6vw, 25px); }
  .gather-home .gh-composer-card { width: 100%; padding: 12px; gap: 10px; flex-wrap: wrap; }
  .gather-home .gh-composer-form { width: 100%; flex: 1 1 100%; }
  .gather-home .gh-composer-form textarea { width: 100%; min-height: 100px; font-size: 16px; }
  .gather-home .gh-composer-bottom { align-items: stretch; flex-direction: column; }
  .gather-home .gh-composer-bottom .gh-button { width: 100%; }
  .gather-home .gh-post-card { width: 100%; padding: 12px; gap: 9px; }
  .gather-home .gh-post-avatar { width: 32px; height: 32px; flex: 0 0 32px; }
  .gather-home .gh-post-card > .gh-post-content { flex: 1 1 0%; width: auto !important; }
  .gather-home .gh-post-text { font-size: 14px; line-height: 1.65; }
  .gather-home .gh-reply-form { flex-wrap: wrap; }
  .gather-home .gh-reply-form input { flex: 1 1 100%; width: 100%; font-size: 16px; }
  .gather-home .gh-reply-form .gh-button { width: 100%; }
  .gather-home .gh-post-mark { display: none; }
  .gather-home .gh-footer { gap: 10px 16px; }

  .account-page .account-shell { width: calc(100% - 18px); padding-top: 10px; padding-bottom: 26px; }
  .account-page .account-nav { align-items: stretch; flex-direction: column; gap: 10px; margin-bottom: 18px; }
  .account-page .account-nav-links { display: flex; width: 100%; gap: 6px; }
  .account-page .account-nav-links a { flex: 1 1 120px; justify-content: center; }
  .account-page .account-card { padding: 15px 12px; border-radius: 16px; }
  .account-page .account-panel { padding: 13px; }
  .account-page .profile-hero { align-items: flex-start; gap: 12px; }
  .account-page .profile-avatar { width: 76px; height: 76px; flex: 0 0 76px; }
  .account-page .account-title { font-size: clamp(24px, 7.6vw, 34px); letter-spacing: -.7px; }
  .account-page .profile-action-row > * { flex: 1 1 130px; }
  .account-page .account-field input,
  .account-page .account-field textarea,
  .account-page .account-select { font-size: 16px; }
  .account-page .account-button { min-height: 44px; }

  .gather-register-page .topbar { padding: 12px var(--gather-fit-edge); gap: 10px; }
  .gather-register-page .brand { min-width: 0; }
  .gather-register-page .brand-name { font-size: clamp(21px, 6vw, 25px); }
  .gather-register-page .topbar-action { flex-wrap: wrap; gap: 8px; }
  .gather-register-page .register-layout { padding: 14px var(--gather-fit-edge) 24px; gap: 14px; }
  .gather-register-page .story-content { padding: 20px 16px; }
  .gather-register-page .story-content h1 { font-size: clamp(29px, 8vw, 40px); letter-spacing: -.8px; }
  .gather-register-page .story-intro { margin: 13px 0 18px; font-size: 14px; line-height: 1.65; }
  .gather-register-page .feature-list { gap: 14px; }
  .gather-register-page .form-card { padding: 18px 13px; border-radius: 17px; }
  .gather-register-page .form-heading { gap: 10px; }
  .gather-register-page .form-heading h2 { font-size: clamp(24px, 7vw, 31px); }
  .gather-register-page .input-shell { gap: 8px; padding-inline: 10px; }
  .gather-register-page .register-form input { font-size: 16px; }
  .gather-register-page .social-auth-buttons { display: grid; grid-template-columns: minmax(0, 1fr); }
  .gather-register-page .social-auth-button,
  .gather-register-page .submit-button { width: 100%; min-height: 46px; }
}

@media (max-width: 360px) {
  .gather-home .gh-brand-text strong { font-size: 22px; }
  .gather-home .gh-owner-badge { font-size: 8px; padding: 3px 6px; }
  .gather-home .gh-post-card { padding: 9px; gap: 7px; }
  .gather-home .gh-post-meta { gap: 5px; }
  .account-page .account-shell { width: calc(100% - 12px); }
  .account-page .account-card { padding: 12px 9px; }
  .account-page .account-nav-links a { flex: 1 1 100%; }
  .gather-register-page .form-card { padding: 16px 11px; }
}

/* Laptops and TV-sized displays: preserve readable centered content, wrap nav
   and action rows, and avoid a giant stretched feed on wide displays. */
@media (min-width: 1400px) {
  .gather-home .gh-topbar,
  .gather-home .gh-footer { max-width: 1720px; padding-inline: clamp(32px, 3vw, 70px); }
  .gather-home .gh-main { max-width: 1600px; padding-inline: clamp(32px, 3vw, 70px); }
  .gather-home .gh-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(36px, 4vw, 86px); }
  .gather-home .gh-hero h1 { font-size: clamp(52px, 3.6vw, 78px); }
  .gather-home .gh-hero-scene { min-height: clamp(420px, 32vw, 620px); }
  .gather-home .gh-post-list { max-width: 1280px; margin-inline: auto; }
  .account-page .account-shell { max-width: 1560px; }
  .gather-register-page .topbar,
  .gather-register-page .register-layout { max-width: 1800px; margin-inline: auto; }
  .gather-register-page .register-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 530px); gap: clamp(36px, 4vw, 88px); }
}

@media (min-width: 2200px) {
  .gather-home .gh-main { max-width: 1740px; }
  .gather-home .gh-post-list { max-width: 1320px; }
  .account-page .account-shell { max-width: 1680px; }
}

@media (pointer: coarse) {
  .gh-button, .gh-nav-link, .gh-media-option,
  .account-button, .account-nav-links a,
  .login-link, .social-auth-button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}