/* 2026-09-11 15:12 */
/* Application shell: top bar, two-column body, mobile swipe panes. */
#app { display: flex; flex-direction: column; height: 100dvh; }

.topbar {
  display: flex; align-items: center; gap: var(--gap);
  padding: 10px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.topbar .brand { font-weight: 700; color: var(--accent); letter-spacing: -0.5px; }
.topbar .spacer { flex: 1 1 auto; }
.topbar .search_wrap { flex: 1 1 auto; max-width: 520px; position: relative; }
.topbar .right_group { display: flex; align-items: center; gap: 8px; }

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

.col_tags {
  flex: 0 0 var(--tags_width, 280px);
  min-width: 140px; max-width: 60%;
  overflow-y: auto; overflow-x: hidden;
  background: var(--panel_alt);
  border-right: 1px solid var(--border);
  padding: 10px;
}

.divider {
  flex: 0 0 6px; cursor: col-resize; background: transparent;
  position: relative; z-index: 5;
}
.divider::after { content: ''; position: absolute; inset: 0 2px; background: var(--border); border-radius: 2px; }
.divider:hover::after { background: var(--accent_soft); }

.col_main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 14px; position: relative; }

.view { display: none; }
.view.active { display: block; }

#btn_tags_toggle { display: none; }

/* mobile: two swipeable panes */
@media (max-width: 720px) {
  .body { overflow-x: hidden; }
  #btn_tags_toggle { display: inline-flex; }
  .col_tags {
    position: absolute; inset: 0 auto 0 0; width: 82%;
    transform: translateX(-100%); transition: transform 0.18s ease;
    z-index: 20; box-shadow: var(--shadow);
  }
  .divider { display: none; }
  body.pane_tags .col_tags { transform: translateX(0); }
  .col_main { width: 100%; }
  .topbar .search_wrap { max-width: none; }
}