/* 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 */
/* Base: two columns (left + center) */
.grid{display:grid;gap:16px;grid-template-columns:340px 1fr}

/* Desktop ≥1200px: three columns (left + center + right/aside) */
@media (min-width:1200px){
  .grid{grid-template-columns:340px 1fr 320px}
}

/* Phones/small tablets <960px: single column, hide side rails if your HTML does */
@media (max-width:959px){
  .grid{grid-template-columns:1fr}
}

/* 960–1199px: keep two columns, place <aside> full-width below and centered */
@media (min-width:960px) and (max-width:1199px){
  aside{
    grid-column:1 / -1;    /* span both columns */
    justify-self:center;   /* center itself in the grid row */
    width:min(760px,100%); /* optional: keep it tidy */
  }
  aside .card{
    max-width:760px;
    margin-inline:auto;
  }
}

/* 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: 100% !important;
  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);
  }
}

/* ===== Locations view & dialog (dark theme polish) ===== */

/* Cards & text */
#view-locations .card {
  background: rgba(10, 10, 10, 0.897);
  border: 1px solid rgba(255,255,255,0.10);
  color: #e9edf2;
}
#view-locations .card .hd strong { color: #fff; }
#view-locations .muted { color: rgba(255,255,255,0.75); }
#view-locations .stack > * + * { margin-top: 10px; } /* simple stack gap */

/* Add Location dialog shell */
/* ===== Locations dialog polish ===== */
#dlgAddLocation {
  /* solid, readable card */
  background: #0f1514;
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  padding: 16px;
  max-width: 680px;
  width: min(680px, 96vw);
  z-index: 10000; /* sit above any feed z-layers */
}

#dlgAddLocation::backdrop {
  background: rgba(0, 0, 0, 0.123);
  backdrop-filter: blur(8px) saturate(1.8);
}

/* Spacing & headings inside the dialog */
#dlgAddLocation h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

/* Inputs look like proper dark UI */
#dlgAddLocation .field .lbl { 
  font-size: 12px; 
  opacity: .9; 
  margin-bottom: 6px; 
}

#dlgAddLocation input,
#dlgAddLocation textarea {
  background: #12151b;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
}

#dlgAddLocation input::placeholder,
#dlgAddLocation textarea::placeholder { 
  color: rgba(255,255,255,.55); 
}

#dlgAddLocation input:focus,
#dlgAddLocation textarea:focus {
  border-color: rgba(0,163,122,.55);
  box-shadow: 0 0 0 3px rgba(0,163,122,.20);
}

/* File input */
#dlgAddLocation input[type="file"] {
  background: transparent;
  border: 1px dashed rgba(255,255,255,.20);
  padding: 12px;
}

/* Buttons row */
#dlgAddLocation .row.right {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#dlgAddLocation .btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: #eaeef2;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

#dlgAddLocation .btn.primary {
  background: #00A37A;
  border-color: #00A37A;
  color: #03130e;
  font-weight: 600;
}

#dlgAddLocation .btn:hover { 
  background: rgba(255,255,255,.08);
}
#dlgAddLocation .btn.primary:hover { 
  filter: brightness(1.06);
}

/* Tiny helper text inside the dialog */
#dlgAddLocation .muted, 
#dlgAddLocation .tiny { 
  color: rgba(255,255,255,.7);
}


/* Gallery images inside location cards */
#view-locations img {
  border-radius: 10px;
  background: #0d0f12;
}

/* Make global feed media full width like profile */
#view-feed .post .post-body img,
#view-feed .post .post-body video,
#feed .post .post-body img,
#feed .post .post-body video {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 14px; /* keep your nice corners */
}

/* Moible layout view aded after multi image uplaod was installed,*/

/* ---- Global hygiene ---- */
* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

/* Make media never overflow the viewport */
img, video { max-width: 100%; height: auto; }

/* ---- Responsive 3-column layout ----
   Assumes your main shell looks like:
   <div id="layout">
     <aside class="col-left">…</aside>
     <main  class="col-center">…</main>
     <aside class="col-right">…</aside>
   </div>
*/
#layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 700px) 320px;
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 12px;
}

/* Keep sidebars visible on desktop, and prevent sticky/height issues */
.col-left, .col-right, .col-center { min-width: 0; }

/* Optional: sticky sidebars */
@media (min-width: 901px) {
  .col-left  { position: sticky; top: 12px; align-self: start; }
  .col-right { position: sticky; top: 12px; align-self: start; }
}

