/* ================================================================
   DXED HOME V2 — social-first living feed (hv-*).

   Home is a social feed. Real posts render through the platform's own
   post card and keep its styling untouched; system events are compact
   feed-native cards; the strip and modules are supporting context.
   Continuous feed: thin separators, no dashboard-widget borders.
   ================================================================ */

/* When V2 is active, classic feed surfaces inside Home hide; the header
   (brand/bells) and composer stay — posting remains central. */
body.home-v2 #home-section > *:not(.section-header):not(#home-v2-root):not(.m-composer) { display: none !important; }
body.home-v2 #home-section .header-tabs { display: none; }

/* Block layout on purpose: a grid's auto track would size to the widest
   unshrinkable child (the horizontal strip) and blow every row out past
   the viewport. Children are stacked blocks that can never exceed 100%. */
#home-v2-root { display: block; padding: 2px 0 40px; max-width: 100%; min-width: 0; }
#home-v2-root > * { max-width: 100%; min-width: 0; }

/* ── Compact context strip: one slim row, never the main event ── */
.hv-strip {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px;
  scrollbar-width: none; margin-bottom: 2px;
}
.hv-strip::-webkit-scrollbar { display: none; }
.hv-strip-item {
  display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 240px;
  padding: 4px 10px; font-size: 11.5px; cursor: pointer;
  color: var(--text-secondary, #969aa6);
  background: none; border: 1px solid var(--border, #22242b);
  border-radius: 999px; transition: color .15s, border-color .15s;
}
.hv-strip-item:hover { color: var(--text-primary, #edeef1); border-color: var(--border-strong, #33363f); }
.hv-strip-market { color: var(--accent-green, #4f9e6a); }
.hv-strip-domain {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted, #5c606b); flex: none;
}
.hv-strip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hv-strip-meta { color: var(--text-muted, #5c606b); font-size: 10.5px; flex: none; }

/* ── Continuous feed ── */
.hv-stream { display: flex; flex-direction: column; }
.hv-feed-item { border-bottom: 1px solid var(--border, #1d1f26); }
.hv-feed-item:last-child { border-bottom: 0; }
/* Real post cards keep the platform's own styling; just remove doubled
   outer chrome so the feed flows as one surface. */
.hv-feed-post .post-card { border-left: 0; border-right: 0; border-radius: 0; margin: 0; }

/* ── Feed-native system cards: sized like a post, not a widget ── */
.hv-native {
  display: flex; gap: 11px; padding: 12px 14px; text-align: left;
}
.hv-native-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--bg-elevated, #1b1d24); border: 1px solid var(--border, #22242b);
  color: var(--text-secondary, #969aa6); font-weight: 700;
}
.hv-native-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hv-native-avatar[data-domain="market"] { color: var(--accent-gold, #b3993f); }
.hv-native-avatar[data-domain="arena"] { color: var(--game-accent, #9aa4c0); }
.hv-native-body { min-width: 0; flex: 1; display: grid; gap: 4px; }
.hv-native-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.hv-native-head strong { font-size: 14px; }
.hv-native-meta { font-size: 12px; color: var(--text-muted, #5c606b); }
.hv-native-text { font-size: 13.5px; line-height: 1.45; color: var(--text-primary, #edeef1); overflow-wrap: anywhere; }
.hv-native-media { display: block; margin-top: 2px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border, #22242b); max-width: 480px; }
.hv-native-media img { display: block; width: 100%; max-height: 200px; object-fit: cover; }
.hv-native-actions { display: flex; gap: 4px; margin-top: 2px; }
.hv-nact {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; font-size: 12px; color: var(--text-muted, #5c606b);
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  transition: color .15s, background .15s;
}
.hv-nact:hover { color: var(--text-primary, #edeef1); background: var(--bg-elevated, #1b1d24); }

/* ── Slim inline modules (max two, deep in the stream) ── */
.hv-card { padding: 12px 14px; }
.hv-module { background: none; }
.hv-card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
.hv-card-head h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.hv-muted { color: var(--text-muted, #5c606b); font-size: 11.5px; }

/* ── Rows (modules + since) ── */
.hv-rows { display: grid; gap: 2px; }
.hv-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 8px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  color: inherit; transition: background .15s;
}
.hv-row:hover { background: var(--bg-elevated, #1b1d24); }
.hv-row-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg-elevated, #1b1d24); border: 1px solid var(--border, #22242b);
  color: var(--text-secondary, #969aa6); overflow: hidden;
}
.hv-avatar { width: 28px; height: 28px; object-fit: cover; border-radius: 8px; }
.hv-row-body { min-width: 0; flex: 1; display: grid; gap: 0; }
.hv-row-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-row-sub { font-size: 11.5px; color: var(--text-muted, #5c606b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-row-time { flex: none; font-size: 11px; color: var(--text-muted, #5c606b); }
.hv-tagchip { font-size: 9.5px; color: var(--text-muted, #5c606b); border: 1px solid var(--border, #22242b); border-radius: 5px; padding: 0 4px; }
.hv-pct { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.hv-pct[data-dir="up"] { color: var(--accent-green, #4f9e6a); }
.hv-pct[data-dir="down"] { color: var(--accent-red, #cf5a5e); }
.hv-more {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  padding: 6px 8px; font-size: 12px; color: var(--text-secondary, #969aa6);
  background: none; border: 0; cursor: pointer; border-radius: 8px;
}
.hv-more:hover { background: var(--bg-elevated, #1b1d24); color: var(--text-primary, #edeef1); }

/* ── Games module: one compact scroll row, not a grid wall ── */
.hv-games { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.hv-game { flex: none; width: 128px; display: grid; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; }
.hv-game-cover {
  width: 128px; aspect-ratio: 460/215; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border, #22242b); background: var(--bg-elevated, #1b1d24);
  display: block; transition: border-color .15s;
}
.hv-game:hover .hv-game-cover { border-color: var(--border-strong, #33363f); }
.hv-game-cover-empty { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.hv-game-name { font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-game-meta { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-muted, #5c606b); overflow: hidden; white-space: nowrap; }

/* ── Since you were away: one COMPACT block, never the whole screen ── */
.hv-since { border-bottom: 1px solid var(--border, #1d1f26); margin-bottom: 2px; }
.hv-since .hv-row { padding: 5px 8px; }
.hv-since .hv-row-icon { width: 24px; height: 24px; border-radius: 7px; }
.hv-since .hv-row-title { font-size: 12.5px; }
.hv-since .hv-row-sub { display: none; } /* one line per item — details are a tap away */
.hv-since-more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  padding: 4px 8px; font-size: 11.5px; color: var(--text-muted, #5c606b);
  background: none; border: 0; cursor: pointer; border-radius: 7px;
}
.hv-since-more:hover { color: var(--text-primary, #edeef1); background: var(--bg-elevated, #1b1d24); }
.hv-since[data-collapsed="true"] .hv-row:nth-child(n+4) { display: none; }

/* ── New-activity queue: small, native, only when real items exist ── */
.hv-queue[hidden] { display: none !important; }
.hv-queue {
  position: sticky; top: 8px; z-index: 5; margin: 4px auto;
  display: flex; width: fit-content; align-items: center; gap: 5px;
  padding: 5px 13px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--text-primary, #edeef1);
  background: var(--bg-elevated, #1b1d24); border: 1px solid var(--border-strong, #2a2c33);
  border-radius: 999px; box-shadow: var(--shadow-lift, 0 8px 24px rgba(0,0,0,.45));
  animation: hv-in .25s ease;
}
@keyframes hv-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Infinite scroll markers ── */
.hv-caughtup {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  padding: 10px; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted, #5c606b);
}
.hv-morestate { padding: 14px; text-align: center; font-size: 12.5px; color: var(--text-muted, #5c606b); }
.hv-morestate[hidden] { display: none !important; }

/* ── Skeletons mirror a social feed, not widget blocks ── */
.hv-skel { display: grid; gap: 0; }
.hv-skel .hv-strip { margin-bottom: 6px; }
.hv-skelchip { flex: none; width: 130px; height: 26px; border-radius: 999px; background: var(--bg-card, #15161c); animation: hv-pulse 1.4s ease infinite; }
.hv-skelcard { height: 84px; border-bottom: 1px solid var(--border, #1d1f26); background: var(--bg-card, #15161c); animation: hv-pulse 1.4s ease infinite; }
@keyframes hv-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .hv-queue, .hv-skelchip, .hv-skelcard { animation: none; }
}

/* ── Mobile density: several items per screen, not two giant cards ── */
@media (max-width: 640px) {
  #home-v2-root { padding-bottom: 84px; } /* clear the bottom nav */
  .hv-native { padding: 10px 12px; gap: 9px; }
  .hv-native-avatar { width: 34px; height: 34px; }
  .hv-native-head strong { font-size: 13.5px; }
  .hv-native-text { font-size: 13px; }
  .hv-native-media img { max-height: 150px; }
  .hv-card { padding: 10px 12px; }
  .hv-game { width: 112px; }
  .hv-game-cover { width: 112px; }
}