/* ============================================================================
   responsive.css — 平板 / PC 横竖屏自适应（Stage: multi-device）

   设计原则：
   - 手机竖屏 (<768px)：完全保持现有移动布局（顶栏 + 底部 Tab Bar + 单列）。不改。
   - 平板 (768–1023px)：加宽正文；feed 走多列网格（行优先，排名左→右）；保留底部 Tab Bar。
   - PC / 平板横屏 (≥1024px)：Tab Bar 变身「左侧固定导航栏」；正文右移；feed 多列网格。
   - ≥1440px：网格升至 3 列，feed 容器更宽。

   全部使用 CSS 逻辑属性（inset-inline-start / margin-inline-start / border-inline-end），
   自动适配 RTL（阿拉伯语 dir=rtl 时侧栏落在起始侧）。
   零 JS、CSP 安全（纯 CSS，无 eval）。
   ============================================================================ */

:root {
  --sidebar-width: 248px;
  --card-min: 400px;   /* 每列最小宽度 = 9:16 手机竖屏宽度；网格按此自动算列数，列永不窄于手机 */
}

/* ===================== 瀑布格容器（首页 feed） ===================== */
/* 手机竖屏：默认块流单列（不设 columns），保持现状 */

/* 行优先流式网格：排名从左到右、从上到下（item 1 左上 → item 2 右上 → 换行）。
   auto-fill + minmax(--card-min, 1fr)：每列永不窄于手机竖屏宽度，
   容器每多容下一个「手机宽」列就自动加一列；放不下 2 列时回落单列。
   卡片按内容高度不拉伸（align-items:start）。 */
@media (min-width: 768px) {
  .markets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
    gap: var(--space-4);
    align-items: start;
  }
  /* 网格用 gap 控制间距，清掉卡片默认 margin-bottom 以免多余空隙 */
  .markets-grid > * { margin-bottom: 0; min-width: 0; }
}

/* ===================== 平板 (768–1023px) ===================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root { --content-max: 720px; }
  /* feed / 仪表类页面加宽以容纳多列 */
  .page-home .container,
  .page-activity .container,
  .page-me .container,
  .page-me-bets .container {
    max-width: 920px;
  }
}

/* ===================== PC / 平板横屏 (≥1024px)：左侧固定导航 ===================== */
@media (min-width: 1024px) {
  :root {
    --content-max: 780px;      /* 表单 / 正文舒适宽度 */
    --content-max-wide: 1440px;
  }

  /* ---- Tab Bar → 左侧固定侧栏 ---- */
  .tabbar {
    inset-block-start: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: var(--sidebar-width);
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-3);
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom, 0px));
    border-top: none;
    border-inline-end: 1px solid var(--c-border-subtle);
    background: color-mix(in srgb, var(--c-bg) 94%, transparent);
    overflow-y: auto;
  }

  .tabbar-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    height: auto;
    min-height: 46px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--c-text-secondary);
    transition: background var(--dur-fast) var(--ease-out-quart),
                color var(--dur-fast) var(--ease-out-quart);
  }
  .tabbar-item svg { width: 20px; height: 20px; flex: none; }
  .tabbar-item span {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    max-width: none;
    line-height: 1.2;
  }
  .tabbar-item:hover { background: var(--c-glass); color: var(--c-text-primary); }
  .tabbar-item.is-active {
    background: var(--c-glass-strong);
    color: var(--c-text-primary);
    box-shadow: inset 3px 0 0 var(--c-accent);
  }
  /* 移动端的顶部下划线指示器在侧栏模式下移除 */
  .tabbar-item.is-active::after { display: none; }

  /* 徽标点/角标在侧栏中定位到行右侧 */
  .tabbar-item .nav-badge,
  .tabbar-item .nav-dot {
    position: static;
    margin-inline-start: auto;
  }

  /* ---- 中央「创建」键：侧栏中变常规强调按钮 ---- */
  .tabbar-center-action {
    order: 0;
    margin: var(--space-2) 0;
  }
  .tabbar-center-action .tabbar-center-plus {
    width: 20px;
    height: 20px;
    background: none;
    box-shadow: none;
    color: inherit;
    border-radius: 0;
    transform: none;
  }
  .tabbar-center-action .tabbar-center-plus svg { width: 20px; height: 20px; }
  .tabbar-center-label {
    display: inline;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
  }
  .tabbar-center-action {
    background: var(--c-accent-soft);
    color: var(--c-accent-text);
    box-shadow: inset 0 0 0 1px var(--c-accent-soft);
  }
  .tabbar-center-action:hover { background: var(--c-accent); color: #fff; }
  .tabbar-center-action:hover .tabbar-center-plus { color: #fff; }

  /* ---- 正文区右移，让出侧栏 ---- */
  main.main {
    margin-inline-start: var(--sidebar-width);
    padding-inline: var(--space-4);
  }

  /* feed / 仪表页用宽容器承载瀑布；表单页保持窄 */
  .page-home .container,
  .page-activity .container,
  .page-me .container,
  .page-me-bets .container,
  [class*="page-admin"] .container {
    max-width: var(--content-max-wide);
  }
  /* 认证 / 单列表单保持易读窄宽 */
  .page-login .container,
  .page-register .container,
  .page-forgot-password .container,
  .page-reset-password .container {
    max-width: 480px;
  }

  /* 中央长按菜单在桌面无意义（点击即导航），隐藏 */
  .center-menu { display: none !important; }

  /* 顶栏在宽屏留出更舒适的内边距 */
  .topbar { padding-inline: var(--gutter); }
}

/* 隐藏中央「创建」标签于移动端（仅显示 + 圆钮） */
@media (max-width: 1023.98px) {
  .tabbar-center-label { display: none; }
}

/* ===================== 超宽屏：容器继续放宽，网格自动加列 ===================== */
@media (min-width: 1600px) {
  .page-home .container,
  .page-activity .container,
  .page-me-bets .container {
    max-width: 1760px;
  }
}
@media (min-width: 1920px) {
  .page-home .container,
  .page-activity .container,
  .page-me-bets .container {
    max-width: 2160px;
  }
}