/* Outrider — MVP styles (mobile-first, dark) */
:root{
  --bg:#0b0d0f;--card:#111418;--muted:#9aa4af;--text:#e9eef4;--brand:#00a37a;--brand-2:#00c29a;--red:#ff4d4f;--border:#1b2026
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}

.container{max-width:1100px;margin:0 auto;padding:16px}


/* Ensure header actions never disappear on small screens */
.topbar .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;       /* allow buttons to wrap instead of overflow */
  align-items: center;
  justify-content: flex-end;
}
.topbar .actions .btn {
  white-space: nowrap;   /* keep buttons from breaking weirdly */
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* logo left, actions right */
}


/* Topbar */
header.topbar{position:sticky;top:0;z-index:20;background:rgba(11,13,15,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.topbar-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 16px}
.logo{display:flex;gap:10px;align-items:center}
.logo .mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;font-weight:800}
.logo h1{font-size:18px;margin:0}
.actions{display:flex;gap:8px;align-items:center}

/* Buttons */
.btn{border:1px solid var(--border);background:#12161a;color:var(--text);padding:8px 12px;border-radius:14px;cursor:pointer;font-weight:600}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#07130f}
.btn:active{transform:translateY(1px)}

/* Layout grid */
.grid{display:grid;grid-template-columns:340px 1fr;gap:16px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.card .hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.card .bd{padding:16px}

/* Profile */
.profile{display:flex;gap:14px;align-items:center}
.avatar{width:72px;height:72px;border-radius:50%;background:#0f1317;border:1px solid var(--border);display:grid;place-items:center;font-weight:800}
.profile h2{margin:0 0 4px;font-size:18px}
.muted{color:var(--muted)}
.tiny{font-size:12px}

/* Composer */
.composer .tabs{display:flex;gap:8px;margin-bottom:10px}
.chip{padding:6px 10px;border-radius:12px;border:1px solid var(--border);cursor:pointer}
.chip.active{border-color:var(--brand);color:var(--brand)}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
input[type="text"], textarea, select{background:#0f1317;border:1px solid var(--border);border-radius:12px;padding:10px;color:var(--text)}
input[type="file"]{padding:6px;border:1px dashed var(--border);border-radius:12px;background:#0f1317}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){.row{grid-template-columns:1fr}}
.progress{height:8px;background:#0c1116;border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.bar{height:100%;width:0%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.row-btns{display:flex;gap:8px;margin-top:12px}

/* Feed */
.feed{display:flex;flex-direction:column;gap:14px}
.post{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.post-hd{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.post-hd .ava{width:36px;height:36px;border-radius:50%;background:#0f1317;border:1px solid var(--border);display:grid;place-items:center;font-weight:700}
.post-meta{font-size:12px;color:var(--muted)}
.post-body{padding:0}
.post-body img, .post-body video{display:block;width:100%;max-height:70vh;object-fit:contain;background:#000}
.post-cap{padding:12px 14px}
.post-actions{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border)}
.post-actions .btn{padding:6px 10px;border-radius:10px}

/* Empty State */
.empty{border:1px dashed var(--border);border-radius:16px;padding:24px;text-align:center;color:var(--muted)}

/* Avatar: always a perfect circle, never stretched */
:root {
  --avatar-size: 64px;        /* tweak for desktop */
  --avatar-size-sm: 56px;     /* tweak for mobile */
}

.profile .avatar,
#avatarPreview {
  width: var(--avatar-size);
  height: var(--avatar-size);
  aspect-ratio: 1 / 1;        /* ensures square even if width/height fight */
  border-radius: 9999px;      /* circle */
  display: grid;
  place-items: center;
  font-weight: 700;
  overflow: hidden;
  flex: 0 0 var(--avatar-size); /* don't let flexbox squish it */
  background-size: cover;       /* background images fill */
  background-position: center;
  background-repeat: no-repeat;
}

/* Smaller on narrow screens */
@media (max-width: 480px) {
  .profile .avatar,
  #avatarPreview {
    width: var(--avatar-size-sm);
    height: var(--avatar-size-sm);
    flex-basis: var(--avatar-size-sm);
  }
}













/* ===== Mobile Polish Patch (safe, additive) ===== */

/* Fix subtle right-side overflow caused by rogue 100vw, wide elements, etc. */
html, body { overflow-x: hidden; }
* { box-sizing: border-box; }

/* Center the main page content and set comfortable page paddings */
.page,
main,
.container {
  max-width: 980px;              /* keep desktop cap */
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Card modernization */
.card {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
 
}

.card.subtle {
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

/* Posts: make media nearly edge-to-edge on mobile, while staying tidy on desktop */
.post { 
  border-radius: 18px;
  overflow: hidden;              /* ensures media corners are rounded */
  background: #252525;
  
}

/* Ensure media fills width and keeps aspect */
.post .post-body img,
.post .post-body video {
  display: block;
  width: 92%;
  height: auto;
  max-width: none;
  border-radius: 14px;           /* soft corners inside card */
  background: #000;
}


/* Buttons a bit more tactile */
.btn {
  border-radius: 999px;
  padding: 4px 4px;
  
  border: 1px solid rgba(0,0,0,0.12);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn.danger { border-color: rgba(255,77,79,.25); color: #ff4d4f; }


   /* Let media visually span the card width nicely */
  .post {
    margin-left: -4px;           /* subtle full-bleed feel without true edge-to-edge */
    margin-right: -34px;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  /* Make post text compact but readable */
  .post .post-cap { font-size: 0.98rem; }

    /* Settings + Groups cards spacing */
  #groupsManager .grid { gap: 10px; }
  .stack-md > * + * { margin-top: 12px; }
  .stack-lg > * + * { margin-top: 16px; }


/* ===== Optional: tiny motion for modern feel (very light) ===== */
@media (prefers-reduced-motion: no-preference) {
  .post .post-body img,
  .post .post-body video {
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .post .post-body img:hover,
  .post .post-body video:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  }
}