.variant-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:24px; }
.variant-toolbar>button { height:44px; display:inline-flex; gap:7px; align-items:center; }
.variant-segments { display:flex; flex-wrap:wrap; align-items:center; gap:3px; padding:3px; background:var(--pill); border-radius:12px; min-width:0; max-width:100%; }
#variant-tabs { display:contents; }
.variant-tab { display:flex; position:relative; align-items:center; border-radius:9px; min-width:0; max-width:100%; }
.variant-tab.is-active { background:var(--card); box-shadow:0 1px 2px var(--line); }
.variant-tab>button,#variant-add { background:transparent; border-color:transparent; }
.variant-select { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:9px 8px 9px 12px; }
.variant-menu-button { padding:9px 6px; min-width:32px; }
#variant-add { padding:9px 14px; }
.variant-name { width:145px; max-width:100%; min-height:44px; padding:8px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--card); font:inherit; }
.variant-menu { position:absolute; top:100%; right:0; width:160px; z-index:5; padding:5px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 30px var(--line); }
.variant-menu button { display:block; width:100%; text-align:left; border:0; }
main.is-comparing { max-width:1100px; }
.is-comparing .compare-boards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.active-board,#compare-panel { min-width:0; }
.board-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; height:60px; min-width:0; font-size:13px; font-weight:550; }
#active-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#compare-select { min-width:0; width:100%; max-width:210px; height:44px; padding:8px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; font:inherit; }
#swap-sides { flex:none; }
#compare-grid { cursor:pointer; }
#compare-mobile { display:none; }
:root { view-transition-name:none; }
#grid { view-transition-name:feed-grid; }
::view-transition-group(feed-grid) { animation-duration:120ms; }
::view-transition-old(feed-grid),::view-transition-new(feed-grid) { animation-duration:120ms; }
@media(max-width:650px) {
  .variant-toolbar { gap:6px; }
  .variant-segments { flex-basis:100%; }
  .variant-select { max-width:130px; }
  .is-comparing .compare-boards { display:block; }
  .is-comparing #compare-panel { display:contents; }
  .is-comparing #compare-panel .grid,.is-comparing #compare-panel .feed-bottom { display:none; }
  .is-comparing #compare-panel .board-heading { margin-top:16px; }
  .is-comparing { padding-bottom:110px; }
  #compare-mobile { display:flex; position:fixed; bottom:max(16px,env(safe-area-inset-bottom)); left:16px; right:16px; padding:4px; gap:4px; background:var(--pill); border:1px solid var(--line); border-radius:14px; z-index:6; }
  #compare-mobile button { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:transparent; border:0; }
  #compare-mobile button[aria-pressed="true"] { background:var(--card); }
}
@media(prefers-reduced-motion:reduce) {
  ::view-transition-group(feed-grid),::view-transition-old(feed-grid),::view-transition-new(feed-grid) { animation:none; }
}

.grid-snapshot { position:absolute; pointer-events:none; z-index:4; view-transition-name:none; }