/* ===== Topbar ===== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: calc(6px + env(safe-area-inset-top)) var(--gutter) 0; margin: calc(var(--gutter) * -1) calc(var(--gutter) * -1) 10px;
  border-bottom: 1px solid var(--line);
}
/* blurはtopbar自身ではなく擬似要素に持たせる。backdrop-filterは子孫のposition:fixedの包含ブロックを生成するため、
   topbarに直接付けるとモバイルのボトムシート(.period-dropdown)がビューポートではなくtopbar基準になり画面上部へはみ出す */
.topbar::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg-a82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; }
.controls-row .ui-toggle { margin-left: auto; }
.topbar-tabs { flex-basis: 100%; min-width: 0; } /* min-width:0 が無いとタブ行の内容幅で横にはみ出す */
.topbar.topbar-bare { padding: env(safe-area-inset-top) 0 0; margin-bottom: var(--gutter); border-bottom: none; }
@media (max-width: 720px) {
  .topbar[data-collapsed="true"] { top: calc(env(safe-area-inset-top) - var(--topbar-shift)); }
  .topbar[data-collapsed="true"]::before { top: calc(var(--topbar-shift) - env(safe-area-inset-top)); }
  .topbar[data-collapsed="true"] .controls-row { visibility: hidden; }
}
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) { .topbar, .topbar::before { transition: top 0.2s ease; } }
.controls-reanalyze { position: relative; isolation: isolate; display: none; align-items: center; min-height: 44px; width: auto; padding: 0 16px; border: none; border-radius: 8px; background: none; color: var(--accent); font-size: 0.875rem; white-space: nowrap; cursor: pointer; }
.controls-reanalyze::before { content: ''; position: absolute; inset: 5px 0; z-index: -1; border: 1px solid var(--line); border-radius: 8px; } /* 枠はチップと同じく上下5px内側に描く */
.controls-reanalyze:hover { background: none; }
.controls-reanalyze:hover::before { border-color: var(--accent); background: var(--accent-a10); }
@media not all and (max-width: 720px) { .controls-reanalyze { display: inline-flex; } }
.topbar-trailing { display: none; flex-basis: 100%; justify-content: flex-end; padding: 8px 0 6px; }
@media not all and (max-width: 720px) { .topbar-trailing { display: flex; } }