/* ---- Mobile-first collapse ---- */
@media (max-width: 900px) {
  #layout {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 12px;
    padding: 8px;
  }

  /* Reorder for a good mobile reading flow:
     Center feed first, then left tools, then right tools. */
  .col-center { order: 1; }
  .col-left   { order: 2; }
  .col-right  { order: 3; }

  /* Hide sidebars if you prefer — uncomment if desired */
  /* .col-left, .col-right { display:none; } */

  /* Ensure posts/cards don't create horizontal scroll */
  .post, .card, .composer, .reactions { max-width: 100%; overflow: hidden; }
}

/* Prevent any container from exceeding viewport width */
.container, .wrap, .content {
  max-width: 100%;
  overflow-x: hidden;
}

/* Utility: avoid long words/links blowing the layout */
.post-cap, .post-meta, .bd, .hd {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
/* Safe area & no horizontal scroll */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Top bar: make icons fully visible and tappable */
.topbar, .header, .navbar, .desktop-tools {
  /* use whichever class your header uses; listing a few common ones */
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;              /* give icons breathing room */
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: var(--bg, #111);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Buttons / icons in the header */
.topbar [data-go],
.header [data-go],
.navbar [data-go],
.desktop-tools [data-go] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;              /* improves tap target size */
  line-height: 1;
}

/* Prevent cards and posts from creating horizontal scroll */
.post, .card, .composer, .reactions {
  max-width: 100%;
  overflow: hidden;
}

/* Images/video never overflow */
img, video { max-width: 100%; height: auto; }

/* Keep long strings from breaking layout */
.post-cap, .post-meta, .bd, .hd {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Mobile layout tidy-up */
@media (max-width: 900px) {
  /* If you use a three-column shell like #layout with .col-left/.col-center/.col-right,
     keep it single column and ordered for mobile. */
  #layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 12px;
    padding: 8px;
  }
  .col-center { order: 1; }
  .col-left   { order: 2; }
  .col-right  { order: 3; }
}
.topbar {
  position: sticky; top: 0; z-index: 1000;
  min-height: 56px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
}

.topbar .btn, .desktop-tools .desk-btn, .mobile-tools .tool-btn {
  min-height: 40px; /* thumb-friendly */
}


/*=======      Newly added styling

/* === Profile Header Layout Fix === */
/* === Profile Header Fix + Restyle === */
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-top: 15px;
  margin-bottom: 20px;
  position: relative;
}

.profile-avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.06);
  background-size: cover;
  background-position: center;
  font-weight: 700;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 32px;
  border: 3px solid rgba(255,255,255,0.15);
}

.profile-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.profile-name {
  font-weight: 700;
  font-size: 1.2rem;
}

.profile-bio {
  font-size: 0.95rem;
  max-width: 90%;
  line-height: 1.4;
  word-wrap: break-word;
  color: rgba(255, 255, 255, 0.85);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .profile-avatar {
    width: 100px;
    height: 100px;
    font-size: 26px;
  }
  .profile-name {
    font-size: 1.05rem;
  }
  .profile-bio {
    font-size: 0.9rem;
  }
}


/* === Improved Profile Panel Readability === */
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 10px;
}

.profile-header .avatar.lg {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 30px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.12);
  transition: transform 0.2s ease;
}

.profile-header .avatar.lg:hover {
  transform: scale(1.05);
}

.profile-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.profile-name {
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0;
}

.profile-bio {
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 90%;
  color: rgba(255,255,255,0.9);
  word-wrap: break-word;
  white-space: pre-wrap; /* ensures multi-line display */
}

/* Section readability improvements */
#leftPanel .card .bd {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 768px) {
  .profile-header .avatar.lg {
    width: 90px;
    height: 90px;
    font-size: 26px;
  }
  .profile-name {
    font-size: 1.05rem;
  }
  .profile-bio {
    font-size: 0.9rem;
  }
}
/* === Profile View Layout Improvements === */
#view-profile .card .bd {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#view-profile .frow label.field {
  display: flex;
  flex-direction: column;
}

#view-profile input,
#view-profile textarea,
#view-profile select {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.95rem;
}

#view-profile textarea {
  resize: vertical;
  min-height: 60px;
  max-height: 300px;
}

#view-profile .lbl {
  font-size: 0.85rem;
  margin-bottom: 4px;
  opacity: 0.9;
}
/* === Bio editor: no scrollbars; let JS auto-size height === */
#p_bio {
  overflow: hidden !important;   /* prevents scrollbar */
  height: auto !important;       /* allow JS to grow it */
  min-height: 64px;              /* comfy default */
  resize: none;                  /* we’ll auto-resize; change to 'vertical' if you want the grip */
}
/* === Bio: editor grows to fit, no scrollbar, full width === */
#p_bio {
  display: block;
  width: 100%;
  min-height: 84px;
  line-height: 1.45;
  overflow: hidden !important;  /* no scrollbars; JS will grow height */
  resize: none;                  /* optional: let JS handle sizing */
  white-space: pre-wrap;         /* respect line breaks & wrap long words */
  word-wrap: break-word;
}

