/* ============================================================
   layout.css —— 结构布局 + 响应式（媒体查询集中在此）
   ============================================================ */

.term-body {
  flex: 1; display: flex; min-height: 0; position: relative;
}

#sidebar {
  width: 248px; flex: none;
  display: flex; flex-direction: column;
  padding: 14px 8px;
  border-right: 1px solid var(--border-dim);
  position: sticky; top: 0;
  height: calc(100dvh - 130px);
}
#chapter-nav { flex: 1; min-height: 0; overflow-y: auto; }
#side-ops {
  flex: none; padding-top: 8px; margin-top: 6px;
  border-top: 1px dashed var(--border-dim);
}

#main {
  flex: 1; min-width: 0;
  padding: 16px 22px 40px;
}

.toolbar {
  display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(180deg, var(--bg) 82%, transparent);
  padding: 6px 0 14px;
}

#backdrop { display: none; }

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
  body { font-size: 13.5px; }
  .term { margin: 0; min-height: 100dvh; border-radius: 0; border: none; }

  .menu-btn { display: block; }
  .dots { display: none; }

  #sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
    width: min(78vw, 300px); height: 100dvh;
    background: var(--bg);
    border-right: 1px solid var(--border);
    transform: translateX(-102%);
    transition: transform .22s ease;
    padding-top: 18px;
  }
  #sidebar.open { transform: translateX(0); box-shadow: 24px 0 60px rgba(0,0,0,.6); }
  #sidebar.open ~ #backdrop {
    display: block; position: fixed; inset: 0; z-index: 99;
    background: rgba(0,0,0,.55);
  }

  #main { padding: 12px 12px 90px; }

  .flags { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .flags::-webkit-scrollbar { display: none; }
  .flag { flex: none; }

  .ch-bar { display: none; }            /* 窄屏隐藏章头进度条防换行错位 */
  .sb-editor { grid-template-columns: 1fr; }  /* 窄屏编辑/预览上下排 */
  .sb-answer, .sb-preview { min-height: 180px; }
  .q-marks { padding-right: 6px; }
  .q-star, .q-mark { width: 40px; height: 40px; }  /* 触控热区 ≥ 40px */
  .q-answer { margin: 0 8px 10px; padding: 10px 12px; }

  #statusline {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: #0c1117f2; backdrop-filter: blur(6px);
    padding-bottom: calc(7px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .sl-hint { display: none; }
  .boot-logo { font-size: 7px; }
}

@media (min-width: 769px) and (max-width: 980px) {
  #sidebar { width: 200px; }
  .nav-bar { display: none; }
}