/* === Bio (left summary) shows all lines, never clipped === */
#profileBio {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  line-height: 1.45;
  white-space: pre-line;  /* keep line breaks while collapsing double spaces */
  word-wrap: break-word;
}


/* === Bio: always show everything, no clipping or scrollbars === */

/* Left summary (My Profile card) */
#profileBio {
  display: block !important;
  white-space: pre-wrap;   /* keep user line breaks */
  line-height: 1.5;
  word-wrap: break-word;
  overflow: visible !important;
  max-height: none !important;
}

/* Profile editor (textarea) */
#p_bio {
  display: block;
  width: 100%;
  line-height: 1.5;
  min-height: 84px;        /* comfy default */
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden !important; /* let JS grow height; no scrollbar */
  resize: none;                 /* keep it clean; JS handles size */
}

/* Remove the earlier cap that forced scrolling */
#view-profile textarea#p_bio { 
  max-height: none !important;
}
/* ==== OUTRIDER LAYOUT FIX PACK (drop-in, additive) ==== */
:root{
  --gap: 16px; --topbar-h: 56px; --toolbar-h: 52px; --container-pad: 18px;
  --card: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.10);
}

html, body { margin:0; padding:0; overflow-x:hidden; }
* { box-sizing: border-box; }
img, video { max-width:100%; height:auto; display:block; }

/* Container */
main.container, .container { width:100%; max-width:1200px; margin-inline:auto; padding-inline: var(--container-pad); }

/* Sticky bars and spacing */
.topbar { position: sticky; top:0; z-index:100; }
.mobile-tools{ position: sticky; top: var(--topbar-h); z-index: 120; }
.desktop-tools{ position: sticky; top: var(--topbar-h); z-index: 110; }

.views { margin-top: 16px; }
@media (max-width: 959px){
  .views { margin-top: calc(16px + var(--toolbar-h)); }
}

/* Grid: single column on mobile, 3 columns >= 960px (left / center / right) */
.grid { display:grid; gap: var(--gap); align-items:start; }
@media (max-width: 959px){
  .grid { grid-template-columns: 1fr !important; }
  #leftPanel, aside { display:none !important; }
}
@media (min-width: 960px){
  .grid { grid-template-columns: 340px minmax(0,1fr) 320px; }
  .grid > #leftPanel { grid-column: 1; }
  .grid > section:not(#leftPanel) { grid-column: 2; }
  .grid > aside { grid-column: 3; justify-self: stretch; width:auto; }
}

/* Cards unified look (feed, profile, right-rail) */
.card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
  width: 100%;
}
.card .bd{ color:#fff; }

/* Profile header sizing on mobile */
@media (max-width: 959px){
  .profile-header { grid-template-columns: 72px 1fr !important; gap:12px; }
}

/* FEED & PROFILE: media should be full-bleed inside cards */
#view-feed .card .post-body,
#feed .post .post-body,
#view-profile .card .post-body { padding-left:0 !important; padding-right:0 !important; }

#view-feed .card img,
#view-feed .card video,
#feed img, #feed video,
#view-profile .card img,
#view-profile .card video {
  width:100% !important; max-width:100% !important; height:auto !important; border-radius:12px;
}

/* Gallery polish */
.gallery{ max-width:100%; overflow:hidden; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.gallery-track{ display:flex; transition:transform .28s ease; will-change:transform; }
.gallery-slide{ min-width:100%; }
.gallery-slide img, .gallery-slide video{ width:100%; height:auto; display:block; }
.gallery-btn{ background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25); }
.gallery-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); border:none; }
.gallery-dot[aria-current="true"]{ background:#fff; }

/* Make right sidebar behave on medium widths (tablet/landscape) */
@media (min-width: 960px) and (max-width: 1199px){
  .grid { grid-template-columns: 280px minmax(0,1fr) 280px; }
}

/* Help deep-links: account for sticky topbar on scroll */
#view-help section { scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* Buttons/toolbar affordances */
.tool-btn[aria-current="page"],
.desk-btn[aria-current="page"]{ background: rgba(255,255,255,0.10) !important; }

/* Make post cards breathe on mobile without side “nudge” */
@media (max-width: 959px){
  #view-feed .post, #feed .post, #view-feed .card, #feed .card{
    margin-left:0 !important; margin-right:0 !important;
  }
  .container { padding-inline: 14px !important; }
}

/* Avatar defaults if an image isn’t set */
.avatar.lg, .avatar.sm {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* Prevent layout jump when modal opens */
#postModalWrap .modal{ max-width:min(940px,96vw); max-height:92vh; overflow:auto; }

/* Safer defaults for any stray “92% width” rules */
.post, .post .post-body, .card .post-body{ width:100% !important; }